Web前端安全必須要了解的一些內(nèi)容

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

XSS攻擊

什么是XSS?

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

XSS攻擊有3個(gè)關(guān)鍵點(diǎn)：

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

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

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

XSS攻擊 —— 危害

• 竊取用戶個(gè)人信息

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

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

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

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

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

• ……

XSS攻擊 —— 分類

• 反射型XSS

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

• 存儲(chǔ)型XSS

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

XSS攻擊 —— 攻擊形式

• 常見注入代碼

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

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

• 常見注入形式

XSS攻擊 —— 防御

• CSP

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

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

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

• 字符轉(zhuǎn)義

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

• HttpOnly Cookie

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

• ……

CSRF

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

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

CSRF攻擊 —— code

CSRF攻擊 —— 防御

• Referer檢測(cè)

例如圖片防盜鏈，檢測(cè)請(qǐng)求來源是否合法

• cookie SameSite

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

• 增加驗(yàn)證碼

強(qiáng)制驗(yàn)證碼校驗(yàn)后才完成請(qǐng)求

• token

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

界面操作劫持 —— 概述

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

• 點(diǎn)擊劫持

• 拖放劫持

• 觸屏劫持

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

界面操作劫持 —— 防御

• x-Frame-Options

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

• js手動(dòng)防御

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)險(xiǎn)

• 未知的第三方資源包

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

• 偽造鏈接

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

• 本地?cái)?shù)據(jù)泄漏

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

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

關(guān)于我們：

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

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