先說(shuō)一下，這絕對(duì)不是一個(gè)安全的選擇！
而且，只適合在開(kāi)發(fā)過(guò)程中使用
好了，但是在開(kāi)發(fā)過(guò)程中難免會(huì)請(qǐng)求到跨域的資源，可能是個(gè)測(cè)試數(shù)據(jù)，可能是個(gè)接口，這是因?yàn)闉g覽器的同源策略阻止了你的請(qǐng)求結(jié)果
同源策略是一個(gè)重要的安全策略，它用于限制一個(gè)origin的文檔或者它加載的腳本如何能與另一個(gè)源的資源進(jìn)行交互。它能幫助阻隔惡意文檔，減少可能被攻擊的媒介。
同源的定義
如果兩個(gè) URL 的 protocol、port (en-US) (如果有指定的話)和 host 都相同的話，則這兩個(gè) URL 是同源。這個(gè)方案也被稱為“協(xié)議/主機(jī)/端口元組”，或者直接是 “元組”。（“元組” 是指一組項(xiàng)目構(gòu)成的整體，雙重/三重/四重/五重/等的通用形式）。
這個(gè)方案的優(yōu)點(diǎn)就是快，適合開(kāi)發(fā)，加載一個(gè)chrome拓展插件去劫持ajax，利用background.js發(fā)送請(qǐng)求繞過(guò)同源策略。
項(xiàng)目地址：https://gitee.com/boboanzuiniubi/ext-xhr-proxy
先看看效果
實(shí)現(xiàn)的原理
在 background.js 里發(fā)送的請(qǐng)求是不會(huì)跨域的
加載了拓展插件，會(huì)有一段個(gè) content_script 的 script 注入到你的頁(yè)面(content_script 與網(wǎng)站的js是隔離開(kāi)的，他們共享的只有document，他相對(duì)安全)，這個(gè) script 中包含一些 chrome 瀏覽器的 api，content_script 在這里利用瀏覽器的消息 api 作為網(wǎng)站與 background 間的消息接口。
content_script 還有一個(gè)另外的作用，是他用 document 注入了一個(gè) script 標(biāo)簽（這里稱為 inject_script )，注入的 inject_script 并沒(méi)有與網(wǎng)站隔離，它可以訪問(wèn)你任何變量，這個(gè)項(xiàng)目就修改了 XMLHttpRequest 構(gòu)造函數(shù)，使他返回一個(gè) xhr 的代理，使所有對(duì)于xhr對(duì)象的操作（open/send...）都被 xhrProxy 攔截到了，實(shí)現(xiàn)了 ajax 劫持
當(dāng) xhrProxy 對(duì)象攔截到需要被代理的請(qǐng)求時(shí)，會(huì)通過(guò) postMessage 向 content_script 發(fā)送消息 content_script 則會(huì)把消息轉(zhuǎn)發(fā)到 background.js 在 background 中創(chuàng)建一個(gè) xhr 對(duì)象發(fā)送真正的請(qǐng)求。在 response 后，再通過(guò) content_script 原路返回 postMessage 到活動(dòng)頁(yè)面上 更新 xhrProxy 的狀態(tài)實(shí)現(xiàn)代理請(qǐng)求
總結(jié)
先感謝一下 小茗同學(xué)大佬的文章 少走彎路發(fā)家致富。
用 extention 處理跨域在開(kāi)發(fā)過(guò)程中是十分省時(shí)間的，畢竟加載一個(gè) chrome 插件比起一個(gè)代理服務(wù)要快得多。
不過(guò)也想給大家提醒，我能使用 chrome 插件劫持 ajax 請(qǐng)求，我就能把請(qǐng)求轉(zhuǎn)發(fā)給我自己的服務(wù)器，是很不安全的，并且 inject_script 就在往頁(yè)面注入 js ，當(dāng)你使用一個(gè)非官方的插件時(shí)，你不清楚他到底做了什么，比如你在瀏覽 steam 時(shí)正好開(kāi)著一個(gè)不知名插件，那么你的 steam 賬號(hào) 密碼 token 登錄狀態(tài)啥的完全可能泄露給別人了。
