iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

前端藏寶圖系列 第 21

上有政策 - 同源政策

為什麼要有同源政策?/images/emoticon/emoticon19.gif

可以先想想沒有同源政策會發生什麼事?

當你在看這篇文章時,可以看看你的瀏覽器開了多少分頁,可能開了 gmail 信箱的頁面,臉書,無數部落格等等,這時候這些網站間便可以讀取其他網站的資訊,如果這時候某個網頁要讀取你個人信箱的私人訊息也是可以的,這時你可能會想,這樣許多私人的資訊不就會被竊取嗎?

沒錯,正是為了避免惡意的腳本透過 DOM 存取資料,同源政策規定了只有來源相同的文件可以彼此存取資源。

那怎麼樣才算是同源呢?

我們先來看看訪問一個網頁時一定會需要的網址,一個網址可以大致分成四個部分:

http://www.example.com/dir/page.html

  1. 協定 - http
  2. 網域 - www.example.com
  3. 埠號 - 沒有標明的話預設是80
  4. 路徑 - dir/page.html

只要前三個相同就算是同源,以下可以比較一下哪些網址和上述的網址同源


圖片來源:維基百科

雖然同源的網站才能彼此存取資料,但不代表完全禁止跨來源存取資料,這是很大的一個迷思。MDN 提到兩個允許的特定情況:

1. 跨來源寫入

  • 表單送出
  • 連結
  • 重新導向

2. 跨來源嵌入

  • 圖片
  • 使用HTML標籤 <video><audio>嵌入的影音媒體
  • @font-face 的字型(部分瀏覽器不允許)
  • iframes(如果 X-Frame-Options 的設定是 sameorigin 或 deny 則不允許嵌入)
  • script(對於特定的API存取可能會被禁止)

放寬同源政策的兩大策略

由於不是所有網站都帶有惡意程式,加上網頁間有時必須取用第三方資源,所以有兩種方式可以讓網頁存取不同來源的資源:

  1. 將指令稿 document.domain 設為文件後綴,不過因為安全性因素,MDN 上提到這種方式已被棄用

  1. 使用跨來源資源共享( Cross-Origin Resource Sharing,簡稱 CORS )
    • 透過設定 Access-Control-Allow-Origin發送請求的網址*,即可取得其他來源的資源

至於跨域請求會發生的錯誤以及 CORS 的詳細做法,就待之後再理解了~

參考資料:
MDN
Same-origin policy


上一篇
async/await 連體嬰
下一篇
下有對策 - CORS
系列文
前端藏寶圖30

1 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-10-06 17:18:11

雖然同源的網站才能彼此存取資料,但不代表完全禁止跨來源存取資料,這是很大的一個迷思。MDN 提到兩個允許的特定情況:

  1. 跨來源寫入
    表單送出
    連結

這就是為何常說:不要點未知連結的原因嗎XD

Chiahsuan iT邦新手 4 級 ‧ 2021-10-06 17:45:12 檢舉

https://javascript.info/clickjacking

你說的好像是這個

喔喔喔喔 /images/emoticon/emoticon32.gif

我要留言

立即登入留言