Spirit帶你了解如何安全引入第三方資源

本文介紹一下如何安全的引入第三方資源

首先我們來了解一下什麼是同源政策,下面的是wiki百科的定義

✨同源政策是指Web浏覽器中,允許某個網頁腳本通路另一個網頁的資料,但前提是這兩個網頁必須有相同的<code>協定号(protocol)</code>,<code>主機号(host name)</code>和<code>端口号(port)</code>,一旦兩個網站滿足上述條件,這兩個網站被認定為具有相同來源.

而同源政策主要表現在三個方面 DOM,Web資料和網絡

DOM:限制了來自不同源的JavaScript腳本對目前的DOM對象讀和寫的操作

Web資料: 限制了不同源的站點讀取目前站點的Cookie,indexDB,LocalStorage等資料

網絡:限制了通過XMLHttpRequest等方式将站點的資料發送給不同源的站點

但是如果都按同源政策來的話,便利性其實是大打折扣的,是以為了便利,Web讓出了一些安全性,推出了一系列舉措,使得我們的網站能夠引入第三方資源為使用者提供更加豐富的功能

我們先看下wiki百科的定義,友善了解

跨域資源共享:用于讓網頁的受限資源能夠被其他域名的頁面通路的一種機制.

通過該機制，頁面能夠自由地使用不同源（英語：cross-origin）的圖檔、樣式、腳本、iframes以及視訊。一些跨域的請求（特别是Ajax）常常會被同源政策（英語：Same-origin policy）所禁止的。

跨源資源共享定義了一種方式，為的是浏覽器和伺服器之間能互相确認是否足夠安全以至于能使用跨源請求（英語：cross-origin requests）。比起純粹的同源請求，這将更為自由和功能性的（functionality），但比純粹的跨源請求更為安全。

跨域資源共享是一份浏覽器技術的規範，提供了 Web 服務從不同網域傳來沙盒腳本的方法，以避開浏覽器的同源政策

通過wiki百科的定義,我們可以得到以下的3點

頁面可以通過該機制,自由的嵌入不同源的圖檔,樣式沒腳本,iframes和videos

可以繞過同源政策,發送跨域請求

我們可以這麼了解,同源政策相當于是把所有第三方的源列上黑名單,而CORS則是把第三方的源選擇性的列成白名單,仿佛那些在白名單上的源和自己的源是在一起的

白名單通過伺服器的指令傳遞給用戶端,該指令在HTTP響應頭中傳遞給用戶端,它包含兩個重要的headers

Access-control-allow-origin:用于定義允許哪些源可以通路受限的資源的

Access-control-allow-credentials:确定是否允許使用cookies驗證請求

🎉大家可能注意到了,CORS提供的白名單實際上是為該域提供内容的源所維護的,并不是用戶端所提供的.并不能由用戶端自己決定,接下來所介紹的CSP則很好的解決了這個問題

老規矩,我們先看下wiki百科的定義

内容安全政策（英語：Content Security Policy，簡稱CSP）是一種計算機安全标準，旨在防禦跨站腳本、點選劫持等代碼注入攻擊，阻止惡意内容在受信網頁環境中執行。

我們可以知道,CSP主要是為了抵禦攻擊手段所發明出來的

但wiki百科對于這一塊定義非常的少,接下來介紹的是從MDN上所看到的東西

CSP的主要作用

減少和報告XSS攻擊

CSP可以指定有效域,即用戶端浏覽器這邊認可的可執行的腳本來源

使用CSP

通過Content-Security-Policy設定政策,以下是MDN中介紹的常見的安全政策方案執行個體

網站管理者想要所有内容均來自站點的同一個源(不包括其子域名)

一個網站管理者允許内容來自信任的域名及其子域名 (域名不必須與CSP設定所在的域名相同)

一個網站管理者允許網頁應用的使用者在他們自己的内容中包含來自任何源的圖檔, 但是限制音頻或視訊需從信任的資源提供者(獲得)，所有腳本必須從特定主機伺服器擷取可信的代碼.

在這裡，各種内容預設僅允許從文檔所在的源擷取, 但存在如下例外:

圖檔可以從任何地方加載(注意 "*" 通配符)。

多媒體檔案僅允許從 media1.com 和 media2.com 加載(不允許從這些站點的子域名)。

可運作腳本僅允許來自于userscripts.example.com。

一個線上銀行網站的管理者想要確定網站的所有内容都要通過SSL方式擷取，以避免攻擊者竊聽使用者發出的請求。

一個線上郵箱的管理者想要允許在郵件裡包含HTML，同樣圖檔允許從任何地方加載，但不允許JavaScript或者其他潛在的危險内容(從任意位置加載)。

注意這個示例并未指定script-src (en-US)。在此CSP示例中，站點通過 <code>default-src</code> 指令的對其進行配置，這也同樣意味着腳本檔案僅允許從原始伺服器擷取。

🎊從上述五個常見例子可以看到,通過自己指定政策,用戶端可以自己管理可以從哪加載外部源,相比之前更加安全了,等同于可以自己設定防火牆,抵禦外部的惡意攻擊,同時也解決了跨域資源共享隻能由伺服器端來決定白名單的問題,Web的靈活性大大提高了

先來看看mdn的定義吧

子資源完整性(SRI)是允許浏覽器檢查其獲得的資源是否被篡改的一項安全特性.它是通過驗證擷取檔案的哈希值是否和你提供的哈希值一樣來判斷資源是否被篡改

我來給大家講下SRI的應用場景

我們使用cdn分發腳本和樣式表等檔案時,并不是完全安全的,如果攻擊者獲得對CDN的控制權,則可以将任意惡意内容注入到CDN的檔案上,是以有可能潛在的攻擊所有從該CDN上擷取檔案的站點.而SRI可以極大限度的來降低這種損害

注意:SRI并不能規避所有的風險.第三方庫經常會自己請求額外的資訊,有可能會攜帶使用者的賬号密碼等關鍵資訊.這些經常需要JS功能的支援,比如一個地圖庫會需要取<code>&lt;svg&gt;</code>資料來渲染,但是包含點選事件.通過點選事件就有可能對你的網站造成損害的

使用方法

使用base64編碼過後的檔案哈希值寫入你所引用的<code>&lt;script&gt;</code>和<code>&lt;link&gt;</code>标簽的integrity就可以啟用子資源完整性功能

更為詳細的用法 請大家到MDN上浏覽,本文不做過多介紹

浏覽器處理SRI

當浏覽器在<code>&lt;script&gt;</code>或者<code>&lt;link&gt;</code>标簽中遇到 integrity 屬性之後,會在執行腳本或者應用樣式表之前對比所加載檔案的哈希值和期望的哈希值。

當腳本或者樣式表的哈希值和期望的不一緻時,浏覽器必須拒絕執行腳本或者應用樣式腳本,并且傳回一個網絡

從上面的講述,我們可以看到為了引入第三方資源,其實是做了很多努力的

我們在此也可以總結出一些内容

同源政策相當于密不透風的防火牆,任何第三方資源都進不來

跨域資源共享(CORS)和内容安全政策相當于是白名單,告訴同源政策,我們是安全的,讓它放行他們進去

子資源完整性(SRI)則是鎮守防火牆内的一個尖兵,啟動它的時候,能檢查出這些第三方資源是否是僞裝的惡意進攻

他們互相結合,能極大限度的保護我們的網站不受侵害,同時還能很好的為使用者提供更加豐富的功能

本文來自部落格園，作者：CodeSpirit，轉載請注明原文連結：https://www.cnblogs.com/codespirit-zx/p/15419058.html