實現跨域的四種方式（程式設計師別唬我系列之）

2023-04-13 18:57:08

關於跨域與同源，你造嗎？

產品妹子臉憋的通紅，一個勁兒的搖著頭，委屈的小聲說：「唉呀，前端開發說目前情況是產生了「跨域」問題，瀏覽器有「同源策略」保證安全性，突破不了，改動成本非常高，可是不改也不行啊，用戶在線上反饋幾天了，老大可生氣了，我可怎麼辦啊，老大會不會以後不喜歡我了，嗚嗚嗚」。

此時，正是我裝逼的好時光，於是我一個箭（賤）步，跳到她面前，「哭毛啊，哥在這兒呢，好好說話~」。

「同源策略」「跨域」在前端開發（通常前端都是跟瀏覽器打交道哦，因為更靠近用戶，更多的將後臺數據展示給用戶，所以叫前端）中，是很基本的常識，很多沒做過前端開發的程式設計師其實也不是很了解這種策略和場景（注意，沒有鄙視的意思，請不要亂扣帽子），更不用說很多產品同學，為了不再被忽悠，請聽我九淺一深的解讀。

先說iframe

首先說說iframe，iframe是html中的一個標籤，它可以指定一個隨意的Url地址，比如我寫了個網頁是www.a.com/index.html，內容如下:

iframe裡面的src欄位為www.qq.com，那這個網頁打開之後，會看到騰訊網整個頁面嵌入到了我寫的這個index.html網頁當中，iframe的意義非常簡單，就是將一個Url地址嵌入到當前頁面並展示出來。

你給遠方的情郎寫了一封情書，當把郵票貼在信封右上角的時候，信封為頁面，郵票可以想像為一個iframe標籤，它裡面也描寫很多內容（有山，有水，有人家）。

其中信封是在超市買的，郵票是在郵局買的，它倆生產廠家，品牌，材質，毫不相干，但組合在一起可以發揮作用。信封屬於「超市」這個域，郵票屬於「郵局」這個域。

有這樣一種需求，一個網站有3個展示頁面，每個頁面都有一個評論區，那這個評論區可以封裝為一個url，並用iframe嵌入到每個不同的頁面當中去，全局復用一套評論區的代碼，節省程式設計師，邏輯又好維護，只要一個人實現就可以了哦。

這就是iframe大概的用途，嵌入另一個頁面，兩個頁面功能可以解耦和，不依賴對方而存在。

再說跨域

還是上面貼出來那一段簡單代碼，我已經寫好了一個網頁，跟騰訊網一模一樣哦。

我動了壞心思，假設我有渠道能搞來流量，為啥我不在當前頁面當中替換掉騰訊網的廣告位置，而變成我的廣告呢，靠這些流量不就把錢掙了嘛，而且用戶也沒什麼感知，商業體驗兩不誤，有沒有任何的伺服器和流量的花銷。

於是我又開始改造代碼了，爭取能完成這個功能，分分鐘走向人生巔峰呢~

這裡在標籤中，我寫了三句JS代碼來描述整個流程（為了省去調試的時間，我用中文偽碼代替），如果我真寫了代碼，這個功能也會被瀏覽器拒絕的，會提示「Permission Denied」之類的操作，也就是你無法篡改騰訊網的頁面。

緊扣下小標題，當前「跨域」操作了。這種情況下瀏覽器直接拒絕掉了這種要求，否則baidu都能操作google頁面了，那網際網路世界就亂套了。

再再說同源策略

跨域被拒絕，其實是瀏覽器最底層的安全機制稱為「同源策略」，啥是同源呢，建議先複習下以前關於URL的文章把URL五馬分屍，只要協議，host，埠三個一樣，就是同源的，否則就是非同源的。同源類比為宗教會比較容易理解，伊斯蘭教信奉穆罕穆德，基督教信奉耶穌，這裡是一個特徵，同源要同時滿足三個特徵，舉例如下：

不同源，因為host不同，一個為a.com，另一個為b.com。

不同源，因為協議不同，一個為http，另一個為https。

不同源，因為埠號不同，一個為80，另一個為81。

同源就是同域，所以才有跨域的說法，也可以說成跨源，一個意思。不同源，證明大家信奉的不是一個宗教。那自然不能修改另一個頁面和拿到另一個頁面相關的內容。只有同源的頁面才可以相互訪問的，因為同源代表了自己本身嘛。

瀏覽器提供了原生的同源機制來保證不同域下的網站互相是隔離的，安全的，正是這種機制的存在，才保證了web生態下各個網站不亂套。

總結：

從前有一個大戶人家，大老爺牛逼，一輩子掙了不少錢，娶了五房姨太太，老大到老五各有各的心思，都惦記著大老爺那點錢兒，請問這種情況下，雖然大家住在一個大院裡面，名義上是一家人，但是各家財務都是自負盈虧、獨立結算，誰也不能把手伸到別人家去。

大老爺心知肚明光靠說是不管用的，必須要立家法，如果哪房姨太太手伸到別人家去了或者紅杏出牆了，那就沒收一切財產，並掃地出門，這是大老爺最後的底線。

大老爺就是瀏覽器，制定了一套規則（同源策略），五個姨太太（網頁或網站）誰也不能偷到別人的財產，也不能去別人家搗亂，五個姨太太生活的平平穩穩，誰也不打擾誰。

但日子長了，五位太太還是閒不住的，東家長西家短的開始有了攀比之心和壞心思，她們註定是要交流的

我平時都用大寶，你的化妝品是啥牌子的？你的LV是A貨吧，我只背GUCCL的快來看看我這50克拉的鑽石

但是老爺又有規矩，不讓她們交流，這咋辦呢？

這也引出了最後一個問題，瀏覽器天生是拒絕非同源的網頁溝通的，但是溝通需求無處不在。

比如上面舉了個評論區的例子，如果評論區是iframe，當有一個新評論的時候，主頁面要展示評論數 1，這個時候就產生了溝通的需求。一面是拒絕的，一面又要突破限制，似乎是矛盾的，你要玩兒欲擒故縱嘛，親~~~

其實不衝突的，同源策略最基本的保證了域之間的隔離，如果要產生溝通，是要用一些附加的方法來實現的，比如後臺的配合，兩個網站之間的配合。就像有些國家本來是法律上拒絕同性戀的，但是如果雙方願意，也不反對。

合理的用於跨域溝通的方法有以下幾種：

JSONPiframe document.domainiframe location.hashHTML5 PostMessage

重點說下第4種，這是新的Html5規範，規定了跨域問題的解決辦法，並且是異步的，大部分瀏覽器已經支持了，前面幾種有一點hack的感覺，而且有的方法有些局限性，重點推薦第4種。如果你不知道這幾種都是什麼方案，用度娘查下，好多博客已經講的比較清楚了，不墨跡了，有興趣可以深入了解下。

如果從事產品工作，能知道跨域和同源的基本概念，並且知道為什麼產生了這個問題，當前是什麼狀態，大概的解決方案是什麼，你就已經很優秀了，你是最棒的~

#專欄作家#

給產品經理講技術，微信公眾號（pm_teacher），人人都是產品經理專欄作家。資深程序猿，專注客戶端開發若干年，對前端、後臺技術略懂，熱衷於對新的科技領域的探索。

本文原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基於CC0協議

,