Skip to content
在当前页面中启动一个沙箱环境, 让所有代码跑在沙箱中
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test
.esdoc.json
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
babel.config.js
package-lock.json
package.json
rollup.config.js

README.md

bootup-sandbox

NPM version Build Status Coverage Status Known Vulnerabilities changelog license

npm-image

在当前页面中启动一个沙箱环境, 让所有代码跑在沙箱中

原理

初衷: 在 PC 端页面中接入第三方的 IM 组件, 为了避免接入时可能存在的冲突

  • 在当前页面中插入一个空的 <iframe> 元素
    • 作为独立的运行环境, 与当前页面隔离开(特别适合作为第三方的集成方案)
    • 避免与当前页面的 CSS/JS 冲突
  • JS 注入到 <iframe> 元素中执行
    • 动态创建 <script> 元素插入到 <iframe>

灵感来源反击爬虫,前端工程师的脑洞可以有多大?, 感谢网易云音乐的 FE 们

iframe异步加载式

例子:网易云音乐

网易云音乐页面一打开,html源码里几乎只有一个iframe,并且它的src是空白的:about:blank。接着js开始运行,把整个页面的框架异步塞到了iframe里面…

music 163 com

Example

import BootupSandbox from 'bootup-sandbox';

var sandbox = new BootupSandbox();
sandbox.injectScript('window.foo = "bar"', function() {
    console.log(sandbox.window.foo);
});

APIDoc

  • ESDoc
  • 兼容 IE9+
    • Object.defineProperty
    • script.onload
    • postMessage
    • addEventListener

其他思路

You can’t perform that action at this time.