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
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
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