在许多 Web 应用程序中，我们需要允许用户提交自己的 JavaScript 代码，但是这也给应用程序带来了潜在的安全隐患。如果用户提交了恶意代码，它可以窃取用户的信息或者破坏网站的功能和安全性。
为了解决这个问题，我们需要使用一种技术来安全地沙箱化和执行用户提交的 JavaScript。本文将介绍如何使用 JavaScript 的内置 API 来实现这一目标。
使用 iframe 元素
一种常见的方法是使用 iframe 元素作为沙箱容器。通过创建一个新的 iframe 元素，我们可以在其中加载用户提交的代码，并将其运行在一个完全独立的 JavaScript 执行环境中。这样做可以防止用户提交的代码与主页面的代码产生交互，并保护主页面的安全性。
以下是一个简单的示例代码：
--------- -----
------
------
-------------- ---------------
-------
------
----------- ------------
--------- -----------------------------
------- ----------------------- -------------
------- ----------------------
--------
-------- --------- -
--- ---- - --------------------------------------
--- ------- - -----------------------------------
--- ------------ - ----------------------
------------------------
-
---------
-------
-------在上面的示例代码中，我们首先创建了一个文本框和一个按钮，用于让用户输入和运行 JavaScript 代码。然后，我们创建了一个空的 iframe 元素作为沙箱容器，并通过 contentWindow 属性获取其内部窗口对象。最后，我们使用 eval() 函数来执行用户提交的代码。
请注意，使用 eval() 函数可能会存在一些安全隐患，因为它会直接执行字符串中的代码。为了避免这种情况，我们可以使用 Function() 构造函数 来动态地创建一个新的函数，并将用户提交的代码作为函数体。这样做可以降低安全风险，并提高应用程序的可靠性和安全性。
使用 Worker API
除了使用 iframe 元素外，我们还可以使用 Worker API 来实现安全的沙箱化和执行用户提交的 JavaScript。Worker API 允许我们在后台线程中运行 JavaScript 代码，并与主线程进行通信。
以下是一个简单的示例代码：
--------- -----
------
------
-------------- ---------------
-------
------
----------- ------------
--------- -----------------------------
------- ----------------------- -------------
--------
-------- --------- -
--- ---- - --------------------------------------
--- ------ - --- ---------------------
-------------------------
---------------- - --------------- -
------------------------
--
-
---------
-------
-------在上面的示例代码中，我们创建了一个文本框和一个按钮，用于让用户输入和运行 JavaScript 代码。然后，我们创建了一个新的 Worker 对象，并将用户提交的代码作为参数传递给它。最后，我们使用 postMessage() 方法向 Worker 发送消息，并使用 onmessage 事件处理程序来接收从 Worker 返回的结果。
请注意，使用 Worker API 可能会存在一些安全隐患，因为它允许 JavaScript 代码在后台线程中运行，并且可以与主线程进行通信。为了避免这种情况，我们应该
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27877