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

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

同源策略(SOP)

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

?同源策略是指Web瀏覽器中,允許某個網頁腳本訪問另一個網頁的資料,但前提是這兩個網頁必須有相同的協議號(protocol),主機號(host name)和埠號(port),一旦兩個網站滿足上述條件,這兩個網站被認定為具有相同來源.

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

DOM:限制了來自不同源的JavaScript腳本對當前的DOM物件讀和寫的操作
Web資料: 限制了不同源的站點讀取當前站點的Cookie,indexDB,LocalStorage等資料
網路:限制了通過XMLHttpRequest等方式將站點的資料發送給不同源的站點

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

措施

跨域資源共享 - 維基百科(CORS)

我們先看下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則很好的解決了這個問題

內容安全策略(CSP)

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

內容安全策略（英語：Content Security Policy，簡稱CSP）是一種計算機安全標準，旨在防御跨站腳本、點擊劫持等代碼注入攻擊，阻止惡意內容在受信網頁環境中執行，
我們可以知道,CSP主要是為了抵御攻擊手段所發明出來的
但wiki百科對于這一塊定義非常的少,接下來介紹的是從MDN上所看到的東西

CSP的主要作用

減少和報告XSS攻擊
CSP可以指定有效域,即客戶端瀏覽器這邊認可的可執行的腳本來源

使用CSP

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

網站管理者想要所有內容均來自站點的同一個源(不包括其子域名)
```
Content-Security-Policy: default-src 'self'
```
一個網站管理者允許內容來自信任的域名及其子域名 (域名不必須與CSP設定所在的域名相同)
```
Content-Security-Policy: default-src 'self' *.trusted.com
```
一個網站管理者允許網頁應用的用戶在他們自己的內容中包含來自任何源的圖片, 但是限制音頻或視頻需從信任的資源提供者(獲得)，所有腳本必須從特定主機服務器獲取可信的代碼.
```
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
```
在這里，各種內容默認僅允許從檔案所在的源獲取, 但存在如下例外:
- 圖片可以從任何地方加載(注意 "*" 通配符)，
- 多媒體檔案僅允許從 media1.com 和 media2.com 加載(不允許從這些站點的子域名)，
- 可運行腳本僅允許來自于userscripts.example.com，
一個線上銀行網站的管理者想要確保網站的所有內容都要通過SSL方式獲取，以避免攻擊者竊聽用戶發出的請求，
```
Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
```
一個在線郵箱的管理者想要允許在郵件里包含HTML，同樣圖片允許從任何地方加載，但不允許JavaScript或者其他潛在的危險內容(從任意位置加載)，
```
Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
```
注意這個示例并未指定script-src (en-US)，在此CSP示例中，站點通過 default-src 指令的對其進行配置，這也同樣意味著腳本檔案僅允許從原始服務器獲取，

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

子資源完整性Subresource Integrity(SRI)

先來看看mdn的定義吧

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

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

我們使用cdn分發腳本和樣式表等檔案時,并不是完全安全的,如果攻擊者獲得對CDN的控制權,則可以將任意惡意內容注入到CDN的檔案上,因此有可能潛在的攻擊所有從該CDN上獲取檔案的站點.而SRI可以極大限度的來降低這種損害
注意:SRI并不能規避所有的風險.第三方庫經常會自己請求額外的資訊,有可能會攜帶用戶的賬號密碼等關鍵資訊.這些經常需要JS功能的支持,比如一個地圖庫會需要取<svg>資料來渲染,但是包含點擊事件.通過點擊事件就有可能對你的網站造成損害的

使用方法

使用base64編碼過后的檔案哈希值寫入你所參考的<script>和<link>標簽的integrity就可以啟用子資源完整性功能
更為詳細的用法請大家到MDN上瀏覽,本文不做過多介紹

瀏覽器處理SRI

當瀏覽器在<script>或者<link>標簽中遇到 integrity 屬性之后,會在執行腳本或者應用樣式表之前對比所加載檔案的哈希值和期望的哈希值，
當腳本或者樣式表的哈希值和期望的不一致時,瀏覽器必須拒絕執行腳本或者應用樣式腳本,并且回傳一個網路

引入第三方資源小結

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

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

同源策略相當于密不透風的防火墻,任何第三方資源都進不來
跨域資源共享(CORS)和內容安全策略相當于是白名單,告訴同源策略,我們是安全的,讓它放行他們進去
子資源完整性(SRI)則是鎮守防火墻內的一個尖兵,啟動它的時候,能檢查出這些第三方資源是否是偽裝的惡意進攻
他們相互結合,能極大限度的保護我們的網站不受侵害,同時還能很好的為用戶提供更加豐富的功能

本文來自博客園，作者：CodeSpirit，轉載請注明原文鏈接：https://www.cnblogs.com/codespirit-zx/p/15419058.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320919.html

標籤：訊息安全

上一篇：如何讓一個函式在第二次和第三次（以此類推）點擊html按鈕時再次運行？

下一篇：生成裂變海報