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
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
之前在【什麼是網路請求(HTTP response)】筆記裡有提到,網路請求遇到 CORS 跨域問題,在開發時可以透過 vite 的反向代理來解決,那麼什麼是反向代理,有反向代理的話是不是也有正向代理呢?
Thumbnail
之前在【什麼是網路請求(HTTP response)】筆記裡有提到,網路請求遇到 CORS 跨域問題,在開發時可以透過 vite 的反向代理來解決,那麼什麼是反向代理,有反向代理的話是不是也有正向代理呢?
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
Thumbnail
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
Thumbnail
referrer 是正確的字! 我一直都覺得很奇怪,為什麼有時會二個 r, 有時一個。
Thumbnail
referrer 是正確的字! 我一直都覺得很奇怪,為什麼有時會二個 r, 有時一個。
Thumbnail
從瀏覽器到伺服器之間究竟發生了哪些事情?才讓我們可以正常的瀏覽網頁呢?
Thumbnail
從瀏覽器到伺服器之間究竟發生了哪些事情?才讓我們可以正常的瀏覽網頁呢?
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
從瀏覽器console看到類似這個error:  ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 表示遇到CORS的
Thumbnail
從瀏覽器console看到類似這個error:  ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 表示遇到CORS的
Thumbnail
想從javascript拿到不同源的資料,除了上一篇介紹的CORS,其實還有一個東西叫JSOP,是指透過script tag src的方式繞過同源政策來實現cross origin。
Thumbnail
想從javascript拿到不同源的資料,除了上一篇介紹的CORS,其實還有一個東西叫JSOP,是指透過script tag src的方式繞過同源政策來實現cross origin。
Thumbnail
Cross-Origin Resource Sharing 簡稱 CORS,中文為跨來源資源共享。 上一篇提到web瀏覽器有同源政策的限制,而CORS則是一種安全確認機制,讓瀏覽器和伺服器之間能確保安全的進行cross origin資源共享,即若伺服器同意,即可達成跨來源資源共享。
Thumbnail
Cross-Origin Resource Sharing 簡稱 CORS,中文為跨來源資源共享。 上一篇提到web瀏覽器有同源政策的限制,而CORS則是一種安全確認機制,讓瀏覽器和伺服器之間能確保安全的進行cross origin資源共享,即若伺服器同意,即可達成跨來源資源共享。
Thumbnail
jQuery ajax & php example 第一種方式 使用application/x-www-form-urlencoded 第二種方式 使用application/json
Thumbnail
jQuery ajax & php example 第一種方式 使用application/x-www-form-urlencoded 第二種方式 使用application/json
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News