Web前端安全必須要了解的一些內容

隨著web應用的范圍越來越廣，安全問題也是日益突出，從最初的服務端安全問題到現在的web前端安全，各種攻擊手段層出不窮，作為前端程序猿，適當的掌握一些安全知識也逐漸成了必備技能。

XSS攻擊

什么是XSS?

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

XSS攻擊有3個關鍵點：

• 目標網站的目標用戶；

• 發生在瀏覽器；

• 加載執行非目標網站腳本代碼；

XSS攻擊 —— 危害

• 竊取用戶個人信息

由于在當前頁面執行，故可享有開發者所能擁有的能力，比如獲取用戶cookie

• 顯示偽造內容

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

• XSS病毒，如惡意篡改數據

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

• ……

XSS攻擊 —— 分類

• 反射型XSS

這種類型的XSS代碼出現在url中，作為用戶輸入提交到服務端，服務端解析后將當前代碼返回到瀏覽器，瀏覽器解析執行。

• 存儲型XSS

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

XSS攻擊 —— 攻擊形式

• 常見注入代碼

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

atob, btoa為window內置base64編碼解碼方法，我們可以通過他們實現簡單的數據加密。

• 常見注入形式

XSS攻擊 —— 防御

• CSP

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

設置 HTTP Header 中的 Content-Security-Policy

設置 meta 標簽的方式

• 字符轉義

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

• HttpOnly Cookie

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

• ……

CSRF

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

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

CSRF攻擊 —— code

CSRF攻擊 —— 防御

• Referer檢測

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

• cookie SameSite

cookie設置SameSite屬性，可保證cookie不隨著第三方網站發送，存在兼容性問題

• 增加驗證碼

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

• token

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

界面操作劫持 —— 概述

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

• 點擊劫持

• 拖放劫持

• 觸屏劫持

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

界面操作劫持 —— 防御

• x-Frame-Options

x-Frame-Options參數包括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}

前端安全 —— 其他風險

• 未知的第三方資源包

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

• 偽造鏈接

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

• 本地數據泄漏

離線應用會導致很多信息存儲在本地，就給攻擊者有了可趁之機。

• 靜態資源完整性校驗

關于我們：

藍暢信息技術有限公司成功為多家世界財富500強企業以及其他著名品牌提供優質服務，是您靠譜的互聯網開發供應商。

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