框架严格的内容安全策略标头在生产中破坏了 ReCaptcha

Question

我一直在尝试使用Hanami 创建一个小网站。它在生产中具有非常严格的默认安全设置。这是服务器响应标头：

cf-ray:2f14dcb05e2307e5-LAX
content-encoding:gzip
content-security-policy:form-action 'self'; frame-ancestors 'self'; base-uri 'self'; default-src 'none'; script-src 'self' 'sha256-IAaN58htbUDxfKhUX+LYHn2kWUEjPKf5lepkdtqd1gU=' https://www.google.com/recaptcha/api.js https://www.gstatic.com https://www.google-analytics.com/analytics.js https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; connect-src 'self'; img-src 'self' https: data:; style-src 'self' 'unsafe-inline' https:; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com; object-src 'none'; plugin-types application/pdf; child-src 'self'; frame-src 'self' https://www.google.com/recaptcha/; media-src 'self'
content-type:text/html; charset=utf-8
date:Thu, 13 Oct 2016 18:30:19 GMT
server:cloudflare-nginx
status:200
via:1.1 vegur
x-content-type-options:nosniff
x-frame-options:DENY
x-xss-protection:1; mode=block

导致：

我的内容安全策略标头中的某些内容不允许 ReCaptcha 工作。请记住，它在 localhost 上的开发中工作正常，具有以下响应标头：

Content-Security-Policy:form-action 'self'; frame-ancestors 'self'; base-uri 'self'; default-src 'none'; script-src 'self' 'sha256-IAaN58htbUDxfKhUX+LYHn2kWUEjPKf5lepkdtqd1gU=' https://www.google.com/recaptcha/api.js https://www.gstatic.com https://www.google-analytics.com/analytics.js https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; connect-src 'self'; img-src 'self' https: data:; style-src 'self' 'unsafe-inline' https:; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com; object-src 'none'; plugin-types application/pdf; child-src 'self'; frame-src 'self' https://www.google.com/recaptcha/; media-src 'self'
Content-Type:text/html; charset=utf-8
Transfer-Encoding:chunked
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

这是为生产定义 CSP 的块：

# Content Security Policy usage:
      #
      #  * http://content-security-policy.com/
      #  * https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy
      #
      # Content Security Policy references:
      #
      #  * https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives
      #
      security.content_security_policy %{
        form-action 'self';
        frame-ancestors 'self';
        base-uri 'self';
        default-src 'none';
        script-src 'self' 'sha256-IAaN58htbUDxfKhUX+LYHn2kWUEjPKf5lepkdtqd1gU=' https://www.google.com/recaptcha/api.js https://www.gstatic.com https://www.google-analytics.com/analytics.js https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
        connect-src 'self';
        img-src 'self' https: data:;
        style-src 'self' 'unsafe-inline' https:;
        font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com;
        object-src 'none';
        plugin-types application/pdf;
        child-src 'self';
        frame-src 'self' https://www.google.com/recaptcha/;
        media-src 'self'
      }

看来我需要添加加载脚本的权限。 I'm following Google's own CSP rules.

这里有什么问题？

编辑：看起来安全策略不允许我加载 'https://www.google.com/recaptcha/api.js' 脚本，因为页面中缺少 grecaptcha 对象。

Answer 1

和往常一样，假设是所有问题的根源。

Hanami 的 javascript() 助手实际上在生产中添加了两个属性 - integrity 和 crossorigin。第一个用于确定脚本没有被篡改 - 例如，如果它来自某个 CDN。

第二个有点模糊，默认设置为“匿名”时会阻止验证码工作。