https://github.com/ufologist/bootup-sandbox
在当前页面中启动一个沙箱环境, 让所有代码跑在沙箱中
https://github.com/ufologist/bootup-sandbox
iframe inject sandbox
Last synced: about 1 year ago
JSON representation
在当前页面中启动一个沙箱环境, 让所有代码跑在沙箱中
- Host: GitHub
- URL: https://github.com/ufologist/bootup-sandbox
- Owner: ufologist
- License: mit
- Created: 2019-03-23T07:20:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:22:35.000Z (over 3 years ago)
- Last Synced: 2025-03-26T10:52:19.863Z (over 1 year ago)
- Topics: iframe, inject, sandbox
- Language: JavaScript
- Homepage:
- Size: 185 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# bootup-sandbox
[![NPM version][npm-image]][npm-url] [![Build Status][ci-status-image]][ci-status-url] [![Coverage Status][coverage-status-image]][coverage-status-url] [![Known Vulnerabilities][vulnerabilities-status-image]][vulnerabilities-status-url] [![changelog][changelog-image]][changelog-url] [![license][license-image]][license-url]
[vulnerabilities-status-image]: https://snyk.io/test/npm/bootup-sandbox/badge.svg
[vulnerabilities-status-url]: https://snyk.io/test/npm/bootup-sandbox
[ci-status-image]: https://travis-ci.org/ufologist/bootup-sandbox.svg?branch=master
[ci-status-url]: https://travis-ci.org/ufologist/bootup-sandbox
[coverage-status-image]: https://coveralls.io/repos/github/ufologist/bootup-sandbox/badge.svg?branch=master
[coverage-status-url]: https://coveralls.io/github/ufologist/bootup-sandbox
[npm-image]: https://img.shields.io/npm/v/bootup-sandbox.svg?style=flat-square
[npm-url]: https://npmjs.org/package/bootup-sandbox
[license-image]: https://img.shields.io/github/license/ufologist/bootup-sandbox.svg
[license-url]: https://github.com/ufologist/bootup-sandbox/blob/master/LICENSE
[changelog-image]: https://img.shields.io/badge/CHANGE-LOG-blue.svg?style=flat-square
[changelog-url]: https://github.com/ufologist/bootup-sandbox/blob/master/CHANGELOG.md
[](https://npmjs.com/package/bootup-sandbox)
在当前页面中启动一个沙箱环境, 让所有代码跑在沙箱中
## 原理
初衷: 在 PC 端页面中接入第三方的 IM 组件, 为了避免接入时可能存在的冲突
* 在当前页面中插入一个空的 `` 元素
* 作为独立的运行环境, 与当前页面隔离开(特别适合作为第三方的集成方案)
* 避免与当前页面的 `CSS`/`JS` 冲突
* 将 `JS` 注入到 `` 元素中执行
* 动态创建 `` 元素插入到 `<iframe>` 中
灵感来源[反击爬虫，前端工程师的脑洞可以有多大？](https://imweb.io/topic/595b7161d6ca6b4f0ac71f05), 感谢网易云音乐的 FE 们
> iframe异步加载式
>
> 例子：[网易云音乐](https://music.163.com/)
>
> 网易云音乐页面一打开，html源码里几乎只有一个iframe，并且它的src是空白的：`about:blank`。接着js开始运行，把整个页面的框架异步塞到了iframe里面…
## Example
```javascript
import BootupSandbox from 'bootup-sandbox';
var sandbox = new BootupSandbox();
sandbox.injectScript('window.foo = "bar"', function() {
console.log(sandbox.window.foo);
});
```
## APIDoc
* [ESDoc](https://doc.esdoc.org/github.com/ufologist/bootup-sandbox/)
* 兼容 IE9+
* `Object.defineProperty`
* `script.onload`
* `postMessage`
* `addEventListener`
## 其他思路
* [iframe-script](https://github.com/alexgorbatchev/iframe-script)
* [create-iframe](https://github.com/sethvincent/create-iframe)
* [iframe-sandbox](https://github.com/kumavis/iframe-sandbox)
* [jsonp-sandbox](https://github.com/aui/jsonp-sandbox)