來源 | 編程技術(shù)宇宙

責編 | 王曉曼

封圖 | CSDN下載自視覺中國

瀏覽器基本原理

我叫小風，是Windows帝國一個普通的上班族。

今天，我入職了一家瀏覽器公司，公司的主營業(yè)務(wù)是為人類提供Internet上網(wǎng)服務(wù)，我的崗位是負責執(zhí)行JavaScript代碼。

上午的晨會上，認識了負責網(wǎng)絡(luò)連接的老白，所有網(wǎng)絡(luò)請求都得找他幫忙，還有負責存儲管理的小黑，什么Cookie，LocalStorage，SessionStorage之類的都歸他管。哦，差點忘了，還有一個妹子小雪，她負責網(wǎng)頁渲染。

隨后主管安排了我的工作：老白從網(wǎng)絡(luò)取回網(wǎng)頁之后交給小雪來解析渲染，遇到網(wǎng)頁中的JavaScript代碼的時候，就由我來處理執(zhí)行這些代碼。

聽完主管的安排，我心里美滋滋，因為工作上需要密切配合，主管把我和小雪妹子的工位安排在了一起，想想都開心^_^||

坐下不久，我主動和小雪聊了起來。

“小雪，你平時工作都做些什么啊？”

小雪轉(zhuǎn)過身來，“我呀，就負責把老白給我的HTML文件進行解析，構(gòu)建DOM樹，然后再拿到CSS文件，構(gòu)建CSSOM樹，最后把網(wǎng)頁給畫出來”

我似懂非懂的點了點頭，正想繼續(xù)找話題，這時，老白過來了。

“小雪，來活了，這是剛剛拿到的網(wǎng)頁文件，快處理一下”

小雪轉(zhuǎn)過身去開始忙碌了起來，不一會兒，她就停下來說到：“小風哥，有?<script>?標簽了，該你上了”

看來該是我露一手的機會了，我拿到?<script>?中的代碼，開始忙活起來，很快就完成了，繼續(xù)交給小雪完成下面的工作。

就這樣你來我往了幾個回合，我有些嫌麻煩：“小雪，要不你先一次處理完，我最后再來統(tǒng)一執(zhí)行所有的?<script>?標簽中的代碼，這樣不是省事一點嘛”

“那可不行，你在執(zhí)行JavaScript的時候有可能會去修改我構(gòu)建的DOM樹的內(nèi)容，咱倆必須按順序來，不然會出亂子的”，小雪一本正經(jīng)的說到。

沒辦法，只好聽她的。

就這樣，我們一直配合的有條不紊，還時不時去找老白發(fā)送下數(shù)據(jù)，找小黑索要Cookie，很快就和大家混熟了。就這樣過了幾天，沒想到平靜的工作起了波瀾······

跨域禁止

這天我拿到了一段代碼，需要去請求一段數(shù)據(jù)，老規(guī)矩，我準備好了請求參數(shù)找到老白，準備讓他給我發(fā)出去。

沒想到老白一看大驚：“這是一個跨域請求啊，不能發(fā)出去！”

我愣了一下，“跨域請求？什么鬼”

老白指著我給的請求參數(shù)說到：“你看你給的這個請求URL，和你現(xiàn)在處理的這個網(wǎng)頁URL，不是一家人啊，域名不一樣”

“你管人家是不是一家人，發(fā)出去不就得了，快點，我還等著要呢”

“不行，知道你這個崗位之前那位怎么走的不？就是因為他在一個山寨網(wǎng)銀網(wǎng)站里面執(zhí)行JavaScript的時候向真正的銀行網(wǎng)站發(fā)起了轉(zhuǎn)賬請求，把人家的錢給搞丟了。就因為這個被老板開了，我要不是平日里跟老板走得近，說不定也要連坐。”

當時我的表情是這樣的：

聽了老白的話，我嚇得不輕，差點飯碗就不保了，不過我心里還是有一些疑問。

“老白，為什么真正的銀行網(wǎng)站會信任這個山寨網(wǎng)站的請求呢？”

“因為這人之前剛好也打開了真實的銀行網(wǎng)站，還設(shè)置了Cookie讓小黑保存著。這后面山寨網(wǎng)站的請求發(fā)出去時，Cookie也一并帶上了，網(wǎng)站那端還以為是正常的請求呢，這不就遭了嗎。這種攻擊方式被叫做CSRF，跨站請求偽造”，老白說到。

“那后來呢？后來怎么樣了？”，我繼續(xù)問到。

“后來，后來就把那小子炒掉了啊，這不才給你騰了個坑嗎！不過公司為了防止以后此類事情再次發(fā)生，就制定了一個禁止跨域請求的規(guī)定！”

老白一邊說，一邊給我講了起來什么是禁止跨域請求。

我這才知道，原來請求的目標URL和所在網(wǎng)頁的URL的協(xié)議、域名、端口有一個不同，就算是跨域了。

今天幸好有老白，要不然我好不容易得來的工作就要丟了。告別了老白，回到工位，我拋了一個禁止跨域請求的錯誤就沒管了。

不過，沒過多久，公司就收到了很多投訴，說我們打開的網(wǎng)頁排版格式全部錯亂了，有時候甚至連圖片都加載不出來。

最后追責到了小雪妹子這里，小雪很委屈的說到：“這不能怪我啊，他們好多網(wǎng)頁都引用了外部的css和js文件，尤其那個叫jQuery的最多。但是每次找到老白要這些文件，老白都以公司的禁止跨域請求的規(guī)定拒絕給我，我也沒有辦法啊”

沒辦法，公司只好對跨域請求的規(guī)定作了一輪修訂，規(guī)定了以后通過HTML標簽引入外部文件的時候予以放行，具體來說有：

• <img>：引入外部圖片

• <link>：引入外部css

• <script>：引入外部javascript

• ......

規(guī)則修訂后，投訴總算變少了，渲染的網(wǎng)頁也逐漸恢復了正常。

跨域：JSONP

然而太平日子沒過多久，投訴又多了起來。我一打聽才知道，原來現(xiàn)在開始流行什么前后端分離技術(shù)，數(shù)據(jù)和展示解耦，數(shù)據(jù)不再直接放在網(wǎng)頁文件里，而是需要單獨通過JavaScript去從服務(wù)器拿回來動態(tài)展示。

問題出在這些網(wǎng)站的前端網(wǎng)頁和業(yè)務(wù)數(shù)據(jù)接口服務(wù)器常常不在一起，分屬不同的域名或者使用不同的端口，違反了我們的跨域禁令，導致數(shù)據(jù)請求不到，頁面經(jīng)常一片空白，沒有數(shù)據(jù)。

領(lǐng)導為這事兒左右為難，既想盡快處理這些投訴，又不想放棄安全原則放開這些跨域的請求。

就在這時，經(jīng)驗老道的老白獻了一策：“既然規(guī)則中允許從外部JS文件，我們何不就利用它來實現(xiàn)外部接口的請求呢？”

我們幾個都滿臉問號，不解其意。老白接著說到：“我畫個圖你們就明白了”

我看著老白畫的圖，才明白他說的什么意思，“老白，好計策啊，利用規(guī)則中對<script>標簽請求的放行將請求發(fā)出去，然后讓服務(wù)器返回經(jīng)過callback函數(shù)包裝的JS代碼，最后實現(xiàn)數(shù)據(jù)的加載！”

“小風你很聰明哦”，老白得意的點點頭。

“不過人家服務(wù)器憑什么返回你需要的格式？”，小雪問到。

老白撓了撓頭，“額，這個嘛，就需要服務(wù)器那邊配合咱們一下啦”

“你這個好像只能支持GET請求吧，遇到POST、PUT、DELETE這些請求咋辦呢？”，我也提了一個問題。

老白的臉一下就變色了，“這個，這個，好像是有這個問題，不過先湊合用著嘛，他們天天投訴你們不嫌煩嘛”

經(jīng)過討論，我們還是打算把這套方案先推出去，因為需要這些網(wǎng)站后臺的配合，他們大部分都不太情愿，不過迫于沒有其他方案，在我們的游說之下還是勉強同意了。

為了方便推廣，我們還給這門技術(shù)取了一個名字：JSONP，就是JSON with Padding的意思。

跨域：CORS

漸漸地，投訴變少了，不過奇怪的是，公司的上網(wǎng)業(yè)務(wù)也變少了。一打聽才知道，人類都不用我們了，用上了隔壁的Chrome瀏覽器。

負責打探消息的老白回來了，“不好了，咱們的JSONP技術(shù)大家都不用了，轉(zhuǎn)投隔壁Chrome瀏覽器的CORS技術(shù)了”

領(lǐng)導一聽急了，“這是啥技術(shù)，能比我們的JSONP還好？”

老白激動的說到，“是啊，領(lǐng)導，這CORS全稱叫跨域資源共享(Cross-origin resource sharing)，不像咱們那樣投機取巧實現(xiàn)，走得是正規(guī)路子，而且還解決了只支持GET請求的問題，什么請求都能發(fā)”

“你快說說，他們到底怎么搞的？”

老白來到畫板前，開始畫起圖來，一邊畫一邊給大家講解：“他們在正式的跨域請求之前，先發(fā)送了一個OPTIONS請求去詢問服務(wù)器是否允許接下來的跨域請求”

“OPTIONS？你要不說我都忘記HTTP協(xié)議里還有這么一種請求了”，我笑著說道。

“這怎么個詢問法呢？”，領(lǐng)導鄒著眉頭問。

老白繼續(xù)說到，“他們和那些網(wǎng)站服務(wù)器商定了一下，在OPTIONS請求里新增了幾個字段：”

• Origin：發(fā)起請求原來的域

• Access-Control-Request-Method：將要發(fā)起的跨域請求方式（GET/PUT/POST/DELETE/······）

• Access-Control-Request-Headers：將要發(fā)起的跨域請求中包含的請求頭字段

“服務(wù)器在響應(yīng)字段中來表明是否允許這個跨域請求，瀏覽器收到后檢查如果不符合要求，就拒絕后面的請求”

• Access-Control-Allow-Origin：允許哪些域來訪問（*表示允許所有域的請求）

• Access-Control-Allow-Methods：允許哪些請求方式

• Access-Control-Allow-Headers：允許哪些請求頭字段

• Access-Control-Allow-Credentials：是否允許攜帶Cookie

老白說完，圖也畫完了：

“每次都要發(fā)起詢問，好費事哦”，小雪看著圖說到。

老白搖頭說到：“唉，小雪說到點上了，為了避免每次都要詢問，他們還做了兩個重要的優(yōu)化呢”

見我們都伸直了脖子等待答案，老白緩了緩才繼續(xù)說到：“第一，如果是一個簡單請求，那就直接發(fā)起請求，只需在請求中加入Origin字段表明自己來源，在響應(yīng)中檢查Access-Control-Allow-Origin，如果不符合要求就報錯，不需要再單獨詢問了”

“那什么是簡單請求呢？”，我問到。

“簡單請求就是請求方式屬于HEAD、GET、POST三者之一，請求頭只有下面這些，不符合要求的就是非簡單請求，就得詢問了”

• Accept

• Accept-Language

• Content-Language

• Last-Event-ID

• Content-Type：(application/x-www-form-urlencoded、multipart/form-data、text/plain)

“那第二個優(yōu)化又是什么呢？”

“前面的服務(wù)器響應(yīng)字段中我少說了一個，還有一個Access-Control-Max-Age，它表明了這個詢問結(jié)果的有效期，后面瀏覽器在有效期內(nèi)也可以不必再次詢問”

聽完老白的講解，大家都紛紛點贊，這比我們的JSONP方式不知道高到哪里去了。

領(lǐng)導當即決定咱們也要支持這種跨域方式，盡快減少公司的損失。

我們幾個趕緊行動，加了幾天班總算把這套方案給實現(xiàn)了。功夫不負有心人，咱們的業(yè)務(wù)又慢慢有了起色。

未完待續(xù)······

彩蛋：

早上，我剛到公司，小雪妹子就轉(zhuǎn)過頭告訴我：“風哥，主管讓你去趟他的辦公室，他好像不太高興，你當心點”

“你知道是什么事情嗎？”

“我也不太清楚，只聽說你執(zhí)行了什么錯誤的JavaScript代碼”

我心里一緊，感覺大事不妙

預知后事如何，請聽下回分解……

推薦閱讀

• ? 沒錯，你離分布式搜索只差一個Elasticsearch入門！
  

• Python開發(fā)之：Django基于Docker實現(xiàn)Mysql數(shù)據(jù)庫讀寫分離、集群、主從同步詳解 | 原力計劃
  

• 全球Python調(diào)查報告：Python 2正在消亡，PyCharm比VS Code更受歡迎
  

• 無代碼來了，還要程序員嗎？

• 再見，Eclipse | 原力計劃

• 區(qū)塊鏈共識算法總結(jié) | 原力計劃

真香，朕在看了！

總結(jié)

以上是生活随笔為你收集整理的因为一个跨域请求，我差点丢了饭碗的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。