????????????此賬號為華為云開發(fā)者社區(qū)官方運營賬號，提供全面深入的云計算前景分析、豐富的技術(shù)干貨、程序樣例，分享華為云前沿資訊動態(tài)

本文分享自華為云社區(qū)《Web安全和瀏覽器跨域訪問》，原文作者：kg-follower 。

今天說一說和前端相關(guān)的 Web 安全問題和開發(fā)過程中經(jīng)常遇到的跨域問題。

1．Web 安全

1.1 XSS

基本原理

XSS(Cross-Site Scripting)，跨站腳本攻擊通過在用戶的瀏覽器內(nèi)運行非法的 HTML 標(biāo)簽或 JavaScript 進(jìn)行的一種攻擊。

攻擊手段

攻擊者往 Web 頁面里插入惡意網(wǎng)頁腳本代碼，當(dāng)用戶瀏覽該頁面時，嵌入 Web 頁面里面的腳本代碼會被執(zhí)行，從而達(dá)到攻擊者盜取用戶信息或其他侵犯用戶安全隱私的目的。

XSS 攻擊分類

反射型 xss 攻擊。通過給被攻擊者發(fā)送帶有惡意腳本的 URL 或?qū)⒉豢尚艃?nèi)容插入頁面，當(dāng) URL 地址被打開或頁面被執(zhí)行時，瀏覽器解析、執(zhí)行惡意腳本。

反射型 xss 的攻擊步驟：1. 攻擊者構(gòu)造出特殊的 URL 或特殊數(shù)據(jù)；2. 用戶打開帶有惡意代碼的 URL 時，Web 服務(wù)器將惡意代碼從 URL 中取出，拼接在 HTML 中返回給瀏覽器；3. 用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，混在其中的惡意代碼也被執(zhí)行；4. 惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。

防御：1.Web 頁面渲染的所有內(nèi)容或數(shù)據(jù)都必須來自服務(wù)端；2. 客戶端對用戶輸入的內(nèi)容進(jìn)行安全符轉(zhuǎn)義，服務(wù)端對上交內(nèi)容進(jìn)行安全轉(zhuǎn)義；3.避免拼接 html。

存儲型 xss。惡意腳本被存儲在目標(biāo)服務(wù)器上。當(dāng)瀏覽器請求數(shù)據(jù)時，腳本從服務(wù)器傳回瀏覽器去執(zhí)行。

存儲型 xss 的攻擊步驟：1. 攻擊者將惡意代碼提交到目標(biāo)網(wǎng)站的數(shù)據(jù)庫中；2.用戶瀏覽到目標(biāo)網(wǎng)站時，前端頁面獲得數(shù)據(jù)庫中讀出的惡意腳本時將其渲染執(zhí)行。

防御：防范存儲型 XSS 攻擊，需要我們增加字符串的過濾：前端輸入時過濾；服務(wù)端增加過濾；前端輸出時過濾。

通常有三種方式防御 XSS 攻擊：1. ContentSecurity Policy（CSP）。CSP 本質(zhì)上就是建立白名單，開發(fā)者明確告訴瀏覽器哪些外部資源可以加載和執(zhí)行。我們只需要配置規(guī)則，如何攔截是由瀏覽器自己實現(xiàn)的。我們可以通過這種方式來盡量減少 XSS 攻擊。通?？梢酝ㄟ^兩種方式開啟，例如只允許加載相同域下的資源：

設(shè)置 HTTP Header 中的 CSP（Content-Security-Policy: default-src 'self'）

設(shè)置 meta 標(biāo)簽的方式（<meta http-equiv="Content-Security-Policy"content="form-action 'self';">）

轉(zhuǎn)義字符

用戶的輸入永遠(yuǎn)不可信任的，最普遍的做法就是轉(zhuǎn)義輸入輸出的內(nèi)容，對于引號、尖括號、斜杠進(jìn)行轉(zhuǎn)義：

function escape(str) {
  str=str.replace(/&/g, '&')
  str=str.replace(/</g, '<')
  str=str.replace(/>/g, '>')
  str=str.replace(/"/g, '&quto;')
  str=str.replace(/'/g, ''')
  str=str.replace(/`/g, '`')
  str=str.replace(/\//g, '/')
  return str
}

但是對于顯示富文本來說，顯然不能通過上面的辦法來轉(zhuǎn)義所有字符，因為這樣會把需要的格式也過濾掉。對于這種情況，通常采用白名單過濾的辦法：

const xss=require('xss')
let html=xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>')
console.log(html)
<h1>XSS Demo</h1><script>alert("xss");</script>

經(jīng)過白名單過濾，dom 中包含的<script>標(biāo)簽將不會被執(zhí)行。

HTTP-only Cookie

禁止 JavaScript 讀取某些敏感 cookie，使得 cookie 只有 http 能夠訪問。

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 攻擊類型

主動型攻擊。用戶訪問網(wǎng)站 A 并在瀏覽器保存 A 的登錄狀態(tài)（cookie 等信息），攻擊者誘導(dǎo)受害者訪問網(wǎng)站 B，網(wǎng)站 B 含有訪問 A 接口的惡意代碼，受害者訪問 B 時帶著 A 的登錄狀態(tài)，攻擊者便可以冒充用戶執(zhí)行對 A 的惡意操作。

被動型攻擊。攻擊者在網(wǎng)站 A 發(fā)布帶有惡意鏈接的評論或內(nèi)容（提交對 A 帶有增刪改的誘導(dǎo)型標(biāo)簽），當(dāng)其他擁有登錄狀態(tài)的受害者點擊評論的惡意鏈接時，就會冒用受害者登錄憑證發(fā)起攻擊。

CSRF 攻擊防范

驗證 HTTP Referer 字段。在 HTTP 頭中有 Referer 字段，他記錄該 HTTP 請求的來源地址，如果跳轉(zhuǎn)的網(wǎng)站與來源地址相符，那就是合法的，如果不符則可能是 csrf 攻擊，拒絕該請求。

SameSite。可以對 Cookie 設(shè)置 SameSite 屬性。該屬性表示 Cookie 不隨著跨域請求發(fā)送，可以很大程度減少 CSRF 的攻擊。

請求中加入 token。服務(wù)端給用戶生成一個 token，加密后傳遞給用戶，用戶在提交請求時，需要攜帶這個 token，服務(wù)端發(fā)現(xiàn) token 不存在或者 token 校驗不成功，那么就拒絕該請求。

1.3 流量劫持

DNS 劫持

DNS 劫持就是通過劫持了 DNS 服務(wù)器，通過某些手段來取得某個域名的解析控制權(quán)，進(jìn)而修改此域名的解析結(jié)果，導(dǎo)致對該域名的訪問由原 IP 地址轉(zhuǎn)入到修改后的 IP，其結(jié)果就是對特定的網(wǎng)站不能訪問或訪問的是假網(wǎng)址。

防御：使用 https 校驗通信雙方身份和數(shù)據(jù)完整性。

點擊劫持

攻擊者構(gòu)建了一個非常有吸引力的網(wǎng)頁，將被攻擊的頁面放置在當(dāng)前頁面的 iframe 中，使用樣式將 iframe 疊加到非常有吸引力內(nèi)容的上方，將 iframe 設(shè)置為 100%透明，其實就是通過覆蓋不可見的頁面，誘導(dǎo)用戶點擊而造成的攻擊行為。

防御措施。1. X-FRAME-OPTIONS 設(shè)置允許 iframe 加載的域 2. 限制 iframe 頁面中的 JavaScript 腳本執(zhí)行。

無論是 xss、csrf 還是點擊劫持，上面討論的這幾種攻擊屬于前端攻擊，原因大多是開發(fā)者的腳本或模板代碼存在不安全的隱患或是沒有考慮網(wǎng)絡(luò)傳輸安全問題。下面簡單說一說惡意攻擊利用網(wǎng)站后臺漏洞發(fā)起的攻擊。

1.4 SQL 注入

SQL 注入漏洞存在的原因，就是拼接 SQL 參數(shù)。也就是將用于輸入的查詢參數(shù)，直接拼接在 SQL 語句中，惡意攻擊者可以構(gòu)造特殊的 sql 語句繞過安全驗證。

SQL 注入條件：1.攻擊者可以控制輸入的數(shù)據(jù)；2.服務(wù)器要執(zhí)行的代碼拼接了被控制的數(shù)據(jù)。

SQL 注入防御。1. 嚴(yán)格限制 Web 應(yīng)用的數(shù)據(jù)庫的操作權(quán)限；2. 對進(jìn)入數(shù)據(jù)庫的特殊字符（’，”，，<，>，&，*，; 等）進(jìn)行轉(zhuǎn)義處理，或編碼轉(zhuǎn)換，類似防御 xss 攻擊時對輸入轉(zhuǎn)義；3. 所有的查詢語句建議使用數(shù)據(jù)庫提供的參數(shù)化查詢接口，如使用占位參數(shù)或?qū)ο箨P(guān)系映射 ORM。

1.5 DDOS 攻擊

DOS 攻擊通過在網(wǎng)站的各個環(huán)節(jié)進(jìn)行攻擊，使得整個流程跑不起來，以達(dá)到癱瘓服務(wù)為目的。最常見的就是發(fā)送大量請求導(dǎo)致服務(wù)器過載宕機。DDOS 攻擊的原理就是利用分布式的客戶端，向目標(biāo)發(fā)起大量看上去合法的請求，消耗/占用大量資源，從而達(dá)到拒絕服務(wù)的目的。

攻擊方式：1.端口掃描；2.ping 洪水；3.SYN 洪水；4.FTP 跳轉(zhuǎn)攻擊；

DDOS 防范。1.在服務(wù)器上刪除未使用的服務(wù)，關(guān)閉未使用的端口。2. 進(jìn)行實時監(jiān)控，封禁某些惡意密集型請求 IP 段；3. 進(jìn)行靜態(tài)資源緩存，隔離源文件的訪問，比如 CDN 加速；4. 隱藏服務(wù)器的真實 IP 地址

2. 跨域和同源策略

同源策略是一個重要的安全策略，它用于限制一個源的文檔或者它加載的腳本如何能與另一個源的資源進(jìn)行交互。它能幫助阻隔惡意文檔，減少可能被攻擊的媒介。所謂同源是指“協(xié)議+域名+端口”三者均相同。

同源策略限制了客戶端 js 代碼的以下行為：

1.Cookie、LocalStorage 和 IndexDB 無法讀取；

2.DOM 節(jié)點。來自一個源的 js 只能讀寫自己源的 DOM 樹不能讀取其他源的 DOM 樹。如果兩個網(wǎng)頁不同源，就無法拿到對方的 DOM。典型的例子是 iframe 窗口和 window.open 方法打開的窗口，它們與父窗口無法通信。

網(wǎng)站不開啟同源策略，釣魚網(wǎng)站便可以使用 iframe 標(biāo)簽加載中國銀行登錄界面，執(zhí)行腳本進(jìn)而拿到用戶名密碼。

當(dāng)設(shè)置了同源策略，父子窗口執(zhí)行獲取對方 DOM 時會報錯。

3.AJAX 請求限制

跨域并不是請求發(fā)不出去，請求能發(fā)出去，服務(wù)端能收到請求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了。

除了架設(shè)服務(wù)器代理，還有以下幾種方法規(guī)避同源限制：JSONP，WebSocket，CORS，本文詳細(xì)討論下后兩種方法的實現(xiàn)。

WebSocket。WebSocket 是一種通信協(xié)議，使用 ws://（非加密）和 wss://（加密）作為協(xié)議前綴。該協(xié)議不實行同源政策，只要服務(wù)器支持，就可以通過它進(jìn)行跨源通信。WebSocket 是一種雙向通信協(xié)議，在建立連接之后，WebSocket 的 server 與 client 都能主動向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)。Websocket 請求頭信息包含一個 origin 字段，服務(wù)器根據(jù)這個字段判斷是否允許本次通信。

CORS。CORS 跨域資源共享是 W3C 標(biāo)準(zhǔn)，是解決跨域 Ajax 請求的最常見解決方法。整個 CORS 通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS 通信與同源的 AJAX 通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn) AJAX 請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

瀏覽器將 CORS 請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。只要同時滿足以下兩大條件，就屬于簡單請求：

（1) 請求方法是以下三種方法之一：HEAD、GET、POST

（2）HTTP 的頭信息不超出以下幾種字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三個值 application/x-www-form-urlencoded、multipart/form-data、text/plain

對于簡單請求，瀏覽器直接發(fā)出 CORS 請求。具體來說，就是在頭信息之中，增加一個 Origin 字段，該字段用來說明，本次請求來自哪個源。服務(wù)器根據(jù)這個值，決定是否同意這次請求。如果 Origin 指定的源，不在許可范圍內(nèi)，服務(wù)器會返回一個正常的 HTTP 回應(yīng)。若該響應(yīng)的頭信息沒有包含 Access-Control-Allow-Origin 字段，就拋出一個錯誤，被 XMLHttpRequest 的 onerror 回調(diào)函數(shù)捕獲。若 Origin 指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，會多出幾個頭信息字段。其中 Access-Control-Allow-Origin 字段是必須的。它的值要么是請求時 Origin 字段的值，要么是一個*，表示接受任意域名的請求。

對于非簡單請求，在正式通信之前，會增加一次 HTTP 查詢請求，稱為"預(yù)檢"請求（preflight）。瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些 HTTP 方法和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會發(fā)出正式的 XMLHttpRequest 請求，否則就報錯。

"預(yù)檢"請求用的請求方法是 OPTIONS，表示這個請求是用來詢問的。頭信息里面，關(guān)鍵字段是 Origin，表示請求來自哪個源。

除了 Origin 字段，"預(yù)檢"請求的頭信息包括兩個特殊字段。

（1）Access-Control-Request-Method。該字段是必須的，用來列出瀏覽器的 CORS 請求會用到哪些 HTTP 方法

（2）Access-Control-Request-Headers。該字段是一個逗號分隔的字符串，指定瀏覽器 CORS 請求會額外發(fā)送的頭信息字段。

預(yù)檢請求的回應(yīng)。

服務(wù)器收到"預(yù)檢"請求以后，檢查了 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 字段以后，確認(rèn)允許跨源請求，就可以做出回應(yīng)?；貞?yīng)最關(guān)鍵的是 Access-Control-Allow-Origin 字段，表示允許該源的請求，若沒有任何 CORS 相關(guān)頭信息字段則說明服務(wù)器否認(rèn)該請求。若服務(wù)器允許，則 Access-Control-Allow-Methods 字段是必須的，它的值是一個逗號分隔的字符串，表明服務(wù)器支持的方法。如果預(yù)檢請求包含 Access-Control-Request-Headers 字段，則返回體中該字段也是必須的，它也是一個逗號分隔的字符串，表明服務(wù)器支持的所有頭信息字段，不限于瀏覽器在"預(yù)檢"中請求的字段。預(yù)檢請求得到允許回應(yīng)后，瀏覽器便發(fā)送正常 CORS 請求。

最近在開發(fā)一個前端 poc 項目時遇到了跨域資源訪問被限制的問題，在本地啟動 angular 項目，其他人可以通過 ip 訪問到靜態(tài)資源，發(fā)送 ajax 請求時被限制。于是想通過配置代理的方式解決這個跨域問題：在和 package.json 同級的目錄中新建 proxy.conf.json 文件，target 字段是后端服務(wù)真實的 ip，changeOrigin 字段設(shè)置為 true，關(guān)閉 secure 字段。

{
    "/": {
      "target": "http://10.173.99.224:8081/",
      "changeOrigin": true,
      "secure": false,
      "loglevel": "debug"
    }
}

?在 package.json 的啟動命令中添加

 "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

--host0.0.0.0 表示監(jiān)聽所有來源的主機。解決

點擊關(guān)注，第一時間了解華為云新鮮技術(shù)~

說明

最近在項目上有個移動端（uni-app）的需求，就是要在移動端APP上的vue頁面中通過web-view組件來調(diào)用html頁面，并且要實現(xiàn)在html頁面中可以點擊一個元素來調(diào)用vue頁面中uni的API（掃碼接口），同時也可以在vue頁面中也可以調(diào)用html頁面中的js函數(shù)并進(jìn)行傳參。

使用環(huán)境

1. HBuilderX版本：2.8.11.20200907

2. V3編譯器

html頁面調(diào)用vue頁面中uni的API

引用依賴的文件

在 web-view 加載的 HTML 中調(diào)用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

注意：這些 JS 文件是在 web-view 加載的那個 HTML 文件中引用的，而不是 uni-app 項目中的文件。

監(jiān)聽 web-view 的 message 事件

監(jiān)聽 web-view 組件的 message 事件，然后在事件回調(diào)的 event.detail.data 中接收傳遞過來的消息。

<template>  

    <view>  

        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  

    </view>  

</template>  

<script>  

    export default {  

        methods: {  

            handleMessage(evt) {  

                console.log('接收到的消息：' + JSON.stringify(evt.detail.data));  

            }  

        }  

    }  

</script>

調(diào)用的時機

在引入上面的依賴文件后，需要在HTML中監(jiān)聽UniAppJSBridgeReady，事件觸發(fā)后，

才能安全調(diào)用uni的API。

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

<script>

    document.querySelector('.btn-list').addEventListener('click', function(evt) {  

        var target=evt.target;  

        if (target.tagName==='BUTTON') {  

            var action=target.getAttribute('data-action');  

            if(action==='navigateTo') {  

				uni.postMessage({  

					data: {  

						action: 'postMessage'  

					}  

				});   

            }  

        }  

    }); 

</script>

上面代碼的意思就是在html頁面中點擊按鈕列表中的某個按鈕，

觸發(fā)了uni.postMessage接口，進(jìn)而調(diào)用了vue頁面methods中的handleMessage方法，

并將參數(shù)data傳給了vue頁面。

在vue頁面中調(diào)用html頁面的js函數(shù)

示例代碼：

var currentWebview=this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");

其中的htmljsfuc就是要在html頁面中定義的js函數(shù)。

完整代碼示例：

午接到博客訪客的反饋，表示博客中的鏈接在原窗口打開的話，網(wǎng)站的體驗非常的不好，而自己又懶的一個個去修改博客網(wǎng)頁中的鏈接打開方式，就加了一個強制頁面所有鏈接新窗口打開的代碼，一招解決問題。

html頁面強制所有鏈接新窗口打開的代碼

<base target="_blank">

將此代碼放到，網(wǎng)頁中的 <head>標(biāo)簽之內(nèi)即可實現(xiàn)，當(dāng)前頁面所有A鏈接新窗口打開

html <base> 標(biāo)簽

<base>：標(biāo)簽當(dāng)前頁面上的所有的相對鏈接規(guī)定默認(rèn) URL 或 默認(rèn)目標(biāo)。

語法：

<base href="網(wǎng)址" target="打開的方式">

屬性;

herf：規(guī)定的默認(rèn)鏈接

target：鏈接打開的方式，參數(shù)有 _blank，_self 等，與A標(biāo)簽的 target 屬性相同

例：html頁面所有鏈接強制新窗口打開

<base target="_blank">

例：html頁面所有鏈接強制在當(dāng)前窗口打開

<base target="_self">

例：設(shè)置默認(rèn)的URL

<!DOCTYPE html>
<html lang="en">
<head>
 <base href="https://www.feiniaomy.com" target="_blank">
 <title>Document</title>
</head>
<body>
 <a href="/post/1.html">我是相對鏈接，我可以打開 https://www.feiniaomy.com/post/1.html</a>
 <a href="http://www.baidu.com">我是絕對鏈接,我可以打開 http://www.baidu.com</a>
</body>
</html>

<base> 標(biāo)簽使用注意事項

1、一個頁面中，<base> 標(biāo)簽只能出現(xiàn)一次

2、<base> 標(biāo)簽只能在 <head></head>標(biāo)簽中出現(xiàn)

3、<base> 屬于單標(biāo)簽，沒有結(jié)束標(biāo)簽，類似 <img> 標(biāo)簽