东莞做网站:内容安全政策,您未来的最佳朋友

2019.08.13 mf_web

135

很久以前,我的个人网站遭到了攻击。我不知道它是怎么发生的,但事情发生了。幸运的是,攻击造成的破坏非常小:在某些页面的底部插入了一段JavaScript。我更新了FTP和其他凭据,清理了一些文件,就是这样。

有一点让我很生气:当时没有简单的解决方案可以告诉我存在问题 - 更重要的是 - 这可以保护网站的访问者免受这段烦人的代码。

东莞做网站现在存在一种解决方案,它是一种在两种角色中都取得成功的技术。它的名称是内容安全策略(CSP)。

什么是CSP?

这个想法很简单:通过从网站发送CSP标头,您告诉浏览器它有权执行什么以及它有权阻止什么。

这是PHP的一个例子:

<?php
    header("Content-Security-Policy: <your directives>");?>
复制

一些指令

您可以定义全局规则或定义与资产类型相关的规则:

default-src 'self' ;
     # self = same port, same domain name, same protocol => OK
复制

基本参数是default-src:如果没有为某种类型的资产定义指令,则浏览器将使用此值。

script-src 'self' www.google-analytics.com ;
     # JS files on these domains => OK
复制

在此示例中,我们已将域名授权www.google-analytics.com为我们网站上使用的JavaScript文件的来源。我们添加了关键字‘self’; 如果我们script-src用另一个规则重新定义指令,它将覆盖default-src规则。

如果未指定方案或端口,则它会从当前页面强制执行相同的方案或端口。这可以防止混合内容。如果页面是https://example.com,那么您将无法加载,http://www.google-analytics.com/file.js因为它将被阻止(方案将不匹配)。但是,允许进行方案升级是个例外。如果http://example.com尝试加载https://www.google-analytics.com/file.js,则允许更改方案或端口以便于方案升级。

style-src 'self' data: ;
     # Data-Uri in a CSS => OK
复制

在此示例中,关键字data:授权CSS文件中的嵌入内容。

根据CSP 1级规范,您还可以定义以下规则:

  • img-src 有效的图像来源

  • connect-src 适用于XMLHttpRequest(AJAX),WebSocket或EventSource

  • font-src 有效的字体来源

  • object-src插件的有效源(例如,<object>,<embed>,<applet>)

  • media-src的有效来源<audio>,并<video>

CSP 2级规则包括以下内容:

  • child-srcWeb工作者和元素的有效来源,例如<frame>和<iframe>(这取代了frame-srcCSP级别1 弃用的)

  • form-action可用作HTML <form>操作的有效源

  • frame-ancestors使用嵌入资源的有效来源<frame>,<iframe>,<object>,<embed>或<applet>。

  • upgrade-insecure-requests 指示用户代理重写URL方案,将HTTP更改为HTTPS(对于具有大量需要重写的旧URL的网站)。

为了更好地向后兼容已弃用的属性,您可以简单地复制实际指令的内容并将其复制到不推荐使用的指令中。例如,您可以复制它们的内容child-src并复制它们frame-src。

CSP 2允许您将路径列入白名单(CSP 1仅允许将域列入白名单)。因此,www.foo.com您可以将白名单www.foo.com/some/folder进一步限制,而不是将所有内容列入白名单。这确实需要在浏览器中支持CSP 2,但它显然更安全。

一个例子

我为2015年巴黎网络会议做了一个简单的例子,我在会上发表了题为“ CSP in Action ” 的演讲。

没有CSP,页面将如下所示:

此页面没有CSP,丑陋和污损

不是很好。如果我们启用了以下CSP指令怎么办?

<?php
    header("Content-Security-Policy: 
      default-src 'self' ;
      script-src 'self' www.google-analytics.com stats.g.doubleclick.net ; 
      style-src 'self' data: ;
      img-src 'self' www.google-analytics.com stats.g.doubleclick.net data: ;
      frame-src 'self' ;");?>
复制

浏览器会做什么?它会(非常严格地)在CSP的主要规则下应用这些指令,即CSP指令中未授权的任何内容都将被阻止(“阻止”意味着未执行,未显示且未被网站使用)。

默认情况下,在CSP,内嵌脚本和样式没有被授权,这意味着每一个<script>,onclick或style属性将被阻止。您可以使用style-src ‘unsafe-inline’ ;。授权内联CSS 。

在支持CSP的现代浏览器中,示例如下所示:

这个页面有CSP,真的好多了

发生了什么?浏览器应用了指令并拒绝了任何未经授权的内容。它将这些通知发送到控制台:

CSP通知

如果您仍然不相信CSP的价值,请看看Aaron Gustafson的文章“ 更多证明我们不控制我们的网页 ”。

当然,您可以使用比上面提供的示例更严格的指令:

  • 设置default-src为'none',

  • 指定每个规则所需的内容,

  • 指定所需文件的确切路径,

  • 等等

有关CSP的更多信息

支持

CSP不是夜间功能,需要激活三个标志才能使其工作。CSP 1级和2级是候选推荐!浏览器对CSP级别1的支持非常出色。

我可以使用的CSP 1级支持

该2级规格比较近,所以它是一个有点不太支持。

我可以使用的CSP 2级支持

CSP级别3现在是一个早期草案,因此尚不支持,但您已经可以使用级别1和级别2做很好的事情。

其他考虑因素

CSP旨在减少跨站点脚本(XSS)风险,这就是为什么script-src不建议在指令中启用内联脚本的原因。Firefox很好地说明了这个问题:在浏览器中,点击Shift+ F2并输入security csp,它会显示指令和建议。例如,它在Twitter的网站上使用:

Firefox上的CSP显示

内联脚本或内联样式的另一种可能性(如果您确实必须使用它们)是创建哈希值。例如,假设您需要具有此内联脚本:

<script>alert('Hello, world.');</script>
复制

您可以‘sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng=’在script-src指令中添加有效源。生成的哈希是PHP中的结果:

<?php
    echo base64_encode(hash('sha256', "alert('Hello, world.');", true));?>
复制

我之前说过,CSP旨在降低XSS风险 - 我本可以补充一下,“......并降低未经请求的内容的风险。”使用CSP,您必须知道您的内容来源在哪里以及他们在您的前端做了什么(内联样式等)。CSP还可以帮助您强制贡献者,开发人员和其他人尊重您关于内容源的规则!

现在你的问题是,“好的,这很好,但我们如何在生产环境中使用它呢?”

如何在现实世界中使用它

第一次使用CSP而气馁的最简单方法是在现场环境中测试它,想一想,“这很容易。我的代码很糟糕,非常干净。“不要这样做。我做的。这是愚蠢的,相信我。

正如我解释的那样,CSP指令是通过CSP标头激活的 - 没有中间立场。你是这里的薄弱环节。您可能忘记授权或遗忘您网站上的一段代码。CSP不会原谅您的疏忽。但是,CSP的两个功能大大简化了这个问题。

报告-URI

还记得CSP发送到控制台的通知吗?该指令report-uri可用于告诉浏览器将它们发送到指定的地址。报告以JSON格式发送。

report-uri /csp-parser.php ;
复制

因此,在csp-parser.php文件中,我们可以处理浏览器发送的数据。这是PHP中最基本的例子:

$data = file_get_contents('php://input');
    if ($data = json_decode($data, true)) {
     $data = json_encode(
      $data,
      JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES
      );
     mail(EMAIL, SUBJECT, $data);
    }
复制

此通知将转换为电子邮件。在开发过程中,您可能不需要比这更复杂的东西。

对于生产环境(或访问量更大的开发环境),您最好使用除电子邮件之外的方式来收集信息,因为端点上没有auth或速率限制,并且CSP可能非常嘈杂。想象一下,生成100个CSP通知的页面(例如,显示来自未经授权来源的图像的脚本)并且每天查看100次 - 您每天可以获得10,000个通知!

report-uri.io等服务可用于简化报告管理。您可以在GitHub上看到report-uri的其他简单示例(带有数据库,有一些优化等)。

只报告 -

正如我们所看到的,最大的问题是CSP启用和禁用之间没有中间立场。但是,名为的功能会report-only发送略有不同的标头:

<?php
    header("Content-Security-Policy-Report-Only: <your directives>");?>
复制

基本上,这告诉浏览器,“好像这些CSP指令正在被应用,但不会阻止任何东西。只需向我发送通知。“这是测试指令的好方法,没有阻止任何所需资产的风险。

使用report-only和report-uri,您可以毫无风险地测试CSP指令,并且您可以实时监控网站上与CSP相关的所有内容。这两个功能对于部署和维护CSP非常强大!

结论

为什么CSP很酷

CSP对您的用户最重要:他们不必在您的网站上遭受任何未经请求的脚本或内容或XSS漏洞。

CSP对网站维护者最重要的优势是意识。如果您为图像源设置了严格的规则,并且脚本小子试图从未经授权的来源插入您网站上的图像,则该图像将被阻止,您将立即收到通知。

与此同时,开发人员需要确切地知道他们的前端代码的作用,而CSP帮助他们掌握了这一点。系统将提示他们重构部分代码(避免内联函数和样式等)并遵循最佳实践。

CSP如何更加冷静

具有讽刺意味的是,CSP 在某些浏览器中效率太高 - 它会产生带有bookmarklet的错误。因此,不要更新您的CSP指令以允许bookmarklet。我们不能特别责怪任何一个浏览器; 所有这些都有问题:

  • 火狐

  • Chrome(闪烁)

  • WebKit的

大多数情况下,阻止通知中的错误是误报。所有浏览器供应商都在处理这些问题,因此我们很快就会得到修复。无论如何,这不应该阻止你使用CSP。

东莞做网站

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP