本文主要討論以下幾種攻擊方式: XSS攻擊、CSRF攻擊以及點(diǎn)擊劫持样傍。
- 前端有哪些攻擊方式调煎？
- 什么是XSS攻擊镜遣？XSS攻擊有幾種類型？如果防范XSS攻擊士袄？
- 什么是CSRF攻擊悲关？如何防范CSRF攻擊
- 如何檢測網(wǎng)站是否安全谎僻？
1.XSS攻擊
XSS(Cross-Site Scripting，跨站腳本攻擊)是一種
代碼注入攻擊寓辱。攻擊者在目標(biāo)網(wǎng)站上注入惡意代碼艘绍，當(dāng)被攻擊者登陸網(wǎng)站時就會執(zhí)行這些惡意代碼，這些腳本可以讀取cookie秫筏，session tokens诱鞠，或者其它敏感的網(wǎng)站信息，對用戶進(jìn)行釣魚欺詐这敬，甚至發(fā)起蠕蟲攻擊等航夺。
XSS 的本質(zhì)是：
惡意代碼未經(jīng)過濾，與網(wǎng)站正常的代碼混在一起崔涂；瀏覽器無法分辨哪些腳本是可信的阳掐，導(dǎo)致惡意腳本被執(zhí)行。由于直接在用戶的終端執(zhí)行堪伍，惡意代碼能夠直接獲取用戶的信息锚烦，利用這些信息冒充用戶向網(wǎng)站發(fā)起攻擊者定義的請求觅闽。
XSS分類:
根據(jù)攻擊的來源帝雇，XSS攻擊可以分為存儲型(持久性)、反射型(非持久型)和DOM型三種蛉拙。下面我們來詳細(xì)了解一下這三種XSS攻擊：
1.1：反射型XSS
當(dāng)用戶
點(diǎn)擊一個惡意鏈接尸闸，或者提交一個表單，或者進(jìn)入一個惡意網(wǎng)站時孕锄，注入腳本進(jìn)入被攻擊者的網(wǎng)站吮廉。Web服務(wù)器將注入腳本，比如一個錯誤信息畸肆，搜索結(jié)果等宦芦，未進(jìn)行過濾直接返回到用戶的瀏覽器上。
反射型 XSS 的攻擊步驟：
1.攻擊者構(gòu)造出
特殊的 URL轴脐，其中包含惡意代碼调卑。
2.用戶打開帶有惡意代碼的 URL 時，網(wǎng)站服務(wù)端將惡意代碼從 URL 中取出大咱，拼接在 HTML 中返回給瀏覽器恬涧。
3.用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，混在其中的惡意代碼也被執(zhí)行碴巾。
4.惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站溯捆，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作厦瓢。
反射型 XSS 漏洞常見于通過 URL 傳遞參數(shù)的功能提揍，如網(wǎng)站搜索啤月、跳轉(zhuǎn)等。由于需要用戶主動打開惡意的 URL 才能生效劳跃，攻擊者往往會結(jié)合多種手段誘導(dǎo)用戶點(diǎn)擊顽冶。
POST 的內(nèi)容也可以觸發(fā)反射型 XSS，只不過其觸發(fā)條件比較苛刻（需要構(gòu)造表單提交頁面售碳，并引導(dǎo)用戶點(diǎn)擊）强重，所以非常少見。
注意Chrome 和 Safari 能夠檢測到 url 上的xss攻擊贸人，將網(wǎng)頁攔截掉间景，但是其它瀏覽器不行，如Firefox
如果不希望被前端拿到cookie艺智，后端可以設(shè)置
httpOnly(不過這不是XSS攻擊的解決方案倘要，只能降低受損范圍)
如何防范反射型XSS攻擊
對字符串進(jìn)行編碼。
對url的查詢參數(shù)進(jìn)行轉(zhuǎn)義后再輸出到頁面
app.get('/welcome', function(req, res) {
//對查詢參數(shù)進(jìn)行編碼十拣，避免反射型 XSS攻擊
res.send(`${encodeURIComponent(req.query.type)}`);
});
1.2 DOM 型 XSS
DOM 型 XSS 攻擊封拧，實際上就是前端JavaScript代碼不夠嚴(yán)謹(jǐn)，把不可信的內(nèi)容插入到了頁面夭问。在使用 .innerHTML泽西、.outerHTML、.appendChild缰趋、document.write()等API時要特別小心捧杉，不要把不可信的數(shù)據(jù)作為 HTML 插到頁面上，盡量使用 .innerText秘血、.textContent味抖、.setAttribute()等.
DOM 型 XSS 的攻擊步驟：
1.攻擊者構(gòu)造出特殊數(shù)據(jù)，其中包含惡意代碼灰粮。
2.用戶瀏覽器執(zhí)行了惡意代碼仔涩。
3.惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為粘舟，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作熔脂。
如何防范 DOM 型 XSS 攻擊
防范 DOM 型 XSS 攻擊的核心就是對輸入內(nèi)容進(jìn)行轉(zhuǎn)義(DOM 中的內(nèi)聯(lián)事件監(jiān)聽器和鏈接跳轉(zhuǎn)都能把字符串作為代碼運(yùn)行，需要對其內(nèi)容進(jìn)行檢查)蓖乘。
1.對于url鏈接(例如圖片的src屬性)锤悄，那么直接使用 encodeURIComponent 來轉(zhuǎn)義。
2.非url嘉抒，我們可以這樣進(jìn)行編碼：
function encodeHtml(str) {
return str.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
DOM 型 XSS 攻擊中零聚，取出和執(zhí)行惡意代碼由瀏覽器端完成，屬于前端 JavaScript 自身的安全漏洞。
1.3存儲型XSS
惡意腳本永久存儲在目標(biāo)服務(wù)器上隶症。當(dāng)瀏覽器請求數(shù)據(jù)時政模，腳本從服務(wù)器傳回并執(zhí)行，影響范圍比反射型和DOM型XSS更大蚂会。存儲型XSS攻擊的原因仍然是沒有做好數(shù)據(jù)過濾：前端提交數(shù)據(jù)至服務(wù)端時淋样，沒有做好過濾；服務(wù)端在接受到數(shù)據(jù)時胁住，在存儲之前趁猴，沒有做過濾；前端從服務(wù)端請求到數(shù)據(jù)彪见，沒有過濾輸出儡司。
存儲型 XSS 的攻擊步驟：
1.攻擊者將惡意代碼提交到目標(biāo)網(wǎng)站的數(shù)據(jù)庫中。
2.用戶打開目標(biāo)網(wǎng)站時余指，網(wǎng)站服務(wù)端將惡意代碼從數(shù)據(jù)庫取出捕犬，拼接在 HTML 中返回給瀏覽器。
3.用戶瀏覽器接收到響應(yīng)后解析執(zhí)行酵镜，混在其中的惡意代碼也被執(zhí)行碉碉。
4.惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為淮韭，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作垢粮。
這種攻擊常見于帶有用戶保存數(shù)據(jù)的網(wǎng)站功能，如論壇發(fā)帖缸濒、商品評論足丢、用戶私信等粱腻。
如何防范存儲型XSS攻擊：
1.前端數(shù)據(jù)傳遞給服務(wù)器之前庇配，先轉(zhuǎn)義/過濾(防范不了抓包修改數(shù)據(jù)的情況)
2.服務(wù)器接收到數(shù)據(jù)，在存儲到數(shù)據(jù)庫之前绍些，進(jìn)行轉(zhuǎn)義/過濾
3.前端接收到服務(wù)器傳遞過來的數(shù)據(jù)捞慌，在展示到頁面前，先進(jìn)行轉(zhuǎn)義/過濾
除了謹(jǐn)慎的轉(zhuǎn)義柬批，我們還需要其他一些手段來防范XSS攻擊:
1.Content Security Policy:
在服務(wù)端使用 HTTP的Content-Security-Policy頭部來指定策略啸澡，或者在前端設(shè)置 meta 標(biāo)簽。
例如下面的配置只允許加載同域下的資源：
Content-Security-Policy: default-src 'self'
<meta http-equiv="Content-Security-Policy" content="form-action 'self';">
前端和服務(wù)端設(shè)置 CSP 的效果相同氮帐，但是meta無法使用report嗅虏。
1.4XSS 檢測
1.使用通用 XSS 攻擊字串手動檢測 XSS 漏洞
如: jaVasCript:/*-/*`/*\`/*'/*"/**/(/* */oNcliCk=alert() )//%0D%0A%0d%0a//</stYle/</titLe/</teXtarEa/</scRipt/--!>\x3csVg/<sVg/oNloAd=alert()//>\x3e
能夠檢測到存在于 HTML 屬性、HTML 文字內(nèi)容上沐、HTML 注釋皮服、跳轉(zhuǎn)鏈接、內(nèi)聯(lián) JavaScript 字符串、內(nèi)聯(lián) CSS 樣式表等多種上下文中的 XSS 漏洞龄广，也能檢測 eval()硫眯、setTimeout()、setInterval()择同、Function()两入、innerHTML、document.write() 等 DOM 型 XSS 漏洞敲才，并且能繞過一些 XSS 過濾器裹纳。
<img src=1 onerror=alert(1)>
2.CSRF
CSRF（Cross-site request forgery）跨站請求偽造：攻擊者誘導(dǎo)受害者進(jìn)入第三方網(wǎng)站，在第三方網(wǎng)站中紧武，向被攻擊網(wǎng)站發(fā)送跨站請求痊夭。利用受害者在被攻擊網(wǎng)站已經(jīng)獲取的注冊憑證，繞過后臺的用戶驗證脏里，達(dá)到冒充用戶對被攻擊的網(wǎng)站執(zhí)行某項操作的目的她我。
典型的CSRF攻擊流程：
1受害者登錄A站點(diǎn)，并保留了登錄憑證（Cookie）迫横。
2.攻擊者誘導(dǎo)受害者訪問了站點(diǎn)B番舆。
3.站點(diǎn)B向站點(diǎn)A發(fā)送了一個請求，瀏覽器會默認(rèn)攜.帶站點(diǎn)A的Cookie信息矾踱。
4.站點(diǎn)A接收到請求后恨狈，對請求進(jìn)行驗證，并確認(rèn)是受害者的憑證呛讲，誤以為是無辜的受害者發(fā)送的請求禾怠。
5.站點(diǎn)A以受害者的名義執(zhí)行了站點(diǎn)B的請求。
6.攻擊完成贝搁，攻擊者在受害者不知情的情況下吗氏，冒充受害者完成了攻擊。
一圖勝千言：
CSRF的特點(diǎn)
1.攻擊通常在第三方網(wǎng)站發(fā)起雷逆，如圖上的站點(diǎn)B弦讽，站點(diǎn)A無法防止攻擊發(fā)生。
2.攻擊利用受害者在被攻擊網(wǎng)站的登錄憑證膀哲，冒充受害者提交操作往产；并不會去獲取cookie信息(cookie有同源策略)
3.跨站請求可以用各種方式：圖片URL、超鏈接某宪、CORS仿村、Form提交等等(來源不明的鏈接，不要點(diǎn)擊)
CSRF 攻擊防御
1. 添加驗證碼(體驗不好)
驗證碼能夠防御CSRF攻擊兴喂，但是我們不可能每一次交互都需要驗證碼蔼囊，否則用戶的體驗會非常差包颁，但是我們可以在轉(zhuǎn)賬，交易等操作時压真，增加驗證碼娩嚼，確保我們的賬戶安全。
2. 判斷請求的來源：檢測Referer(并不安全滴肿，Referer可以被更改)
Referer 可以作為一種輔助手段岳悟，來判斷請求的來源是否是安全的，但是鑒于 Referer 本身是可以被修改的泼差，因為不能僅依賴于 Referer
3. 使用Token(主流)
CSRF攻擊之所以能夠成功贵少，是因為服務(wù)器誤把攻擊者發(fā)送的請求當(dāng)成了用戶自己的請求。那么我們可以要求所有的用戶請求都攜帶一個CSRF攻擊者無法獲取到的Token堆缘。服務(wù)器通過校驗請求是否攜帶正確的Token滔灶，來把正常的請求和攻擊的請求區(qū)分開。跟驗證碼類似吼肥，只是用戶無感知录平。
- 服務(wù)端給用戶生成一個token，加密后傳遞給用戶
- 用戶在提交請求時缀皱，需要攜帶這個token
- 服務(wù)端驗證token是否正確
4. Samesite Cookie屬性
為了從源頭上解決這個問題斗这，Google起草了一份草案來改進(jìn)HTTP協(xié)議，為Set-Cookie響應(yīng)頭新增Samesite屬性啤斗，它用來標(biāo)明這個 Cookie是個“同站 Cookie”表箭，同站Cookie只能作為第一方Cookie，不能作為第三方Cookie钮莲，Samesite 有兩個屬性值免钻，分別是 Strict 和 Lax。
部署簡單崔拥，并能有效防御CSRF攻擊极舔，但是存在兼容性問題。
Samesite=Strict
Samesite=Strict 被稱為是嚴(yán)格模式,表明這個 Cookie 在任何情況都不可能作為第三方的 Cookie握童，有能力阻止所有CSRF攻擊姆怪。此時，我們在B站點(diǎn)下發(fā)起對A站點(diǎn)的任何請求澡绩，A站點(diǎn)的 Cookie 都不會包含在cookie請求頭中。
**Samesite=Lax**
`Samesite=Lax` 被稱為是寬松模式俺附，與 Strict 相比肥卡，放寬了限制，允許發(fā)送安全 HTTP 方法帶上 Cookie事镣，如 `Get` / `OPTIONS` 步鉴、`HEAD` 請求.
但是不安全 HTTP 方法，如： `POST`, `PUT`, `DELETE` 請求時，不能作為第三方鏈接的 Cookie
為了更好的防御CSRF攻擊氛琢，我們可以組合使用以上防御手段喊递。
3.點(diǎn)擊劫持
點(diǎn)擊劫持是指在一個Web頁面中隱藏了一個透明的iframe，用外層假頁面誘導(dǎo)用戶點(diǎn)擊阳似，實際上是在隱藏的frame上觸發(fā)了點(diǎn)擊事件進(jìn)行一些用戶不知情的操作骚勘。
典型點(diǎn)擊劫持攻擊流程
1.攻擊者構(gòu)建了一個非常有吸引力的網(wǎng)頁【不知道哪些內(nèi)容對你們來說有吸引力，我就不寫頁面了撮奏，偷個懶】
2.將被攻擊的頁面放置在當(dāng)前頁面的 iframe 中
3.使用樣式將 iframe 疊加到非常有吸引力內(nèi)容的上方
4.將iframe設(shè)置為100%透明
5.你被誘導(dǎo)點(diǎn)擊了網(wǎng)頁內(nèi)容俏讹，你以為你點(diǎn)擊的是***，而實際上畜吊，你成功被攻擊了泽疆。
點(diǎn)擊劫持防御
1. frame busting
Frame busting
if ( top.location != window.location ){
top.location = window.location
}
需要注意的是: HTML5中iframe的 sandbox 屬性、IE中iframe的security 屬性等玲献，都可以限制iframe頁面中的JavaScript腳本執(zhí)行殉疼，從而可以使得 frame busting 失效。
2. X-Frame-Options
X-FRAME-OPTIONS是微軟提出的一個http頭捌年，專門用來防御利用iframe嵌套的點(diǎn)擊劫持攻擊株依。并且在IE8、Firefox3.6延窜、Chrome4以上的版本均能很好的支持恋腕。
可以設(shè)置為以下值:
DENY: 拒絕任何域加載
SAMEORIGIN: 允許同源域下加載
ALLOW-FROM: 可以定義允許frame加載的頁面地址
轉(zhuǎn)載篇
作者：劉小夕
鏈接：https://juejin.im/post/5cd6ad7a51882568d3670a8e
來源：掘金
