我們都知道，JavaScript 可以嵌入 HTML 中，使得 HTML 元素呈現交互效果，然而，當這些 JavaScript 程序在不同源間共享時，可能會面臨一些安全限制問題。本文將著重解釋 JavaScript 同源策略，以及如何遵循相應的限制。

那么，什么是同源策略呢？該策略是 JavaScript 圖書館引入的趨勢，已成為所有支持 JavaScript 的瀏覽器的重要特性之一。當兩個文檔具有相同的協議、主機和端口時，它們就是同源的。由此看出，如果兩個文檔間的至少一個組成部分不同，它們就是不同源。

// 例如，以下兩個 URL 不是同源：
http://www.github.com
https://www.github.com

這段代碼表明了兩個文檔的協議不同（前者用的是 HTTP，后者是 HTTPS），因此它們不是同源的。但是，以下示例代碼表示了兩個文檔是同源的：

// 演示同源策略：
const firstUrl = new URL('http://github.com/some/path');
const secondUrl = new URL('http://github.com/another/path');
console.log(firstUrl.origin === secondUrl.origin); // =>true

由此可見，兩個文檔的協議、主機和端口都相同，因此它們是同源的。

那么，同源策略存在的原因是什么呢？它的存在是為了加強 Web 應用程序的安全性，防止惡意代碼通過某些方式獲取用戶的敏感信息。只有在同源文檔之間的交互得到授權時才會發生，這有助于降低跨站腳本 (XSS) 的風險以及不良方面的客戶端攻擊。

那么，如果遵循了同源策略，就意味著不能從一個源訪問另一個源的任何資源，包括通過 XMLHTTPRequest 和fetch API 發送異步請求，或者訪問不同頁面的 iframe 資源。例如，如果我的主站點是 www.example.com，那么我的頁面 fs.example.com 經過身份驗證后可以從 my.example.com 點擊按鈕進行登錄，但不能獲取 my.example.com 頁面的 DOM 元素或通過 JavaScript 讀取其他資源，因為這會違反同源策略。這也意味著與主站點不同的客戶端腳本和 Cookies 是無法讀取或設置的。

除非使用跨域解決方案，否則 JavaScript 無法從另一個不同源的文檔中獲取數據，例如使用 JSONP 或 CORS。Third-party cookies 是另一個與跨所使用的關鍵體系之間的相互作用，這將在下面的部分中介紹。

總的來說，JavaScript 的同源策略是 Web 安全性的基礎，合理使用有助于幫助開發者提升 Web 應用程序的安全性，通過對 HTTP 封裝函數和其他跨文檔通信解決方案的實現，使 Web 應用程序更加智能和安全。