iframe實(shí)現(xiàn)與父頁(yè)面跨域隔離的JavaScript 代碼沙箱
目錄
- 正文
- 1. iframe
- 2. data URL
- 3. 將 JavaScript 代碼變成 data URL
- 4. 如果需要獲取執(zhí)行結(jié)果的話，基于 postMessage 定制通信機(jī)制
正文
假如讓你實(shí)現(xiàn)一個(gè)在線的 JavaScript 代碼運(yùn)行環(huán)境，要求用戶代碼不能對(duì)頁(yè)面進(jìn)行修改，以避免潛在的安全問(wèn)題，你會(huì)怎么做？
使用 with？使用 proxy？OK ，都可以，但是這兩種方法都需要關(guān)注很多細(xì)節(jié)，否則用戶依舊有可乘之機(jī)，這樣一來(lái)你的實(shí)現(xiàn)里面就會(huì)有一個(gè)很長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)的操作黑名單。
除此之外，我們還可以專門(mén)部署一個(gè)頁(yè)面，將代碼提到服務(wù)端渲染成頁(yè)面，再通過(guò) iframe 去訪問(wèn)，如果 iframe 與父頁(yè)面之間是跨域的話可以達(dá)到很高的安全性——那么能不能不看后端的臉色，完全使用瀏覽器來(lái)實(shí)現(xiàn)類似的沙箱呢？
當(dāng)然可以——
1. iframe
對(duì)前端頁(yè)面而言，跨域是頁(yè)面與頁(yè)面之間的鴻溝，但這并不意味著我們必須重新打開(kāi)一個(gè)頁(yè)面來(lái)運(yùn)行新的代碼，因?yàn)槲覀兛梢允褂?<iframe> 標(biāo)簽：
<iframe src="www.xxxx.xxx"></iframe>
對(duì)于同域的 iframe ，我們可以直接通過(guò) .contentWindow 訪問(wèn)并操作它的全局對(duì)象，然后直接往里面執(zhí)行 JavaScript：
document.querySelector("iframe") .contentWindow .eval("alert("hello world!");");但是同域頁(yè)面的子頁(yè)面是可以與父頁(yè)面進(jìn)行互操作的，
2. data URL
你可能在一些頁(yè)面里見(jiàn)過(guò)小圖片不使用網(wǎng)絡(luò)鏈接，而是采用一個(gè) data:image/png;base64 xxxxxxx 風(fēng)格的 URL ，這種 URL 就是 data URL。
除了 data URL 之外你可能還見(jiàn)過(guò) blob:// 開(kāi)頭的 URL —— Object URL。不過(guò) Object URL 與當(dāng)前頁(yè)面是同域的，而 data URL 與當(dāng)前頁(yè)面是跨域的。所以我們可以在 iframe 使用 data URL 來(lái)進(jìn)行跨域隔離。
3. 將 JavaScript 代碼變成 data URL
我們可以直接將 JavaScript 片段變成 data:application/javascript, 的 URL ，但是這樣有一個(gè)問(wèn)題： iframe 打開(kāi)這樣的 URL 的時(shí)候，會(huì)顯示代碼原文而不是執(zhí)行代碼，這個(gè)行為其實(shí)和你直接在瀏覽器地址欄輸入 JS 的 URL 是一樣的。
所以我們需要將 JavaScript 代碼拼接到 html 里面，再變成 data URL ，然后交給 iframe 去加載：
const javaScriptFragment = `alert("hello world");`;const htmlFragment = `<!doctype html><html> <head> <meta chatset="utf-8" /> </head> <body> <script>${javaScriptFragment}</script> </body></html>`;const dataUrl = `data:text/html,${htmlFragment}`;// 注意，如果代碼片段中含有中文的話，需要使用 encodeURIFragment 轉(zhuǎn)義 htmlFragmentdocument.querySelector("iframe").src = dataUrl;4. 如果需要獲取執(zhí)行結(jié)果的話，基于 postMessage 定制通信機(jī)制
如果我們不但要做沙箱隔離，還被要求獲取運(yùn)行結(jié)果的話，則可以做一個(gè)通信機(jī)制，讓 iframe 獲取到用戶代碼執(zhí)行結(jié)果， iframe 與父頁(yè)面之間最好的跨域通信方法莫過(guò)于 postMessage。
除了獲取結(jié)果之外，還可以將通信機(jī)制進(jìn)一步擴(kuò)展成為 RPC ，這樣可以實(shí)時(shí)修改頁(yè)面里的代碼來(lái)查看效果，類似于 codepen 。
具體實(shí)現(xiàn)與主題不是強(qiáng)相關(guān)，這里就不寫(xiě)了，更多關(guān)于JavaScript iframe頁(yè)面跨域隔離的資料請(qǐng)關(guān)注其它相關(guān)文章！
網(wǎng)公網(wǎng)安備