瀏覽器安全之 Web 頁面安全

這是我參與 8 月更文挑戰的第 2 天，活動詳情查看： 8月更文挑戰

瀏覽器安全分爲 Web 頁面安全、瀏覽器網絡安全和瀏覽器系統安全。

一、爲何須要安全策略

假設這樣一個場景：你先打開了個銀行網站，並登陸了，而後不當心打開了個惡意網站，因爲沒有安全策略，此時惡意網站徹底能夠對銀行網站進行任意操做，好比更改銀行網站的 DOM 元素，甚至獲取 cookie 等信息，僞造接口請求等，可想而知是很恐怖的。因此在沒有安全保障的 Web 世界中，咱們是沒有隱私的，所以須要安全策略來保障咱們的隱私和數據的安全。

二、同源策略

說到安全策略，就不得不提同源策略，那何爲同源策略呢？ 要理解同源策略，先理解下同源的概念：

若是兩個 URL 的協議、域名和端口都相同，咱們就稱這兩個 URL 同源。

好比下面這兩個 URL 就屬於同源，具備相同的協議 https，相同的域名 juejin.cn，相同的端口

https://juejin.cn/books
https://juejin.cn/events/all
複製代碼

兩個不一樣的源之間若想要相互訪問資源或者操做 DOM，那麼會有一套基礎的安全策略的制約，咱們把這稱爲同源策略。 具體來說，同源策略主要表如今 DOM、Web 數據和網絡這三個層面。

2.一、DOM 層面

同源策略限制了來自不一樣源的 JavaScript 腳本對當前 DOM 對象讀和寫的操做。 好比你 window.open 個網站，那麼若是該網站與當前網站屬於同源，就能夠在新打開的網站上操做原網站的 DOM 元素，不然就不能夠修改

2.二、Web 數據

同源策略限制了不一樣源的站點讀取當前站點的 Cookie、IndexDB、LocalStorage 等數據

2.三、網絡

沒法訪問跨域的資源

三、安全策略

若是徹底採用同源策略，固然是最安全的，但這樣會使得 Web 項目難以開發和使用。因此要出讓些安全性來知足靈活性，這就是目前的頁面安全策略原型。

3.一、頁面中能夠嵌入第三方資源

同源策略要讓一個頁面的全部資源都來自於同一個源，也就是要將該頁面的全部 HTML 文件、JavaScript 文件、CSS 文件、圖片等資源都部署在同一臺服務器上，這明顯很不合理，好比我要將一些靜態資源從 CDN 上獲取，就辦不到。因此就須要同源策略放[鬆]下，容許任意引用外部文件。 但由於這個方案，致使頁面裏會注入惡意的腳本文件，致使 XSS 攻擊，後面細講。

3.二、跨域資源共享

同源策略限制了訪問跨域的資源，這會大大制約生產力。因此引進了跨域資源共享（CORS），使用該機制能夠進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。 好比響應頭部設置以下

access-control-allow-origin: *
複製代碼

3.三、跨文檔消息機制

同源策略限制了兩個不一樣源之間的 DOM 操做，但有時須要兩個不一樣源的 DOM 之間進行通訊，因而瀏覽器中又引入了跨文檔消息機制。

好比一個頁面經過 iframe 嵌入了另外一個不一樣源的頁面，此時雙方想要進行通訊，就得采用 window.postMessage。

四、XSS

因爲支持頁面中的第三方資源引用和 CORS 帶來了不少安全問題，其中最典型的就是 XSS 攻擊。

4.一、什麼是 XSS

XSS 全稱爲 Cross Site Scripting ，爲了與 CSS 區分開來，因此簡稱 XSS，翻譯過來是跨站腳本。 XSS 攻擊是指黑客往 HTML 文件中或者 DOM 中注入惡意腳本，從而在用戶瀏覽頁面時利用注入的惡意腳本對用戶實施攻擊的一種手段。

4.二、XSS 攻擊的危害

• 竊取 Cookie 信息：惡意腳本經過 document.cookie 的方式獲取 cookie 信息，並利用 CORS 將 cookie 信息上傳到惡意服務器。
• 監聽用戶行爲：使用 addEventListener 接口來監聽鍵盤事件，好比監聽用戶輸入的信用卡等信息，並上傳到惡意服務器。
• 修改 DOM：僞造登陸窗口，騙取用戶輸入帳號與密碼等信息
• 在頁面內生成浮窗廣告

4.三、XSS 攻擊方式

4.3.一、存儲型 XSS 攻擊

產生存儲型 XSS 步驟以下：

1. 黑客將帶有惡意腳本的表單提交保存到數據庫
2. 用戶請求包含了該腳本的頁面
3. 用戶瀏覽該頁面時，惡意腳本就會將 Cookie 等數據上傳到惡意服務器

4.3.二、反射型 XSS 攻擊

用戶將一段含有惡意代碼的請求提交給 Web 服務器，Web 服務器接收到請求時，又將惡意代碼反射給了瀏覽器端。

好比:http://localhost:3000/?xss=<script>alert('你被xss攻擊了')</script>。

黑客常常會經過 QQ 羣或者郵件等渠道誘導用戶去點擊這些惡意連接，因此對於不知來源的連接，要謹慎。

4.3.三、基於 DOM 的 XSS 攻擊

基於 DOM 的 XSS 攻擊是不牽涉到頁面 Web 服務器的。

在 Web 資源傳輸過程或者在用戶使用頁面的過程當中修改 Web 頁面的數據。

4.四、如何阻止 XSS 攻擊

不管是何種類型的 XSS 攻擊，它們都有一個共同點，那就是首先往瀏覽器中注入惡意腳本，而後再經過惡意腳本將用戶信息發送至黑客部署的惡意服務器上。

因此要阻止 XSS 攻擊，能夠經過阻止惡意 JavaScript 腳本的注入和惡意消息的發送來實現。

4.4.一、純前端渲染

不要採用服務端渲染，而是經過接口請求，而後採用 innerText，setAttribute 等方式設置內容或屬性

4.4.二、服務器對輸入腳本進行過濾或轉碼

在服務端將一些關鍵的字符進行轉碼，好比 <script 轉爲 <script>

4.4.三、利用 CSP

CSP 全稱爲 Content-Security-Policy，翻譯過來爲內容安全策略

• 限制加載其餘域下的資源文件，這樣即便黑客插入了一個 JavaScript 文件，這個 JavaScript 文件也是沒法被加載的；
• 禁止向第三方域提交數據，這樣用戶數據也不會外泄；
• 禁止執行內聯腳本和未受權的腳本；

好比

• 只容許加載本站資源：

Content-Security-Policy: default-src ‘self’
複製代碼

• 只容許加載 HTTPS 協議圖片：

Content-Security-Policy: img-src https://*
複製代碼

• 容許加載任何來源框架：

Content-Security-Policy: child-src 'none'
複製代碼

4.4.四、使用 HttpOnly 屬性

使用 HttpOnly 標記的 Cookie 只能使用在 HTTP 請求過程當中，因此沒法經過 JavaScript 來讀取這段 Cookie。

五、CSRF

5.一、什麼是 CSRF

CSRF 英文全稱是 Cross-site request forgery，因此又稱爲「跨站請求僞造」，是指黑客引誘用戶打開黑客的網站，在黑客的網站中，利用用戶的登陸狀態發起的跨站請求。簡單來說，CSRF 攻擊就是黑客利用了用戶的登陸狀態，並經過第三方的站點來作一些壞事。

5.二、CSRF 攻擊的方式

發起 CSRF 攻擊的三個必要條件：

• 目標站點要有 CSRF 漏洞；
• 用戶要登陸過目標站點，而且在瀏覽器上保持有該站點的登陸狀態；
• 須要用戶打開一個第三方站點，能夠是黑客的站點，也能夠是一些論壇。

一般當用戶打開了黑客的頁面後，黑客有三種方式去實施 CSRF 攻擊。

• 自動發起 Get 請求 好比黑客頁面有張圖片，頁面一加載該圖片就發起了請求

<img src="xxx">
複製代碼

• 自動發起 POST 請求

  構建個隱藏表單，頁面加載時觸發表單提交

• 引誘用戶點擊連接

5.三、如何阻止 CSRF 攻擊

CSRF 主要是因爲服務端的漏洞引發的，因此主要的防禦手段是提高服務器的安全性

5.3.一、利用 Cookie 的 SameSite 屬性

• Strict 最爲嚴格。若是 SameSite 的值是 Strict，那麼瀏覽器會徹底禁止第三方 Cookie。
• Lax 相對寬鬆一點。在跨站點的狀況下，從第三方站點的連接打開和從第三方站點提交 Get 方式的表單這兩種方式都會攜帶 Cookie。但若是在第三方站點中使用 Post 方法，或者經過 img、iframe 等標籤加載的 URL，這些場景都不會攜帶 Cookie。
• None：在任何狀況下都會發送 Cookie 數據。

將一些關鍵的 Cookie 設置爲 Strict 或者 Lax 模式，這樣第三方站點發起請求時，這些關鍵 cookie 就不會帶上，從而使得登陸驗證失敗，天然 CSRF 攻擊也就無效了。

5.3.二、驗證請求的來源站點

攻擊都是來自於第三節站點，因此能夠經過來源來阻止 CSRF 攻擊，那麼要如何獲取來源呢？ 就得采用 HTTP 請求頭中的 Referer 和 Origin 屬性。 優先判斷 Origin，若是請求頭中沒有包含 Origin 屬性，再根據實際狀況判斷是否使用 Referer 值。

5.3.三、CSRF Token

服務器返回頁面時帶個標識，調用接口時帶上該標識。因爲第三方站點沒法獲取到該標識，因此就算髮出了請求，服務端也會由於標識不正確而拒絕請求。

六、相關面試題

1. 簡明說明下你對同源策略的理解
2. 同源與同一站點的區別
3. xss 攻擊裏存儲型與反射型攻擊的區別
4. 如何阻止 xss 攻擊
5. CSRF 是什麼
6. 如何阻止 CSRF 攻擊
7. 談談你對 XSS 與 CSRF 兩種攻擊的理解
8. 爲何會有 XSS 與 CSRF 攻擊

建議本身先根據上面的內容解答下。

解答：

1. 簡明說明下你對同源策略的理解：

答：同一協議，同一域名，同一端口的稱爲同源，同源之間能夠進行任意操做，而不一樣源之間就會有些限制，分爲 DOM 、Web 數據和網絡三個層面，DOM 上不一樣源沒法修改，沒法獲取到不一樣源上的 cookie 等數據，使用 xml 或 fetch 方式沒法調用不一樣源的接口。

2. 同源與同一站點的區別

答：同源要求協議、域名以及端口均同樣才行；同一站點只要求協議，根域名相同便可， 好比以下兩個 URL 就屬於同一站點，而不屬於同源。

https://shop.example.com
https://www.example.com
複製代碼

3. xss 攻擊裏存儲型與反射型攻擊的區別

答：Web 服務器不會存儲反射型 XSS 攻擊的惡意腳本，這是和存儲型 XSS 攻擊不一樣的地方

4. 如何阻止 xss 攻擊

答：見 4.3 內容

5. CSRF 是什麼

答：跨域請求僞造，經過第三方站點模擬用戶請求行爲

6. 如何阻止 CSRF 攻擊

答：見 5.3 內容

7. 談談你對 XSS 與 CSRF 兩種攻擊的理解

答：XSS 是經過往用戶的頁面中注入惡意腳本，而後再經過惡意腳本將用戶頁面的數據上傳到黑客的服務器上，最後黑客再利用這些數據進行一些惡意操做。CSRF 攻擊不須要將惡意代碼注入用戶的頁面，僅僅是利用服務器的漏洞和用戶的登陸狀態來實施攻擊。XSS 是利用用戶對網站的信任採起攻擊的，而 CSRF 是利用網站對用戶的信任採起攻擊的。

8. 爲何會有 XSS 與 CSRF 攻擊

答：瀏覽器爲同源策略開的兩個「後門」：一個是在頁面中能夠任意引用第三方資源，另一個是經過 CORS 策略讓 XMLHttpRequest 和 Fetch 去跨域請求資源。

參考連接

瀏覽器工做原理與實踐