同源政策是瀏覽器安全防護功能，可限制某個來源的文件和指令碼與其他來源資源的互動方式。
瀏覽器可以一次載入並顯示多個網站的資源。您可能同時開啟多個分頁，或網站可能嵌入來自不同網站的多個 iframe。如果這些資源之間的互動沒有任何限制，且指令碼遭到攻擊者入侵，指令碼可能會公開使用者瀏覽器中的所有內容。
同源政策會封鎖從不同來源載入的資源讀取權限，防止這種情況發生。「但等等，」你說，「我一直從其他來源載入圖片和指令碼。」瀏覽器允許少數標記嵌入其他來源的資源。這項政策大多是歷史產物，可能會導致網站容易受到使用 iframe 進行點擊劫持等漏洞攻擊。您可以使用內容安全政策，限制這些標記的跨源讀取。
什麼是同源？
來源是由配置 (也稱為通訊協定，例如 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 - Think and Check assessment
如何防範點擊劫持
有一種攻擊稱為「點擊劫持」，會將網站嵌入 iframe，並疊加連結至其他目的地的透明按鈕。使用者會誤以為自己正在存取您的應用程式，但實際上卻將資料傳送給攻擊者。
如要禁止其他網站將您的網站嵌入 iframe，請在 HTTP 標頭中加入含有 frame-ancestors 指令的內容安全政策。
或者，您也可以在 HTTP 標頭中加入 X-Frame-Options，請參閱 MDN 瞭解選項清單。
總結
希望您能稍微放心，因為瀏覽器會努力把關網路安全。雖然瀏覽器會封鎖資源存取權，盡可能確保安全，但有時您可能需要在應用程式中存取跨源資源。在下一份指南中，您將瞭解跨源資源共享 (CORS)，以及如何告知瀏覽器允許從信任的來源載入跨源資源。