在本程式碼研究室中,瞭解相同來源在擷取資源時的運作方式。
設定:從相同來源擷取網頁
示範內容是在 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,請參閱「安全地共用跨源資源」。