隨著web應(yīng)用的范圍越來越廣，安全問題也是日益突出，從最初的服務(wù)端安全問題到現(xiàn)在的web前端安全，各種攻擊手段層出不窮，作為前端程序猿，適當(dāng)?shù)恼莆找恍┌踩R也逐漸成了必備技能。

XSS攻擊

什么是XSS?

XSS，全稱Cross Site Scripting，即跨站腳本，目前主要指javascript注入，這種攻擊主要原理是往目標(biāo)網(wǎng)站注入惡意代碼，當(dāng)用戶訪問目標(biāo)網(wǎng)站時，嵌入該頁面的注入代碼就會執(zhí)行，從而達到竊取用戶個人信息等目的。原因就在于瀏覽器錯誤的將攻擊者提供的用戶輸入當(dāng)做JavaScript腳本給執(zhí)行了。攻擊者可以利用XSS漏洞來竊取包括用戶身份信息在內(nèi)的各種敏感信息、修改Web頁面以欺騙用戶，甚至控制受害者瀏覽器，或者和其他漏洞結(jié)合起來形成蠕蟲攻擊，等等。總之，關(guān)于XSS漏洞的利用，只有想不到?jīng)]有做不到。

XSS攻擊有3個關(guān)鍵點：

• 目標(biāo)網(wǎng)站的目標(biāo)用戶；

• 發(fā)生在瀏覽器；

• 加載執(zhí)行非目標(biāo)網(wǎng)站腳本代碼；

XSS攻擊 —— 危害

• 竊取用戶個人信息

由于在當(dāng)前頁面執(zhí)行，故可享有開發(fā)者所能擁有的能力，比如獲取用戶cookie

• 顯示偽造內(nèi)容

同上，注入腳本同樣可以執(zhí)行渲染dom等操作。

• XSS病毒，如惡意篡改數(shù)據(jù)

獲取到用戶cookie后，就可以利用當(dāng)前cookie發(fā)送各種請求，比如留言板，獲取管理員cookie后進行相應(yīng)的刪除等操作。

• ……

XSS攻擊 —— 分類

• 反射型XSS

這種類型的XSS代碼出現(xiàn)在url中，作為用戶輸入提交到服務(wù)端，服務(wù)端解析后將當(dāng)前代碼返回到瀏覽器，瀏覽器解析執(zhí)行。

• 存儲型XSS

這種類型的XSS代碼會被提交存儲在服務(wù)端。

XSS攻擊 —— 攻擊形式

• 常見注入代碼

    alert('xss');    eval(atob('YWxlcnQoeHNzKQ=='))

atob, btoa為window內(nèi)置base64編碼解碼方法，我們可以通過他們實現(xiàn)簡單的數(shù)據(jù)加密。

• 常見注入形式

XSS攻擊 —— 防御

• CSP

資源白名單，告訴瀏覽器哪些外部資源是可以加載執(zhí)行的。
開啟csp的方式包含 ：

設(shè)置 HTTP Header 中的 Content-Security-Policy

設(shè)置 meta 標(biāo)簽的方式

• 字符轉(zhuǎn)義

例如： str.replace(/>/g, ‘>’)，輸入校驗，輸出過濾

• HttpOnly Cookie

設(shè)置為該屬性后，該cookie就不能被js所讀取

• ……

CSRF

CSRF，全稱Cross Site Request Forgery，即跨站偽造請求，關(guān)鍵在于請求是跨站請求且請求是偽造的。主要利用用戶在目標(biāo)網(wǎng)站已登陸的情況下，以用戶的名義發(fā)送非法請求，這一切對于用戶都是不可見的。

同源策略是用來限制客戶端腳本的跨域請求行為，而通過img，script，iframe等src加載資源不在此限制之中, form可以跨域post數(shù)據(jù)

CSRF攻擊 —— code

CSRF攻擊 —— 防御

• Referer檢測

例如圖片防盜鏈，檢測請求來源是否合法

• cookie SameSite

cookie設(shè)置SameSite屬性，可保證cookie不隨著第三方網(wǎng)站發(fā)送，存在兼容性問題

• 增加驗證碼

強制驗證碼校驗后才完成請求

• token

發(fā)送請求時必須攜帶隨機生成的token，在服務(wù)端用此token與cookie中token進行校驗，二者都存在且完全相同的情況下才認(rèn)為
是合法請求。

界面操作劫持 —— 概述

界面操作劫持是一種機遇視覺欺騙的會話劫持，通過在網(wǎng)頁上覆蓋一個不可見的層（iframe，opaicty=0），使得用戶無意間操作了透明層中的內(nèi)容，從而完成操作劫持，造成信息竊取，數(shù)據(jù)篡改等攻擊。

• 點擊劫持

• 拖放劫持

• 觸屏劫持

拖放劫持主要利用html5 的拖動事件中的dataTransfer對象，包含setData，getData；頁面間拖動沒有同源策略限制，因此我們就能輕易的通過視覺欺騙誘導(dǎo)用戶拖動目標(biāo)頁面到當(dāng)前頁面，進而可以獲取頁面數(shù)據(jù)，包括token；

界面操作劫持 —— 防御

• x-Frame-Options

x-Frame-Options參數(shù)包括DENY和SAMEORIGIN,ALLOW-FROM，表示不能被嵌套和只能同源域名嵌套。這種方法存在一定兼容性

• js手動防御

functiongetParentUrl() {    let url = '';    try {        url = window.parent.location.href;    } catch (e) {        url = document.referrer;    }    return url;}let parentUrl = new URL(getParentUrl());if (parentUrl.href != self.href) {    // do something}

前端安全 —— 其他風(fēng)險

• 未知的第三方資源包

代碼開發(fā)通常會引入很多第三方包，如果第三方包有安全漏洞甚至本身有惡意代碼時就會對我們自己的網(wǎng)站整體造成安全問題。

• 偽造鏈接

如果我們程序允許url添加callback并設(shè)置了回調(diào)跳轉(zhuǎn)，就會看起來是正常的網(wǎng)址實際卻跳轉(zhuǎn)到攻擊者的惡意網(wǎng)站中，尤其是有
短鏈接的情況下，訪問者很容易被迷惑，如：
http://www.baidu.com?callback...://a.cn/kfjiefif

• 本地數(shù)據(jù)泄漏

離線應(yīng)用會導(dǎo)致很多信息存儲在本地，就給攻擊者有了可趁之機。

• 靜態(tài)資源完整性校驗

關(guān)于我們：

藍暢信息技術(shù)有限公司成功為多家世界財富500強企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū)    為您提供：H5開發(fā)，H5設(shè)計，H5外包，微信開發(fā)外包，H5商城開發(fā)，小程序商城開發(fā)，網(wǎng)站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，小程序設(shè)計、APP開發(fā)外包，UI設(shè)計，SEO優(yōu)化，視頻后期制作等優(yōu)質(zhì)服務(wù)