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