Chrome 的扩展程序系统会强制执行相当严格的默认内容安全政策 (CSP)。
政策限制非常简单：脚本必须移出内嵌状态，放入单独的 JavaScript 文件中；内嵌事件处理程序必须转换为使用 addEventListener；并且 eval() 已停用。
不过，我们认识到，许多库使用 eval() 和 eval 类结构（例如 new Function()）来优化性能并简化表达。模板库尤其容易出现这种实现方式。虽然有些框架（例如 Angular.js）开箱即支持 CSP，但许多热门框架尚未更新为与扩展程序的 eval 无扩展程序世界兼容的机制。因此，移除对该功能的支持对开发者来说比预期更成问题。
本文档介绍了沙盒化，这是一种安全机制，可让您在项目中包含这些库，同时不会影响安全性。
为什么要使用沙盒？
eval 在扩展程序中是危险的，因为其执行的代码可以访问扩展程序的高权限环境中的所有内容。许多强大的 browser.* API 可能会严重影响用户的安全和隐私；简单的数据渗漏只是我们最不担心的问题。
提供的解决方案是一个沙盒，eval 可以在其中执行代码，而无需访问扩展程序的数据或扩展程序的高价值 API。没有数据、没有 API，没问题。
为此，我们将扩展程序软件包中的特定 HTML 文件列为沙盒文件。每当加载沙盒化网页时，该网页都会移至唯一来源，并且会被拒绝访问 browser.* API。如果我们通过 iframe 将此沙盒网页加载到扩展程序中，就可以向其传递消息，让它以某种方式对这些消息采取行动，并等待它向我们返回结果。这种简单的消息传递机制为我们提供了在扩展程序的工作流程中安全包含 eval 驱动的代码所需的一切。
创建和使用沙盒
如果您想直接开始编写代码，请获取沙盒示例扩展程序并开始使用。这是一个基于 Handlebars 模板库构建的小型消息传递 API 的有效示例，应该能为您提供入门所需的一切。如果您想了解更多说明，不妨在此处一起浏览该示例。
列出清单中的文件
应在沙盒中运行的每个文件都必须通过添加 sandbox 属性在扩展程序清单中列出。这是一个关键步骤，但很容易忘记，因此请仔细检查清单中是否列出了您的沙盒文件。在此示例中，我们将巧妙命名为“sandbox.html”的文件置于沙盒中。清单条目如下所示：
{
...,
"sandbox": {
"pages": ["sandbox.html"]
},
...
}
加载沙盒文件
为了对沙盒文件执行一些有趣的操作，我们需要在扩展程序代码可以寻址的上下文中加载该文件。在此示例中，sandbox.html 已使用 iframe 加载到扩展程序页面中。网页的 JavaScript 文件包含以下代码：每当浏览器操作被点击时，通过在网页上查找 iframe 并对其 contentWindow 调用 postMessage()，将消息发送到沙盒中。该消息是一个包含三个属性的对象：context、templateName 和 command。我们稍后将深入探讨 context 和 command。
service-worker.js：
browser.action.onClicked.addListener(() => {
browser.tabs.create({
url: 'mainpage.html'
});
console.log('Opened a tab with a sandboxed page!');
});
extension-page.js：
let counter = 0;
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('reset').addEventListener('click', function () {
counter = 0;
document.querySelector('#result').innerHTML = '';
});
document.getElementById('sendMessage').addEventListener('click', function () {
counter++;
let message = {
command: 'render',
templateName: 'sample-template-' + counter,
context: { counter: counter }
};
document.getElementById('theFrame').contentWindow.postMessage(message, '*');
});
执行危险操作
加载 sandbox.html 时，它会加载 Handlebars 库，并以 Handlebars 建议的方式创建和编译内嵌模板：
extension-page.html：
<!DOCTYPE html>
<html>
<head>
<script src="mainpage.js"></script>
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div id="buttons">
<button id="sendMessage">Click me</button>
<button id="reset">Reset counter</button>
</div>
<div id="result"></div>
<iframe id="theFrame" src="sandbox.html" style="display: none"></iframe>
</body>
</html>
sandbox.html:
<script id="sample-template-1" type="text/x-handlebars-template">
<div class='entry'>
<h1>Hello</h1>
<p>This is a Handlebar template compiled inside a hidden sandboxed
iframe.</p>
<p>The counter parameter from postMessage() (outer frame) is:
</p>
</div>
</script>
<script id="sample-template-2" type="text/x-handlebars-template">
<div class='entry'>
<h1>Welcome back</h1>
<p>This is another Handlebar template compiled inside a hidden sandboxed
iframe.</p>
<p>The counter parameter from postMessage() (outer frame) is:
</p>
</div>
</script>
这不会失败！即使 Handlebars.compile 最终使用 new Function，一切也会按预期运行，并且我们最终会在 templates['hello'] 中获得已编译的模板。
将结果传递回去
我们将通过设置接受来自扩展程序页面的命令的消息监听器，使此模板可供使用。我们将使用传入的 command 来确定应执行的操作（您可以想象一下，除了简单地渲染之外，还可以执行更多操作；也许可以创建模板？（或许以某种方式管理它们？），然后将 context 直接传递到模板中以进行渲染。呈现的 HTML 将传递回扩展程序页面，以便扩展程序稍后对其进行有用的处理：
<script>
const templatesElements = document.querySelectorAll(
"script[type='text/x-handlebars-template']"
);
let templates = {},
source,
name;
// precompile all templates in this page
for (let i = 0; i < templatesElements.length; i++) {
source = templatesElements[i].innerHTML;
name = templatesElements[i].id;
templates[name] = Handlebars.compile(source);
}
// Set up message event handler:
window.addEventListener('message', function (event) {
const command = event.data.command;
const template = templates[event.data.templateName];
let result = 'invalid request';
// if we don't know the templateName requested, return an error message
if (template) {
switch (command) {
case 'render':
result = template(event.data.context);
break;
// you could even do dynamic compilation, by accepting a command
// to compile a new template instead of using static ones, for example:
// case 'new':
// template = Handlebars.compile(event.data.templateSource);
// result = template(event.data.context);
// break;
}
} else {
result = 'Unknown template: ' + event.data.templateName;
}
event.source.postMessage({ result: result }, event.origin);
});
</script>
回到扩展程序页面，我们会收到此消息，并使用已传递的 html 数据执行一些有趣的操作。在本例中，我们将通过通知回显该 HTML，但完全可以安全地将此 HTML 用作扩展程序界面的一部分。通过 innerHTML 插入它不会带来严重的安全风险，因为我们信任在沙盒中呈现的内容。
此机制可简化模板化，但当然不仅限于模板化。任何在严格的内容安全政策下无法正常运行的代码都可以进行沙盒处理；事实上，对能够正确运行的扩展程序组件进行沙盒处理通常很有用，这样可以将程序的每个部分限制为执行所需的最少权限集。Google I/O 2012 大会上的编写安全的 Web 应用和 Chrome 扩展程序演示很好地展示了这些技术的实际应用，值得您花 56 分钟的时间观看。