相同來源政策是一項瀏覽器安全防護功能，可限制某個來源的文件和指令碼如何與另一個來源上的資源互動。
瀏覽器可以一次載入並顯示來自多個網站的資源。您可能同時開啟多個分頁，或者網站可以嵌入來自不同網站的多個 iframe。如果資源之間沒有互動限制，且指令碼遭到攻擊者入侵，則指令碼可能會在使用者的瀏覽器中公開所有內容。
同源政策會封鎖從不同來源載入的資源讀取權限，防止上述情況發生。您說：「我一直都載入其他來源的圖片和指令碼。」瀏覽器允許使用幾個標記嵌入不同來源的資源。這項政策主要是歷史成果，可能會導致您的網站暴露在使用 iframe 的 clickjacking 等漏洞。您可以使用內容安全政策限制這些標記的跨來源讀取。
什麼是相同來源？
來源是由配置 (又稱為通訊協定，例如 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 的存取權 (例如跨來源擷取要求) 可能會遭到封鎖。 |
待辦事項：DevSite - 思考和檢查評量
如何防止點擊劫持
名為「點擊綁架」的攻擊會將網站嵌入 iframe 中，並疊加連結至其他目的地的透明按鈕。使用者傳送資料給攻擊者時，會遭到誤導，誤以為自己正在存取應用程式。
如要禁止其他網站在 iframe 中嵌入您的網站，請在 HTTP 標頭中新增含有 frame-ancestors 指令的內容安全政策。
或者，您也可以將 X-Frame-Options 新增至 HTTP 標頭，請參閱 MDN 來取得選項清單。
總結
希望瀏覽器能成為網路安全性的守門員，收穫滿滿。即使瀏覽器會封鎖資源的存取權來保障安全，有時您也需要在應用程式中存取跨來源資源。下一份指南將介紹跨源資源共享 (CORS)，以及如何指示瀏覽器允許從可信任的來源載入跨來源資源。