在本程式碼實驗室中,您將瞭解擷取資源時,同源政策的運作方式。
設定:從相同來源擷取網頁
示範內容託管於 https://same-origin-policy-fetch.glitch.me。這個簡單的網頁會使用 fetch 從 https://same-origin-policy-fetch.glitch.me/fetch.html 載入資源。由於 index.html 和 fetch.html 的來源相同,因此即時預覽畫面應會顯示 200。
1. 從不同來源擷取網頁
請嘗試將擷取網址變更為 https://www.google.com。您在即時預覽畫面中看到什麼?
瀏覽器應該會封鎖擷取要求,因為您要求了來自不同來源的資源。這表示即使攻擊者控制了使用者的瀏覽器,也無法讀取跨源資源。
2. 擷取跨源資源
請嘗試將擷取網址變更為 https://api.thecatapi.com/v1/images/search。您在即時預覽畫面中看到什麼?
擷取網址的來源不同,但您應該會看到狀態碼 200。異動原因 現代網頁應用程式通常會要求跨源資源,以載入第三方指令碼或查詢 API 端點。為因應這些用途,我們提供稱為 CORS (跨源資源共享) 的機制,可告知瀏覽器允許載入跨源資源。如要進一步瞭解 CORS,請參閱「安全地共用跨源資源」。