Narcoleptic Pasta Manufacturer
    Wondering what’s next for npm?Check out our public roadmap! »

    bootup-sandbox

    0.0.4 • Public • Published

    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

    其他思路

    Install

    npm i bootup-sandbox

    DownloadsWeekly Downloads

    0

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    27.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar