文档

外观

浏览器策略 ​

browser-policy 包系列（作为 Webapp 的一部分）允许您设置由较新浏览器执行的安全相关策略。这些策略有助于防止和缓解常见的攻击，例如跨站点脚本和点击劫持。

详细信息 ​

当您将 browser-policy 添加到您的应用程序时，您将获得 HTTP 标头 X-Frame-Options 和 Content-Security-Policy 的默认配置。X-Frame-Options 告诉浏览器哪些网站可以嵌入您的应用程序。您应该只允许受信任的网站嵌入您的应用程序，因为恶意网站可能会通过 点击劫持攻击 损害您的用户。 内容安全策略 告诉浏览器您的应用程序可以从哪里加载内容，这鼓励安全实践并减轻跨站点脚本攻击造成的损害。browser-policy 还提供函数供您配置这些策略，如果默认策略不合适。

如果您只想使用 Content-Security-Policy 或 X-Frame-Options 而不同时使用两者，您可以添加单独的包 browser-policy-content 或 browser-policy-framing 而不是 browser-policy。

对于大多数应用程序，我们建议您执行以下步骤

  • 将 browser-policy 添加到您的应用程序以启用起始策略。使用此起始策略，您的应用程序的客户端代码将只能从其自身来源加载内容（图像、脚本、字体等），但 XMLHttpRequests 和 WebSocket 连接可以转到任何来源。此外，您的应用程序的客户端代码将无法使用诸如 eval() 之类的将字符串转换为代码的函数。用户的浏览器将只允许您的应用程序被与您的应用程序具有相同来源的网页嵌入。
  • 您可以使用下面描述的函数来自定义策略。如果您的应用程序不需要任何内联 Javascript（例如内联 <script> 标记），我们建议您通过在服务器代码中调用 BrowserPolicy.content.disallowInlineScripts() 来修改策略。这将在加载您的应用程序时导致额外的一轮往返，但将通过禁用除从 script src 属性加载的脚本之外的所有脚本，从而有助于防止跨站点脚本攻击。

Meteor 在服务器启动时确定浏览器策略，因此您应该在服务器上的顶级应用程序代码或 Meteor.startup 中调用 BrowserPolicy 函数。BrowserPolicy 函数不能在客户端代码中使用。

用法 ​

框架选项 ​

默认情况下，如果您添加 browser-policy 或 browser-policy-framing，则仅允许与您的应用程序具有相同来源的网页嵌入您的应用程序。您可以使用以下函数来修改此策略。

BrowserPolicy.framing.disallow() ​

您的应用程序永远不会在框架或 iframe 内呈现。

BrowserPolicy.framing.restrictToOrigin(origin) ​

您的应用程序将仅在由 origin 加载的框架内呈现。您只能使用单个来源调用此函数一次，并且不能使用通配符或指定多个允许嵌入您的应用程序的来源。（这是 X-Frame-Options 标头的限制。）origin 的示例值包括 "http://example.com" 和 "https://foo.example.com"。此 X-Frame-Options 标头的值在 Chrome 或 Safari 中尚不受支持，并且在这些浏览器中将被忽略。如果您需要 Chrome 和/或 Safari 支持，或者需要允许多个域嵌入您的应用程序，您可以通过 BrowserPolicy.content.allowFrameAncestorsOrigin() 函数使用 frame-ancestors CSP 选项。

BrowserPolicy.framing.allowAll() ​

这将取消设置 X-Frame-Options 标头，以便任何网页都可以嵌入您的应用程序。

内容选项 ​

您可以使用本节中的函数来控制如何在您的站点上加载不同类型的內容。

您可以使用以下函数调整 Javascript 和 CSS 可以运行的位置的策略

BrowserPolicy.content.allowInlineScripts() ​

允许内联 <script> 标记、javascript: URL 和内联事件处理程序。默认策略已允许内联脚本。

BrowserPolicy.content.disallowInlineScripts() ​

禁止内联 Javascript。调用此函数会导致在页面加载时进行额外的一轮往返以检索通常是内联脚本标记一部分的 Meteor 运行时配置。

BrowserPolicy.content.allowEval() ​

允许使用诸如 eval() 之类的函数从字符串创建 Javascript 代码。

BrowserPolicy.content.disallowEval() ​

禁止 eval 和相关函数。注意：默认策略禁止 eval，尽管对于几乎所有 Meteor 应用程序，它都由 dynamic-imports 包启用

BrowserPolicy.content.allowInlineStyles() ​

允许内联样式标记和样式属性。默认策略已允许内联样式。

BrowserPolicy.content.disallowInlineStyles() ​

禁止内联 CSS。

最后，您可以配置各种类型的内容可以发出的允许请求的白名单。以下函数针对脚本、对象、图像、媒体、字体、框架、框架祖先、样式和连接等内容类型定义。

BrowserPolicy.content.allowContentTypeOrigin(origin) ​

允许从给定来源加载此类型的内容。origin 是一个字符串，可以包含可选的方案（例如 http 或 https）、开头处的可选通配符以及可以是通配符的可选端口。示例包括 example.com、https://*.example.com 和 example.com:*。您可以使用不同的来源多次调用这些函数以指定允许来源的白名单。未指定协议的来源将允许通过 HTTP 和 HTTPS 加载内容：传递 example.com 将允许从 http://example.com 和 https://example.com 加载内容。

BrowserPolicy.content.allowContentTypeDataUrl() ​

允许从 data: URL 加载此类型的内容。

BrowserPolicy.content.allowContentTypeSameOrigin() ​

允许从与您的应用程序相同的来源加载此类型的内容。

BrowserPolicy.content.disallowContentType() ​

禁止在您的应用程序上使用此类型的内容。

您还可以使用这些函数一次设置所有这些类型的内容的策略

  • BrowserPolicy.content.allowSameOriginForAll(),
  • BrowserPolicy.content.allowDataUrlForAll(),
  • BrowserPolicy.content.allowOriginForAll(origin)
  • BrowserPolicy.content.disallowAll()

例如，如果您想允许 https://foo.com 来源用于所有类型的内容，但又想禁用 <object> 标记，您可以调用 BrowserPolicy.content.allowOriginForAll("https://foo.com")，然后调用 BrowserPolicy.content.disallowObject()。

使用 BrowserPolicy.content API 的其他示例

  • BrowserPolicy.content.disallowFont() 会导致浏览器禁止所有 <font> 标记。
  • BrowserPolicy.content.allowImageOrigin("https://example.com") 允许图像的 src 属性指向从 https://example.com 提供的图像。
  • BrowserPolicy.content.allowConnectOrigin("https://example.com") 允许 XMLHttpRequest 和 WebSocket 连接到 https://example.com。
  • BrowserPolicy.content.allowFrameOrigin("https://example.com") 允许您的站点在框架或 iframe 中加载 https://example.com 来源。BrowserPolicy.framing API 允许您控制哪些站点可以嵌入您的站点，而 BrowserPolicy.content.allowFrameOrigin 允许您控制哪些站点可以加载到您站点的框架内。

在你的应用程序中添加browser-policy-content 还会告诉某些浏览器避免从声明的类型中嗅探内容类型（例如，将文本文件解释为 JavaScript），使用X-Content-Type-Options 头部。要重新启用内容嗅探，你可以调用 BrowserPolicy.content.allowContentTypeSniffing()。