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手動防護

function getParentUrl() {
    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

• 本地數據泄漏

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

• 靜態資源完整性校驗

一般出如今cdn被劫持或資源被污染。 防範可自行了解 Subresource Integrity