聊聊大前端網絡安全那些事

雲栖号資訊：【 點選檢視更多行業資訊

】

在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！

網絡安全對前端童鞋來說大多數時候都是聽其有之，聞之則無，畢竟在現如今前端如火如荼的時代，大多數東西日益成熟，開箱即用，雲服務、架構等已經幫我們做了安全方面的防範，不需要我們去太過于關心前端網絡安全，作為一個前端愛好者，最近溫習一下這部分知識，做了個簡單的總結，順道呈現給各位看官，請注意查收。

xss攻擊

Cross-Site Scripting（跨站腳本攻擊）簡稱 XSS，是一種代碼注入攻擊。攻擊者通過在目标網站上注入惡意腳本，使之在使用者的浏覽器上運作。利用這些惡意腳本，攻擊者可擷取使用者的敏感資訊如 Cookie、SessionID 等，進而危害資料安全。

根據攻擊的來源，XSS 攻擊可分為存儲型、反射型和 DOM 型三種

1.1 存儲型攻擊

存儲型攻擊常發生在微網誌論壇等使用者發帖、送出文章評論等地方。

1.将惡意代碼送出到資料庫

2.資料庫将其儲存

3.他使用者檢視文章或者評論

4.服務端傳回惡意代碼并被拼接到用戶端頁面

5.惡意代碼可能通過自執行或者使用者點選執行來彈出廣告或者擷取使用者的cookie等個人隐私并上報到攻擊者資料庫

1.2 反射型攻擊

反射型攻擊主要發生在一些帶有誘導性的連結的按鈕郵件等。

1.攻擊者在一些連結的參數中加入惡意代碼并誘導使用者點選

2.使用者通過點選将請求參數傳入服務端

3.服務端擷取參數并拼接傳回給用戶端

4.用戶端執行惡意代碼冒充使用者進行權限操作或者盜取使用者的cookie等個人隐私并上報攻擊者資料庫

1.3 DOM型攻擊

1.攻擊者構造出特殊的 URL，其中包含惡意代碼。

2.使用者打開帶有惡意代碼的 URL。

3.使用者浏覽器接收到響應後解析執行，前端 JavaScript 取出 URL 中的惡意代碼并執行。

4.惡意代碼竊取使用者資料并發送到攻擊者的網站，或者冒充使用者的行為，調用目标網站接口執行攻擊者指定的操作。

DOM型和反射性都是通過誘導使用者點選連結執行，并且都是臨時型的，但是反射型屬于服務端安全漏洞而DOM型屬于用戶端安全漏洞。

2.如何防範xss攻擊

• 用戶端對使用者輸入的内容進行安全符轉義，服務端對上交内容進行安全轉義
• 服務端渲染開啟模闆引擎自帶的 HTML 轉義功能。
• 避免内聯事件，盡量不要使用 onLoad="onload('{{data}}')"、onClick="go('{{action}}')" 這種拼接内聯事件的寫法。在 JavaScript 中通過 .addEventlistener() 事件綁定會更安全。
• 避免拼接 HTML，前端采用拼接 HTML 的方法比較危險，如果架構允許，使用 createElement、setAttribute 之類的方法實作。或者采用比較成熟的渲染架構，如 Vue/React 等。
• 時刻保持警惕在插入位置為 DOM 屬性、連結等位置時，要打起精神，嚴加防範。
• 通過 CSP、輸入長度配置、接口安全措施等方法，增加攻擊的難度，降低攻擊的後果。
• 主動檢測和發現，可使用 XSS 攻擊字元串和自動掃描工具尋找潛在的 XSS 漏洞。
• 盡量避免三方跨域送出内容到服務端
• HTTP-only Cookie: 禁止 JavaScript 讀取某些敏感 Cookie，攻擊者完成 XSS 注入後也無法竊取此 Cookie。

驗證碼：防止腳本冒充使用者送出危險操作。

CSRF攻擊

CSRF（Cross-site request forgery）跨站請求僞造：攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站發送跨站請求。利用受害者在被攻擊網站已經擷取的注冊憑證，繞過背景的使用者驗證，達到冒充使用者對被攻擊的網站執行某項操作的目的。

1.1 主動型攻擊

1.受害者通路a.com并在自己浏覽器留下a.com的登入态

2.攻擊者誘導受害者通路三方網站b.com

3.三方網站b.com植有通路a.com接口的惡意代碼（删除/增加/修改等）

4.受害者點選b.com時候，b.com帶着a.com的登陸憑證冒充受害使用者執行對a.com的惡意操作

1.2 被動型攻擊

1.攻擊者在a.com釋出帶有惡意連結的文章或者評論（送出對a.com帶有增删改的誘導型img/form/a标簽）

2.當其他擁有登入态的受害者點選該評論的惡意連結冒用受害者登入憑證發起攻擊

CSRF主要是冒用受害者登入憑證發起惡意的增删改并不會竊取受害者隐私資訊

2.如何預防CSRF攻擊

1. 禁止三方網站擷取cookie,比如設定Chrome的SameSite屬性

弊端：SameSite試用階段，相容性不是很理想

1. 服務端通過Referer Header 和 Origin Header來進行同源驗證

弊端1：攻擊者可以部分修改或者隐藏referer

弊端2: 某些浏覽器或者操作會丢失origin頭部，比如302重定向

弊端3：HTTPS頁面跳轉到HTTP頁面，所有浏覽器Referer都丢失。

弊端4：對于被動性攻擊并不能識别

其他： 某些低版本浏覽器對origin和referer并不是很穩定，各種意想不到的結果，極其不穩定

3. 利用token來鑒别，三方跨站請求并不能擷取到頭部的token，本站的接口在請求前都會在請求頭增加token用于身份鑒權，三方請求并不會攜帶token

弊端1：token鑒權對服務端壓力較大，許專門開辟伺服器用于token鑒權，耗費伺服器成本并且增加請求時間

弊端2：對于頁面ajax,fetch等異步請求外的其他請求如form送出，a連結等需要去挨個加token，不能形成統一的token增加入口，存在部分疏漏

相對而言token鑒權算是比較好的一種防護措施

4. 利用雙重cookie來認證，在每個請求的參數都附加scrfCookie='随機數'防禦參數，并在cookie中混入該防禦參數值，服務端将請求頭部的cookie中防禦cookie參數和請求參數所帶的該參數進行比對

弊端： 前後分離的代碼，後端接口和前端可能不同源，比如前端www.xx.com,後端接口為api.xx.com,前端要拿到後端接口域下的cookie必須将cookie都放在xx.com下面才能保證所有子域都可以拿到，這樣反而增加xss攻擊風險得不償失

DOS攻擊

DOS攻擊通過在網站的各個環節進行攻擊，使得整個流程跑不起來，以達到癱瘓服務為目的。最常見的就是發送大量請求導緻伺服器過載當機

1. 防範措施

• 擴容伺服器【有錢公司玩的】
• 進行實時監控，封禁某些惡意密集型請求IP段
• 增加接口驗證，對于某些敏感接口，進行單個IP通路次數限制
• 進行靜态資源緩存，隔離源檔案的通路，比如CDN加速

頁面劫持

攻擊者通過請求的資料傳輸過程進行資料修改，或者對網站域名進行泛域名解析以重定向網站，在網站中注入廣告等

1.1 跳轉型劫持，通過泛域名解析等将使用者通路的頁面打到其他網站，以進行惡意競争，或者打到一些釣魚網站進行使用者個人利益和其他網站利益名譽侵害

1.2 注入型劫持，對于網站的請求資源進行攔截修改，加入惡意代碼或者廣告等

1. 如何預防網絡劫持

• 最有效且暴力的直接換成HTTPS，建立安全通道
• 進行漏洞監控，根據實際情況做出調整

【雲栖号線上課堂】每天都有産品技術專家分享！

課程位址：

https://yqh.aliyun.com/zhibo

立即加入社群，與專家面對面，及時了解課程最新動态！

【雲栖号線上課堂 社群】

https://c.tb.cn/F3.Z8gvnK

原文釋出時間：2020-04-03

本文作者：吾乃Jiraiya

本文來自：“掘金”，了解相關資訊可以關注“

掘金

”