同源政策

Mariko Kosaka

同源政策是瀏覽器安全防護功能,用來限制 單一來源的文件和指令碼可與資源互動 在不同來源之間執行。

瀏覽器可以一次載入並顯示多個網站的資源。您可能在 多個分頁同時開啟多個分頁,或是同一個網站可以嵌入多個 不同的網站如果這兩者之間的互動沒有限制 並取得攻擊者入侵指令碼,指令碼 對使用者的瀏覽器顯示所有資訊。

相同來源政策會封鎖以下項目的讀取權限,以防止發生上述情況: 從其他來源載入的資源「等一下」您說 「我載入圖片 以及來自其他來源的指令碼隨時。」瀏覽器允許使用幾個標記 從其他來源嵌入資源這項政策主要用於歷來資料 導致您的網站暴露在各種漏洞,例如使用 iframes 中的值。你可以限制跨來源讀取 並透過內容安全性 監控這些標記 政策

什麼是相同來源?

來源是由配置 (如通訊協定) 定義。 HTTP 或 HTTPS)、通訊埠 (如有指定) 和主機。當這三種 這兩個網址就視為同來源。例如: http://www.example.com/foohttp://www.example.com/bar 但不含https://www.example.com/bar 因為配置不同

允許什麼內容?哪些內容會遭到封鎖?

一般來說,可以嵌入跨來源資源,同時讀取 會封鎖跨來源資源

iframe 一般而言,允許跨來源嵌入 (取決於 X-Frame-Options 指令),但不允許跨來源讀取 (例如使用 JavaScript 存取 iframe 中的文件)。
CSS 您可以使用 <link> 元素或 CSS 檔案中的 @import 嵌入跨來源 CSS。可能需要正確的 Content-Type 標頭。
表單 跨來源網址可做為表單元素的 action 屬性值。網頁應用程式可將表單資料寫入跨來源目的地。
圖片 允許嵌入跨來源圖片。但會禁止讀取跨來源圖片資料 (例如使用 JavaScript 從跨來源圖片擷取二進位資料)。
多媒體 跨來源影片和音訊可以使用 <video><audio> 元素嵌入。
文字 可嵌入跨來源指令碼。但可能無法存取特定 API (例如跨來源擷取要求)。

TODO: DevSite - 思考與檢驗評估

如何避免點擊劫持

點擊劫持
圖:點擊劫持機制,分成 3 個不同層 (基礎網站、 iframe 的網站、透明按鈕)。

名為「clickjacking」的攻擊以 iframe 和疊加層的形式嵌入網站 連結至其他目的地的透明按鈕。使用者受到欺騙 是考慮他們存取您的應用程式,同時傳送資料給 攻擊者

如要禁止其他網站將你的網站嵌入 iframe 中,請新增內容 與 frame-ancestors 的安全性政策 指令 回應 HTTP 標頭

或者,您也可以在 HTTP 標頭中加入 X-Frame-Options,如下所示: MDN 查看選項清單

總結

相信您有些人會覺得,瀏覽器成為守門員並不容易 保護網路安全即使瀏覽器已嘗試封鎖存取活動,以確保安全 有時您會想存取 應用程式。在下一份指南中,瞭解跨來源資源共享功能 (CORS),以及如何指示瀏覽器載入跨源資源 允許來自可信任的來源。