主页面

--- theme: cyanosis highlight: atom-one-dark --- 去年的面试了，最近复盘了一下，发现菜的一批，有些问题一下子就答出来了，现在答的话，那时候还在瞎鸡儿答我也不知道答的什么。。。。在 JavaScript 中，沙箱（sandbox）是一个安全机制，用于隔离运行代码，以防止代码对其它部分的应用程序或系统造成不必要的影响或安全风险。沙箱提供了一个受控环境，在这个环境中，代码可以被执行而不影响外部环境，从而保护用户数据和系统安全。在浏览器中，沙箱通常指的是浏览器为每个标签页提供的隔离环境。这种隔离保证了一个标签页中的 JavaScript 代码无法访问另一个标签页中的内容，除非两个页面遵循同源策略（即协议、域名和端口号都相同）或者通过 CORS（跨源资源共享）明确允许了跨源访问。网页 web 代码内容必须通过 IPC 通道才能与浏览器内核进程通信，通信过程会进行安全的检查。沙箱设计的目的是为了让不可信的代码运行在一定的环境中，从而限制这些代码访问隔离区之外的资源。 # js 中沙箱的使用场景有什么在 JavaScript 中，沙箱通常用于隔离和控制代码执行的环境，以确保代码运行在一个安全的、受限制的环境中，避免对主环境造成潜在的损害。 1. 执行第三方 js：当你有必要执行第三方 js 的时候，而这份 js 文件又不一定可信的时候； 2. 在线代码编辑器：相信大家都有使用过一些在线代码编辑器，而这些代码的执行，基本都会放置在沙箱中，防止对页面本身造成影响； 3. Web 应用安全: 在浏览器中运行来自不同来源的 JavaScript 代码时，沙箱可以限制这些代码的权限，防止恶意代码访问敏感资源或执行危险操作。 4. 插件和第三方脚本: 当 Web 应用需要加载和执行第三方插件或脚本时，通过沙箱可以限制这些脚本的访问权限，保护主应用的安全和数据。 5. jsonp：解析服务器所返回的 jsonp 请求时，如果不信任 jsonp 中的数据，可以通过创建沙箱的方式来解析获取数据； ## jsonp 通信机制 JSONP 的工作原理就是通过利用 ` ``` 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。第三方产生的响应为 json 数据的包装（故称之为 jsonp，即 json padding），形如： `callback({"name":"hax","gender":"Male"})` 这样浏览器会调用 callback 函数，并传递解析后 json 对象作为参数。本站脚本可在 callback 函数里处理所传入的数据。下面是如何通过创建沙箱环境来解析 JSONP 数据的基本思路： 1. 创建独立的 iframe 作为沙箱：通过在主页面中动态创建一个 iframe，可以为 JSONP 请求提供一个隔离的执行环境。这个 iframe 没有访问主页面 DOM 的权限，从而限制了其中执行的代码对主页面可能造成的影响。 2. 在 iframe 中发起 JSONP 请求：将 JSONP 请求的 ` ``` 我们再在 `index.js`，在 js 代码中，通过操作这个 iframe 的 contentWindow 属性来实现一个简单的沙箱环境。这里的思路是向 iframe 注入脚本并执行，这样执行的脚本就在 iframe 的独立环境中运行，与主页面隔离： ```js // index.js function createSandbox(callback) { const iframe = document.getElementById("sandbox"); if (!iframe) { return console.error("沙箱iframe未找到"); } // 确保iframe完全加载后再执行代码 iframe.onload = function () { const iframeWindow = iframe.contentWindow; // 在沙箱环境中定义一些安全的全局变量或函数，如果需要的话 iframeWindow.safeGlobalVar = { /* 安全的数据或方法 */ }; // 执行回调函数，传入沙箱的window对象，以便在其中执行代码 callback(iframeWindow); }; // 重新加载iframe以确保环境清洁 iframe.src = "about:blank"; } // 使用沙箱 createSandbox(function (sandboxWindow) { // 在沙箱环境中执行代码 sandboxWindow.eval('console.log("Hello from the sandbox!");'); }); ``` ![20240315110136](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a4f316d70884018a9884193c19d9dc5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1250\&h=292\&s=25447\&e=png\&b=2d2d2d) 在上面的这些代码中，createSandbox 函数接收一个回调函数作为参数，该回调函数会在 iframe 加载完成后执行。在回调函数中，我们可以通过 iframe 的 contentWindow 属性来访问并操作 iframe 内的全局对象，包括定义全局变量、函数或者通过 eval 执行一些 JavaScript 代码。但是这些也会带来一下限制： 1. script 脚本不能执行 2. 不能发送 ajax 请求 3. 不能使用本地存储，即 localStorage,cookie 等 4. 不能创建新的弹窗和 window 5. 不能发送表单 6. 不能加载额外插件比如 flash 等但是别担心，为了进一步提高安全性，HTML5 引入了 sandbox 属性，它可以限制 iframe 中代码的能力。sandbox 属性可以采用以下值： 1. allow-scripts: 允许执行脚本。 2. allow-same-origin: 允许与包含文档同源的文档交互。 3. allow-forms: 允许表单提交。 4. allow-popups: 允许弹窗，比如通过 window\.open 方法。 5. allow-top-navigation: 允许通过链接导航到顶级框架。使用 sandbox 属性的 iframe 示例： ```html ``` 接下来我们结合 postMessage API，将你需要执行的代码，和需要暴露的数据传递过去，然后和我们的 iframe 页面通信就行了。首先，在主页面中，我们需要获取 iframe 的引用并使用 postMessage 方法发送消息。消息可以是任何可序列化的对象。 ```html 主页面 ``` postMessage 的第一个参数是要发送的消息，第二个参数是接收消息页面的源（origin），这是一个安全特性，以确保消息只被发送到指定的来源页面。在 iframe 页面中，我们需要监听 message 事件来接收主页面发送过来的信息： ```html Document ``` 在使用 postMessage 进行通信时，始终要检查 event.origin，并且在发送消息时指定精确的目标 origin，这样可以防止潜在的安全问题。通过这种方式，即使在跨域的情况下，主页面与 iframe 或新窗口之间也能安全、有效地进行数据交换。 ![20240315220045](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0add67abec24ff2abe6ada544be3e3d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1822\&h=722\&s=205573\&e=png\&b=2a2a2a) # Web Workers 实现沙箱使用 Web Workers 作为沙箱的方法，通过动态创建一个 Blob 对象来包含你想在 Worker 中执行的 JavaScript 代码，然后使用这个 Blob 对象创建一个 Worker。这种方式的好处是它允许你动态地执行任意的 JavaScript 代码，同时确保这些代码在一个与主页面环境隔离的 Worker 中运行，提供了一种隔离执行代码的手段。 ```js function workerSandbox(appCode) { var blob = new Blob([appCode]); var appWorker = new Worker(window.URL.createObjectURL(blob)); } workerSandbox("const a = 1;console.log(a);"); // 输出1 console.log(a); // a not defined ``` 这种使用 Web Workers 实现沙箱的方法为在 Web 应用中隔离和执行 JavaScript 代码提供了一种有力的手段，特别适合那些需要保持 UI 响应性而又要执行复杂或潜在风险代码的场景。 # 参考资料 - [说说 JS 中的沙箱](https://juejin.cn/post/6844903954074058760) # 总结 JavaScript 的沙箱环境是一种隔离执行环境，允许运行和测试代码而不干扰主应用程序的状态或数据。它通过限制代码访问全局变量和函数，提供了一个安全的方式来执行不信任的代码，避免潜在的安全风险和数据泄露。沙箱环境对于保护应用程序免受恶意代码或不确定性代码影响至关重要。最后分享两个我的两个开源项目,它们分别是: - [前端脚手架 create-neat](https://github.com/xun082/react-cli) - [在线代码协同编辑器](https://github.com/xun082/online-cooperative-edit) 这两个项目都会一直维护的,如果你也喜欢,欢迎 star 🚗🚗🚗 如果你对开源项目感兴趣的，可以加我微信 yunmz777