關於Web的同源政策(Same Origin Policy)
閱讀時間約 5 分鐘
互聯網的時代中我們幾乎都離不開網路，那如果能夠對於Web具備基礎的知識，就能夠讓我們在使用網路的過程中提升風險意識，以減少被竊取、盜用的風險，進而保護個人資產，因此多一份知識在身上也就等於多了一份防身的武器，一天學一點，透過微習慣讓我們享受複利的效應。
Same-Origin Policy 同源政策是Web Security中安全建立的基礎，用來限制不同網域之間的資源存取權，而這邊指的資源包括程式碼、圖片、影片、html…等。
Same-Origin Policy 主要目的在劃清界限，試想兩個國家之間，基於安全考量，通常不會共享重要資源(軍備、財務…等)吧！ 而Same-Origin Policy就是在制定這樣的政策，讓自己的網站自己管，試想，若自己的網站允許被其他網站存取，那麼在你的網站中的重要資訊也很容易被竊取，甚至鑽研漏洞，導致被攻擊，道理就跟國與國之間一樣，必須形成壁壘，保護重要資產。
像這樣的畫面，我們進行網頁開發時是不是常常看到這種狀況？ 這就是不同源存取的其中一個例子。
什麼是同源？ 又該如何判定？
同源(Origin)主要由以下三個部分組成：
- Schema： URL的最初始位置，也就是:// 之前的字段，也就是http、https...等協定。
- Hostname(Domain)： 這裡指的就是full domain name。
- Port： domain name後面接的port， 我們有時候沒有看到port號是因為http預設80 port而https預設為443 port。
上述三個部分只要有其中一個不相符，就屬於不同源，以下用簡單的例子來看看哪些同源，哪些又是不同源？
❓ <https://www.domain1.com>
====================================================================
✅ <https://www.domain1.com/dir1/1.html>
✅ <https://www.domain1.com/dir1/inner/1.html>
❌ <http://www.domain1.com> -> Schema不同
❌ <https://www.hack.com> -> Hostname不同
❌ <https://www.domain1.com:31217> -> Port不同
哪些又是同源的例外？
開發Web應用的過程中，我們常常會嵌入其他網站的圖片、內嵌網頁、影片…等，但問題來了，為什麼這些資源能夠順利的被嵌入呢？ 沒錯，事情總有些例外！在某些情況下，跨源是被允許的，如下：
- 跨來源寫(Cross-origin writes)： 連結、重新導向、表單送出。
- 跨來源嵌入(Cross-origin embedding)： <script src=”xxx”>、 <img>、<video>、<iframe>…等嵌入語法。
關於Cookie存取的同源政策
什麼是Cookie呢？ 簡單來說就像一張通行證的概念，裡面存有你這個人的識別號碼， 因此通常是認卡不認人，因此很容易發生非本人但拿著識別卡片一樣能進入的狀況。
為什麼會如此呢？ 這就得先了解一下Cookie的同源政策，對於Cookie的檢查來說，只要Hostname(Domain)與Path一樣，就會被視為同源，若Cookie有加上一些特別的設定才需要多判斷Schema的部分。
而Cookie的子網域與母網域是共用的，因此有心人士可以在這樣的共用制度下，透過子網域去攻擊母網域，導致安全性議題，後續會談到CSRF，看完之後就能呼籲這篇的概念了。
結語
同源政策的概念非常好，完美的形成壁壘，但總不可能為了完全阻絕攻擊而封閉整個國家吧！ 並不是每個想要存取網站的其他來源都是惡意的，而我們有時候也需要串接一些第三方的資源，套用到國與國之間就是邦交國的概念，總會需要一些適度的開放，那開放的同時也需要有一些名單上的限制，另外會衍生哪些安全性議題？ 請參考以下的章節預告。
章節預告
- Web世界的邦交國政策 — 跨來源資源共用（Cross-Origin Resource Sharing, CORS）。
- Web的安全隱憂CSRF(Cross-site request forgery)。
- 跨網站腳本 (Cross-Site Scripting, XSS)。
- 開放白名單 — Content Security Policy (CSP)。
資源參考
為什麼會看到廣告
116會員
257內容數
哈囉，我是阿Han，是一位 👩💻 軟體研發工程師，喜歡閱讀、學習、撰寫文章及教學，擅長以圖代文，化繁為簡，除了幫助自己釐清思路之外，也希望藉由圖解的方式幫助大家共同學習，甚至手把手帶您設計出高品質的軟體產品。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
最近有一些新的覺察，邁入大學的生涯後，更加的明白，有很多的事情需要自己去體會、感受。才能找出屬於自己的最佳解。
大學就是一個小型的社會，多少時間是社交，又多少時間是留給自己，是一個流動的狀態，卻是大部分會給我帶來情緒波動的主因。
最近感悟到，當我在面對與自己完全不同的人時學到了如果對方沒有主動問
不純粹的閱讀，你必然得到純粹的結論，例如看到討厭的同學發臉文，心裡開始品頭論足，最後得出他失戀失業的無能結論。嗯，或許討厭的同學只是單純實驗做失敗而已。
這年代了解不純粹的純粹很重要，還記得2024總統大選，有許多工程師小草放大自己的專業能力，覺得別人都很笨，用極大的意義解讀其他政治人物的動機？
畢業季，離情依依，怕感情變疏遠！送別禮物特別能延續感情，但要送什麼好呢？讓友情歷久彌堅，分享好朋友送禮攻略！好書推薦「長輩沒教，但你一定要懂的81種送禮大學問」！
之前研究Google簡報的時候，發現Google簡報並沒有提供畫筆工具、開啟YouTube影片時也沒辦法在影片上直接畫圖寫字。所以這次找了一個Chrome的外掛程式 Web Paint。功能非常簡單，趕快跟著圖卡操作看看吧！
我保證我會專門寫一些專門針對分子 ARweb 的帖子，描述我們是如何製作它的，以及教師如何在課堂上使用它！目前，教師可以查看這篇論文或預印本。
AR 在科學教育中的應用不僅限於查看分子。Google 提供 WebXR 體驗來觀察各種化學和生物學學科（植物、細胞、動物等）的帶註釋（在某些情況下是動畫）
門市通路很不喜歡Show-rooming（展聽現象），透過重建OMO顧客旅程，可以讓Show-rooming的消費者的線上消費，可以歸因回某門市的服務，並讓門市認列到業績，就可以把Show-rooming的現象，變成推動OMO的助力。
同源政策是瀏覽器基於安全性考量而存在的一個政策，針對瀏覽器指令碼的限制。
患有罕見癲癇疾病卓飛症候群 (Dravet Syndrome，DS) 的小女孩夏洛特 (Charlotte Figi) 終於不敵病魔，在家人和親友的陪同下，星期二早上在醫院與世長辭，令人惋惜的是，只有13歲的她不幸逝世的原因並不是奮鬥多年的卓飛症候群，而是今年席捲全球的肺炎疫情。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
最近有一些新的覺察，邁入大學的生涯後，更加的明白，有很多的事情需要自己去體會、感受。才能找出屬於自己的最佳解。
大學就是一個小型的社會，多少時間是社交，又多少時間是留給自己，是一個流動的狀態，卻是大部分會給我帶來情緒波動的主因。
最近感悟到，當我在面對與自己完全不同的人時學到了如果對方沒有主動問
不純粹的閱讀，你必然得到純粹的結論，例如看到討厭的同學發臉文，心裡開始品頭論足，最後得出他失戀失業的無能結論。嗯，或許討厭的同學只是單純實驗做失敗而已。
這年代了解不純粹的純粹很重要，還記得2024總統大選，有許多工程師小草放大自己的專業能力，覺得別人都很笨，用極大的意義解讀其他政治人物的動機？
畢業季，離情依依，怕感情變疏遠！送別禮物特別能延續感情，但要送什麼好呢？讓友情歷久彌堅，分享好朋友送禮攻略！好書推薦「長輩沒教，但你一定要懂的81種送禮大學問」！
之前研究Google簡報的時候，發現Google簡報並沒有提供畫筆工具、開啟YouTube影片時也沒辦法在影片上直接畫圖寫字。所以這次找了一個Chrome的外掛程式 Web Paint。功能非常簡單，趕快跟著圖卡操作看看吧！
我保證我會專門寫一些專門針對分子 ARweb 的帖子，描述我們是如何製作它的，以及教師如何在課堂上使用它！目前，教師可以查看這篇論文或預印本。
AR 在科學教育中的應用不僅限於查看分子。Google 提供 WebXR 體驗來觀察各種化學和生物學學科（植物、細胞、動物等）的帶註釋（在某些情況下是動畫）
門市通路很不喜歡Show-rooming（展聽現象），透過重建OMO顧客旅程，可以讓Show-rooming的消費者的線上消費，可以歸因回某門市的服務，並讓門市認列到業績，就可以把Show-rooming的現象，變成推動OMO的助力。
同源政策是瀏覽器基於安全性考量而存在的一個政策，針對瀏覽器指令碼的限制。
患有罕見癲癇疾病卓飛症候群 (Dravet Syndrome，DS) 的小女孩夏洛特 (Charlotte Figi) 終於不敵病魔，在家人和親友的陪同下，星期二早上在醫院與世長辭，令人惋惜的是，只有13歲的她不幸逝世的原因並不是奮鬥多年的卓飛症候群，而是今年席捲全球的肺炎疫情。