同源策略

習題預習

1. 什麼是Same-origin policy?

2. Same-origin policy對網站安全有什麼影響？

3. 如何遵循Same-origin policy，以確保網站的安全？

4. Same-origin policy如何保護用戶的隱私？

5. 在什麼情況下，可能需要違反Same-origin policy，例如跨網站共享資源或與第三方服務集成？

說明知識

Same-origin policy 是一個瀏覽器安全性機制，限制了一個網頁文檔（document）或腳本（script）在瀏覽器和同一個源（origin）下的資源交互，從而防止潛在的跨站腳本攻擊（XSS）或跨站請求偽造（CSRF）等安全問題。

一個源通常由三部分組成：協議（Protocol）、域名（Domain）和端口（Port）。只有三個部分都相同的資源才被認為是同一個源，否則就被視為不同的源。 譬如：

• http://www.example.com 和 https://www.example.com 是不同的源。
• http://www.example.com 和 http://example.com 是不同的源。
• http://www.example.com:80 和 http://www.example.com:8080 是不同的源。

一些常見的Same-origin policy限制包括：

• JavaScript在同一源下的資源上想像可以自由使用，但他們無法訪問其他源的資源。 假設有一個JavaScript應用程序在example.com上運行，那麼就可以訪問它同一源下的任何資源，例如example.com/about.html；但是，如果應用程式嘗試訪問example.net上的資源，則將會被同源政策阻止。

• 瀏覽器在送出不同源的 AJAX 請求或向 iframe 內載入內容時遵守同源政策。

• 不同域名下設置的 Cookie 不會被 JavaScript 訪問，也不會被瀏覽器發送給不同域名。

• 一些HTML5 API （例如 Geolocation API 或者 Web Storage API）將遵循Same-origin policy，並禁止從非同一源的腳本中訪問或修改數據。

簡單地說，當Same-origin policy被強制執行時，瀏覽器只允許當前網頁文檔獲得它自己的資源，而只能與同一個源相關的資源進行交互。這可以減少安全威脅，針對用戶的瀏覽器提供更加安全的環境。

條列重點

1. Same-origin policy是一種網路安全機制，它限制了網頁中的程式碼只能訪問它們自己的 origin（來源）。

2. origin是指協議（如http、https）、主機名和端口號的組合。如果兩個URL的協議、主機名和端口號相同，那它們就是同源的。

3. Same-origin policy的目的是防止跨站腳本（Cross-site scripting，簡稱XSS）攻擊和資料竊取等安全問題。

4. Same-origin policy的具體表現包括：禁止不同源的網頁使用同一個瀏覽器存儲（如cookie）；禁止不同源的網頁使用同一個DOM（文檔物件模型）。

5. Same-origin policy的限制可以通過CORS（跨來源資源共用）來打破，它允許不同源的網頁之間進行資源共用。

6. Same-origin policy需要特別注意的是跨子域（Subdomain）需要特別處理，因為它們雖然不同源但是屬於同一個頂級域名（例如a.example.com和b.example.com）。

7. Same-origin policy的實現是由瀏覽器負責的，為了保護用戶的安全，瀏覽器不會允許跨域訪問，開發者應該遵循Same-origin policy設計應用程式。

知識測驗

1. Same-origin policy 是什麼？它是如何保護使用者的安全性？

2. 當不同來源之間的資源需要進行交互時，Same-origin policy 會限制哪些行為？請舉例說明。

3. 請解釋 Same-origin policy 與 Cross-origin resource sharing (CORS) 的區別。

4. 如果一個網站想要跨域請求其他網站的資源，應該如何解決 Same-origin policy 的限制？

5. 除了在瀏覽器中執行時，Same-origin policy 也能在什麼情況下發揮作用？請舉例說明。

答案：

1. Same-origin policy 是瀏覽器安全機制之一，它強制限制網頁腳本等資源只能存取跟自身網頁來源相同的資源。這種限制減少了惡意網站惡意攻擊用戶的可能性。

2. Same-origin policy 通常限制了以下四種跨域操作：Cookie、LocalStorage 和 IndexedDB 存儲、讀取 DOM 元素內容、AJAX/Fetch 和 WebSocket 的發送和接收。例如，網站 A 的 JavaScript 不能使用 AJAX 向網站 B 發送請求，以防止惡意腳本盜取使用者的敏感信息。

3. Same-origin policy 是瀏覽器的內置安全特性，用於限制兩個不同源的網站之間的資源訪問；而 CORS 則是一種機制，允許網站解除跨域資源請求的限制。

4. 網站可以使用 CORS，以前端側的方式允許跨域請求。透過在請求標頭中添加特定設置，如 Access-Control-Allow-Origin，網站可以指示瀏覽器允許特定網站存取資源。

5. Same-origin policy 也可以在應用程式硬件層面發揮作用，例如瀏覽器插件可以通過使用 same-origin policy 防止第三方網站對插件的攻擊。另外， Content Security Policy (CSP) 也通過實施 same-origin policy 來限制網站的外部資源載入。