同源政策是瀏覽器安全防護功能,用來限制 單一來源的文件和指令碼可與資源互動 在不同來源之間執行。
瀏覽器可以一次載入並顯示多個網站的資源。您可能在 多個分頁同時開啟多個分頁,或是同一個網站可以嵌入多個 不同的網站如果這兩者之間的互動沒有限制 並取得攻擊者入侵指令碼,指令碼 對使用者的瀏覽器顯示所有資訊。
相同來源政策會封鎖以下項目的讀取權限,以防止發生上述情況: 從其他來源載入的資源「等一下」您說 「我載入圖片 以及來自其他來源的指令碼隨時。」瀏覽器允許使用幾個標記 從其他來源嵌入資源這項政策主要用於歷來資料 導致您的網站暴露在各種漏洞,例如使用 iframes 中的值。你可以限制跨來源讀取 並透過內容安全性 監控這些標記 政策。
什麼是相同來源?
來源是由配置 (如通訊協定) 定義。
HTTP 或 HTTPS)、通訊埠 (如有指定) 和主機。當這三種
這兩個網址就視為同來源。例如:
http://www.example.com/foo
與
http://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 - 思考與檢驗評估
如何避免點擊劫持
名為「clickjacking」的攻擊以 iframe
和疊加層的形式嵌入網站
連結至其他目的地的透明按鈕。使用者受到欺騙
是考慮他們存取您的應用程式,同時傳送資料給
攻擊者
如要禁止其他網站將你的網站嵌入 iframe 中,請新增內容
與 frame-ancestors
的安全性政策
指令
回應 HTTP 標頭
或者,您也可以在 HTTP 標頭中加入 X-Frame-Options
,如下所示:
MDN
查看選項清單
總結
相信您有些人會覺得,瀏覽器成為守門員並不容易 保護網路安全即使瀏覽器已嘗試封鎖存取活動,以確保安全 有時您會想存取 應用程式。在下一份指南中,瞭解跨來源資源共享功能 (CORS),以及如何指示瀏覽器載入跨源資源 允許來自可信任的來源。