Web瀏覽器的 Same-origin policy (同源政策)

Web瀏覽器的 Same-origin policy (同源政策)

更新於 發佈於 閱讀時間約 3 分鐘

一串網址其實是這樣組成的:

scheme://host.domain:port/path/filename

舉例如下:

http://www.yahoo.com:8080/html/hello.php


http = scheme
www = host
yahoo.com = domain
8080 = port
html = path
hello.php = filename


所謂的同源,意思是scheme, host, domain, port 都一樣,就是同源。

同源政策是瀏覽器基於安全性考量而存在的一個政策,針對瀏覽器指令碼的限制。

假如今天我設計一個網站,透過ajax去拿別人的網頁資料,因為不同源,違反同源政策,js就無法拿到回傳的資料。

當然如果我不透過瀏覽器,就沒有這個限制了。

若是單純的把別人網站的img嵌入自己的網站,或是轉址到別人網站,或將別人網站用iframe嵌入自己網站,使用<script src="xxx"></script>,import css等等,則不受同源政策限制。

那麼有沒有什麼方式,可以讓我的javascript可以拿到不同源的資料呢?
有的,這邊就要提到CORS了,請參考下一篇。


#本筆記參考:
1. https://webmasters.stackexchange.com/questions/69477/how-to-understand-scheme-host-domainport-path-filename
2. https://blog.kennycoder.io/2019/12/08/%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96-Same-Origin-Policy-%E5%8E%9F%E7%90%86%E4%BB%8B%E7%B4%B9/
3. https://cms.aaasec.com.tw/index.php/2019/04/28/k_04/
4. https://www.runoob.com/html/html-url.html

avatar-img
Vic Lin的沙龍
21會員
161內容數
留言
avatar-img
留言分享你的想法!
Vic Lin的沙龍 的其他內容
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045