内容安全策略

如果您对内容安全策略(CSP)不熟悉,内容安全策略简介(英文)是一个很好的起点,它更广泛地包含了以网络平台的角度看待 CSP 的内容,而 Chrome 应用的 CSP 并没有那么灵活。您还应该阅读 Chrome 扩展程序的内容安全策略,这是 Chrome 应用 CSP 的基础。为了简明起见,我们不会在这里重复同样的内容。

CSP 是用来避免跨站脚本问题的策略,而我们都知道跨站脚本的危害。我们不准备使您信服 CSP 是既温柔又模糊的新策略,这将会引入一些额外工作,您只需要了解如何以不同的方式进行基本任务。

该文档的目的是准确地告诉您用于 Chrome 应用的 CSP 是怎样的,为了遵循它您需要做的事情以及您如何以遵循 CSP 的方式继续做那些基本任务。

用于 Chrome 应用的 CSP 是怎样的?

用于 Chrome 应用的内容安全策略限制您做如下事情:

  • 您不能在 Chrome 应用中使用内嵌脚本,这些限制既禁止了 <script> 块,也禁止了事件处理器(<button onclick="...">)。
  • 您不能在您的应用文件中引用任何外部资源(除了视频与音频),您也不能在 iframe 中嵌入外部资源。
  • 您不能使用字符串到 JavaScript 的方法,例如 eval()new Function()

这些是通过如下所示的策略值来实现的:

default-src 'self';
connect-src *;
style-src 'self' data: chrome-extension-resource: 'unsafe-inline';
img-src 'self' data: chrome-extension-resource:;
frame-src 'self' data: chrome-extension-resource:;
font-src 'self' data: chrome-extension-resource:;
media-src *;

您的 Chrome 应用只能引用您的应用内的脚本与对象,除了媒体文件(应用可以引用包之外的视频与音频)。Chrome 扩展程序可以让您放松默认的内容安全策略,而 Chrome 应用不行。

如何遵循 CSP(内容安全策略)

所有 JavaScript 以及所有资源都应该来自本地(将所有内容包装在您的 Chrome 应用中)。

“可是接下来如何……?”

很有可能您使用模板库,而其中的很大一部分不能在 CSP 的限制下工作。您可能也希望在您的应用中访问外部资源(外部图像、来自网站的内容)。

使用模板库

使用提供预编译模板的库,那么您就不用担心任何问题。您仍然可以使用不提供预编译功能的库,但是这需要您做一些额外工作,并且还有一些限制。

您将需要使用沙盒功能将您需要 eval 的所有内容隔离出来,沙盒功能解除了您指定的内容的 CSP 限制。如果您希望在您的 Chrome 应用中使用强大的 Chrome API,经过沙盒屏蔽的内容不能直接与这些 API 交互(参见用沙盒保护本地内容)。

访问远程资源

您可以通过 XMLHttpRequest 获取远程资源,并通过 blob:data:filesystem: URL 访问它们(参见引用外部资源)。

视频与音频可以直接从远程服务中加载,因为当离线或连接状况不佳时它们有良好的应变行为。

嵌入网上的内容

您不能使用 iframe,而应该使用对象标签调用外部 URL(参见嵌入外部网页)。