How to safely run user-supplied Javascript code inside the browser?

在浏览器中安全地运行用户提供的JavaScript代码是一个非常重要的问题，因为如果处理不当，会导致安全漏洞，如跨站点脚本（XSS）攻击等。下面是一些可以采取的措施来确保安全性：

1. 使用沙箱环境

沙箱环境是一个受限制的执行环境，可以防止代码访问敏感的浏览器功能和用户数据。例如，可以使用iframe标签，并设置sandbox属性，这样可以限制其中的脚本只能执行有限的操作。

示例代码:

html
<iframe src="user-code.html" sandbox="allow-scripts"></iframe>

2. 内容安全策略（CSP）

通过设置内容安全策略，您可以限制浏览器加载哪些资源。例如，可以指定只允许加载来自特定源的脚本，或者完全禁止执行内联脚本和未授权的外部脚本。

示例:

http
Content-Security-Policy: script-src 'self' https://apis.example.com

3. 使用 Web Workers

Web Workers 提供一种方式来运行脚本在后台线程中，与主执行线程隔离开来。这意味着它们无法直接访问DOM，从而减少了脚本对页面的潜在危害。

示例:

javascript
var worker = new Worker('user-script.js');
worker.onmessage = function(e) {
  console.log('Message from Worker: ', e.data);
};
worker.postMessage('start');

4. 输入验证和清理

对于用户提供的任何输入，都要进行严格的验证和清理，以避免注入攻击。可以使用库如DOMPurify来清理HTML内容，确保其不包含任何可执行的脚本。

示例:

javascript
import DOMPurify from 'dompurify';
const cleanHTML = DOMPurify.sanitize(dirtyHTML);
document.getElementById('content').innerHTML = cleanHTML;

5. 合理设置 HTTP 头部

例如设置X-Content-Type-Options: nosniff可以防止浏览器尝试去“猜测”响应内容的MIME类型，这有助于防止基于MIME类型混淆的攻击。

示例:

http
X-Content-Type-Options: nosniff

通过实施这些策略，可以大大降低运行用户提供的JavaScript代码的风险。每种方法都有其适用场景，通常最安全的做法是结合多种策略来确保最高程度的安全。