we安全對於web前端從事人員也是一個特別重要的一個知識點，也是面試的時候，面試官經常問的安全前端問題。掌握一些web安全知識，提供安全防范意識，今天就會從幾個方面說起前端web攻擊和防御的常用手段
常見的web攻擊方式
1.XSS
XSS（Cross Site Scripting）跨站腳本攻擊，因為縮寫和css重疊，所以能叫XSS，跨腳本攻擊是指通過存在安全漏洞的web網站注冊用戶的瀏覽器內非法的非本站點HTML標簽或javascript進行一種攻擊。
跨站腳本攻擊有可能造成以下影響
1.利用虛假輸入表單騙取用戶個人信息
2.利用腳本竊取用戶的cookie值，被害者在不知情況的下，幫助攻擊者發送惡意請求
3.顯示偽造的文章活圖片
XSS攻擊分類：
反射型 -url參數直接注入
普通 http://localhost:3000/?form-china
http://localhost:3000/?form=<scrupt>slert(1)</script> 如果有彈出，說明網站有漏洞，黑客就可以對網站發送攻擊
獲取cookie
存儲型 存儲到DB后讀取注入
跨腳本注入，通過腳本注入代碼。用戶比如發送評論，用戶的信息都會在黑客網站顯示，就可以拿到你所需要的數據
XSS攻擊的危害-Scripting能干啥就能干啥
Content-Security-Policy: default-src 'self' 只允許加載本站資源 Content-security-Policy: img-src https:// 只允許加載https協議圖片 Content-security-Policy:child-src 'none' 不允許加載任何來源框架 例如 ctx.set('Content-security-Policy','default-src')
黑名單
用戶輸入永遠不可信任的，最普遍的做法就是轉義輸入的內容，對於引號，尖括號，斜杠進行轉義
function escape(str) { str = str.replace(/&/g, '&'); str = str.replace(/</g, '<'); str = str.replace(/>/g, '>'); str = str.replace(/"/g, '&quto;'); str = str.replace(/'/g, "'"); str = str.replace(/`/g, '`'); str = str.replace(/\//g, '/'); str = str.replace(/<\/script>/,'') return str }
富文本來說，顯然不能通過上面的辦法來轉義所有字符，因為這樣會把需要的格式過濾掉，對於這種情況，通常采用白名單的辦法，當然也可以通過黑名單過濾，但是考慮需要過濾的標簽和標簽屬性是在太多，更加推薦使用白名單的方式
白名單
const xss = require('xss')
let html = xss('<h1 id="title">XSS demo</h1> <script>alert('xss')</script>')
轉義成 <h1>XSS deom</h1>$lt;script$gt;alert('xss');</script$gt
HttpOnly Cookie
這是防止XSS攻擊竊取用戶cookie最有效的防御手段，web應用程序設置cookie時，將其屬性設置為HttpOnly 就可以防止網頁的cookie客戶端惡意JavaScript竊取，保護用戶cookie信息
設置方法：response.addHeader('Set-Cookie','uid=12;path=/; HttpOnly')
2.CSRF
CSRF(Cross Site Request Forgery)，既跨站請求偽造，是一種常見的web攻擊，他利用用戶以登錄的身份，在用戶不知情的情況下，以用戶的名字完成非法操作
1.用戶登錄了站點A，並在本地記錄了cookie
2.在用戶沒有登錄除站點A的情況下(也就是cookie生效的情況下)，訪問了惡意攻擊者提供引誘危險站點B(B站點需求訪問站點A)。
3.站點A沒有做任何CSRF防御
CSRF危害
1.利用用戶登錄狀態
2.用戶不知情
3.完成業務請求
4.盜取用戶資金(轉賬，消費)
5.冒充用戶發帖背鍋
6.損害網站聲譽
CSRF防御
禁止第三方網站帶cookie ----有兼容性問題
Referer Check ----Https不發送referer app.use(async(ctx,next)=>{ koa中間件實現 await next() const referer = ctx.request.header.referer console.log('Referer:',referer) }) 對登錄注冊設置驗證碼校驗
3.點擊劫持--clickjacking
點擊劫持是一種視覺欺騙的攻擊手段，攻擊者將需要攻擊的網站通過iframe嵌套方式嵌入自己的網頁中，並將iframe設置為透明的，在頁面中透露出一個按鈕誘導用戶點擊 通過用於各種網站，使用iframe技術，圖片點幾進入一個其他網址，導致用戶信息泄密
點擊劫持防御
X-FRAME-OPTIONS 是一個HTTP響應頭，在現代瀏覽器有一個很好的支持，這個HTTP響應頭就是為了防御iframe嵌套的點擊劫持攻擊
該響應頭有三個值可選，分別是
DENY:表示頁面不允許通過iframe的方式展示
SAMEORIGIN:表示頁面可以在相同域名下通過iframe的方式展示
ALLOW-FRO:表示頁面可以在指定來源的iframe中展示
<style id="click-jack">
html{
display: none;
}
</style>
<script>
if(self == top) {
var style = document.getElementById('click-jack')
document.body.removeChild(style)
} else {
top.location = self.location
}
</script>
現在實現方式： ctx.set('X-FRAME-OPTIONS','DENY')
以上代碼的作用就是當通過iframe的方式加載頁面時，攻擊者的網頁直接不顯示所有內容了
4.SQL注入
攻擊者成功的向服務器提交惡意的SQL查詢代碼，程序在接收后錯誤的將攻擊者的輸入作為查詢語句的一部分執行，導致原始的查詢邏輯被改變，額外的執行了攻擊者精心構造的惡意代碼。
SELECT *
FROM test.user
WHERE username = 'xiaozhou'
AND password= '1' or '1' = '1'
老的后台數據庫登錄，黑客嘗試使用1' or '1' = '1相等於密碼，去登錄
防御
所有的查詢語句建議使用數據庫提供的參數查詢接口**。參數化的語句使用參數而不是將用戶輸入變量嵌入到SQL語句中，既不要直接拼接SQL語句，例如node.js中的mysqlis庫query方法中的？占位符參數
錯誤的寫法 cosnt sql = ` SELECT * FROM test.user WHERE username = '${ctx.reuqueset.body.username}' AND password= '${ctx.reuqueset.body.password}' ` console.log('sql',sql) res = await query(sql) 正確的寫法 const sql = ` SELECT * FROM test.user WHERE username = ? AND password= ? ` console.log('sql',sql) res = await query(sql.[ctx.request.body.username，ctx.reuqueset.body.password])
5.OS命令注入
os命令注入和sql注入差不多，只不過SQL注入是針對數據庫的，而OS命令注入是針對操作系統的，OS命令注入攻擊者指通過web應用,執行非法的操作系統命令達到攻擊的目的，只要在你讓那個調用Shell函數的地方就有存在被攻擊的風險，倘若 調用shell時存在疏漏，就可以執行插入非法命令
以node.js為例，假如在接口中需要從github下載用戶指定的repo
const exec = require('mz/child_process').exec;
let params = {/*用戶輸入的參數*/}
exec(`git clone ${params.repo} /some/path`)
如果傳入參數是會怎么樣
https://github.com/xx/xx.git && rm -fr /* &&
6.請求劫持
DNS劫持
顧名思義，DNS服務器(DNS解析各個步驟)被篡改，修改了域名解析的結果，使得訪問的不是預期的ip
HTTPS劫持
運營商劫持，此時大概就只能升級為HTTPS了
7.DDOS
http://www.ruanyifeng.com/blog/2018/06/ddos.html 阮一峰文檔說
DDOS不是一種攻擊，而是一大類攻擊的總稱，它有幾十張類型，新的攻擊方法還不斷發明出來，網站運行各個環節，都可以是攻擊目標，只要把一個環節攻破，使得整個流程、跑不起來，就得到癱瘓服務的目的
其中，比較常見的是一種攻擊是cc攻擊，他就是簡單粗暴地送來大量的正常請求，超出服務器的最大承受量，導致死機，
比如遭遇cc攻擊，最多的時候全世界大概20多個ip地址輪流發出請求，每個地址請求量在每秒200次-300次，我看訪問日志的時候，就覺得請求像洪水一樣涌來，一眨眼就是一大堆，幾分鍾的時候，日志文件的體積就大了100MB,
常見的攻擊方式
SYN Flood
此攻擊通過目標發送具有欺騙性源ip地址的大量TCP 初始鏈接請求SYN數據包來利用TCP握手，目標機器相應每個鏈請求，然后等待握手中的最后一步，這一步從未發生過，耗盡了過程中的目標資源
HTTP Flood
此攻擊類似於同時在多個不同計算機上反復按web瀏覽器中的刷新，大量HTTP請求泛濫服務器，導致拒接服務
防御手段
備份網站
備份網站不一定是全功能的，如果能做到全靜態瀏覽，就能滿足需求，最低限度應該可以顯示公告，告訴用戶，網站出看問題，正在全力搶修
HTTP請求攔截
硬件，服務器，防火牆 帶寬擴容 + CDN 提高犯罪成本
防范方法
1.密碼安全
泄露渠道
數據庫被偷 服務器被入侵 通信被竊聽 內部人員泄露 其他網站
防御密文-明文無法反推
嚴禁明文存儲 單向變換 變換復雜度要求 密碼復雜度要求 加鹽（仿拆解） 雪崩效應-明文小幅度 密文劇烈變化 密文固定長度 md5 sha1
密碼傳輸安全
https傳輸 頻次限制 前端加密意義有限-傳輸層加密，不會泄露，但不代表不能登錄
摘要加密的復雜度
md5反查,用node啟動了一個本地服務，使用node提供的crypto對密碼加密
雖然對密碼加密了，但是我們設置的過於簡單，通過md5反查，不到1秒就能查到密碼
https://cmd5.com/ 密碼設置太過簡單，就可直接通過這個地址查詢到自己的密碼，密碼設置數字加英文就不會當場查詢出來，需要付費就可以查詢出來了 如果設置數字，英文，字符串，就查詢不到
2.人機驗證 與 驗證碼
加強登錄驗證，防止黑客盜刷，導致服務器奔潰
滑動驗證碼實現原理
1.服務端隨機生成摳圖和帶有摳圖陰影的背景圖片，服務端保存隨機摳圖位置坐標
2.前端實現滑動交互，將摳圖拼在摳圖陰影之上，獲取用戶滑動距離值。
3.前端將用戶滑動距離值傳入服務端，服務端校驗誤差是否在允許范圍之內
3.HTTPS配置
HTTP弱點
危害 
竊聽---密碼 敏感信息
篡改--- 插入廣告 重定向其他網站
時代趨勢
目前全球互聯網正在從HTTP向HTTPS的大遷移
Chrome和火狐瀏覽器將對不采用HTTPS加密的網站提示不安全
蘋果要求所有APP通信必須采用HTTP加密
小程序強制要求服務器端使用HTTPS請求
特點
保密性(防泄密)
完整性(防篡改)
真實性(仿假冒)
什么是SSL證書
SSL證書由瀏覽器中受信任的根證書頒發機構在驗證服務器身份后頒發，具有網站身份驗證和加密傳輸雙重功能
密碼學
對稱加密、
對稱加密的一大缺點是秘鑰的管理和分配，話句話說，如何把秘鑰發送到需要解密你的消息的人的手里是一個問題，在發送秘鑰的過程中，秘鑰有很大的風險會被黑客們攔截，實現中通常的做法是將對稱加密的秘鑰進行對稱加密，然后傳送給需要他的人
不對稱加密
產生一對秘鑰 公鑰負責加密 私鑰負責解密 私鑰無法解開說明公鑰無效---抗抵抗 計算復雜對性能有影響
SSH公鑰登錄原理
密碼口令登錄
通過密碼進行登錄，主要流程為
1.客戶端連接上服務器之后，服務器吧自己的公鑰傳給客服端
2.客服端輸入服務器密碼通過公鑰加密之后傳給服務器
3.服務器根據自己的私鑰解密登錄密碼，如果正確那么久讓客戶端登錄
公鑰登錄
公鑰登錄是為了解決每次登錄服務都要輸入密碼的問題，流行使用RSA加密方案，主要流程包括
1.客戶端生成RSA公鑰和私鑰
2.客戶端將自己的公鑰存放到服務器
3.客戶端請求連接服務器，服務器將一個公鑰加密隨機字符串發送給客戶端
4.客戶端根據自己的私鑰加密這個隨機字符串之后再發送給服務器
5.服務器接收到加密后的字符串之后用公鑰解密，如果正確就讓客戶端登錄，否則拒絕
SSL證書分類
1.入門級DCSSL -域名有效，無門檻
2.企業級OVSSL-企業資質 個人認證
3.增強型EVSSL-瀏覽器給予綠色地址顯示公司名字
4.Session管理
對於cookie的安全管理，其重要行是不言而喻的。特別是對於動態的wen應用，在如HTTP這樣的無動態協議的之上，他們需要使用cookie來維護狀態
Cookie標識
secure 這個屬性告訴瀏覽器，僅在請求是通過HTTPS傳輸時，才傳遞cookie
HttpOnly 設置這個屬性將禁止JavaScript腳本獲取到這個cookie，這可以用來幫助防止跨站腳本攻擊.
Cookie域
domain 這個屬性用來比較請求URL中服務端的域名，如果域名匹配成功，或者是其子域名，則繼續檢查path屬性
path 除了域名，cookie可用的url路徑頁可以被指定，當域名和路徑都匹配時，cookie才會發送請求
expires 這個屬性用來設置持久化的cookie，當設置了他以后cookie在指定的時間到達之前都不會過期
5瀏覽器安全控制
X-XSS-Protection 防止反射型XSS
Strict-Transport-security 強制使用HTTPS通信
CSP
HTTP響應頭Content-Security-Policy 允許站點管理者在指定頁面控制用戶代理資源，除了少數例外，這條政策將極大的指定服務源，以及腳本端點，這將防止跨站腳本攻擊
<meat http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'nonde'; ">
爬蟲技術
使用cheerio與http和https
puppeter 無頭瀏覽器技術
反爬蟲技術
Usre-Agent， Referer ，驗證碼，驗證
單位時間的訪問次數，訪問量，限制
關鍵信息用圖片混交
異步加載技術
前度技術限制
字體亂序加密技術
將網站的重要字體，將html部分生成圖片
反爬蟲最高境界就是Canvas的指紋
以上都是對前端安全一些總結，歡迎大佬指點一二