常見的web安全問題總結
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-chinaalert嘗試
http://localhost:3000/?form=<scrupt>slert(1)</script> 如果有彈出，說明網站有漏洞，黑客就可以對網站傳送攻擊
獲取cookie
通過訪問你的網址，在url引數攻擊，獲取到cookie域名偽造 https://dwz.cn/ 用盜取的網址，修改一個簡易的網址，傳送攻擊，也能訪問，資訊也能儲存，又稱偽裝型網站 偽造cookie入侵，儲存型 儲存到DB後讀取注入
跨指令碼注入，通過指令碼注入程式碼。使用者比如傳送評論，使用者的資訊都會在黑客網站顯示，就可以拿到你所需要的資料
XSS攻擊的危害-Scripting能幹啥就能幹啥
1.獲取頁面資料 2.獲取Cookies 3.劫持前端邏輯 4.傳送請求 5.偷取網站的任意資料 6.偷取使用者的資料 7.偷取使用者的祕鑰和登入轉態 8.欺騙使用者 防範手段 HEAD ctx.set('X-XSS-Protection',0) //禁止XSS過濾 0：禁止XSS過濾 1： 啟用XSS過濾(通常瀏覽器是預設的)，如果檢測到跨指令碼攻擊，瀏覽器將清除頁面(刪除不安全的部分) mode=block 啟用XSS過濾，如果檢測到攻擊，瀏覽器將不再會清除頁面，而是阻止頁面載入report=<reporting-URL>(Chromium only)=啟用XSS過濾，如果檢測到跨站腳攻擊，瀏覽器將清除並使用、 CSP 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查詢程式碼，程式在接收後錯誤的將攻擊者的輸入作為查詢語句的一部分執行，導致原始的查詢邏輯被改變，額外的執行了攻擊者精心構造的惡意程式碼。
例如： 'or'1 '=' 1 填寫特殊密碼 拼接後的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])
1.嚴格限制web應用的資料庫的操作許可權**，給此使用者提供僅僅能夠滿足其工作的最低許可權，從而最大限度減少注入攻擊對資料庫的危害
2.後端程式碼檢查輸入的資料是否符合預期**，嚴格限制變數的型別，例如使用正則表示式進行一些匹配處理
3.對進行資料庫的特殊字串(',",\,>,<,&,%,等等)進行轉義處理，後者編碼轉換。基本所有的後端語言都有對字串進行轉義處理的方法，比例，loads的lodaash_escapehtmlchar等
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的指紋
以上都是對前端安全一些總結，歡迎大佬指點一二