如何将 CspHtmlWebpackPlugin 用于静态 html 和 js 文件？

Question

我正在将 HtmlWebpackPlugin 用于 React 站点，因此我决定为其使用 CspHtmlWebpackPlugin 插件。这个插件正确地为 webpack 识别的包和文件生成随机数和哈希值。我遇到的问题是我引用了一些静态 html 和静态 js 文件，这些文件没有被 nonced 或散列（因为它们是静态的？）。我不确定如何将这些与我的 CSP 设置正确集成。这是我的 CSP 插件的 webpack 配置：

  cspPlugin: {
    enabled: true,
    policy: {
      'script-src': [
        `'self'`,
        `https://www.googletagmanager.com`
      ],
      'style-src': [
        `'unsafe-inline'`,
        `'self'`,
        `'unsafe-eval'`,
        `https://fonts.googleapis.com`
      ]
    },
    hashEnabled: {
      'script-src': true,
      'style-src': false
    },
    nonceEnabled: {
      'script-src': true,
      'style-src': false
    },
    processFn: generateNginxBaseHeaderFile
  }

这会生成类似于以下内容的内容 headers：

content-security-policy-report-only: base-uri 'self'; object-src 'none';
  script-src 'self' https://www.googletagmanager.com
  'sha256-Cudo9RvyD4crXHpdRlNVVHb29bDV+/+TsYuDgFpxVwY=' 'sha256-afmMNrePPscv0A0DHOtUey1aVoZppHkmcGz+ddjnv2M='
  'nonce-1vbzuUPh7Nd+vV9Glkq5+w==' 'nonce-sSfmgIuXxcAr6qfwuAO3vg==' 'nonce-h/1RsCNeHX65s+sJ9AbOnQ=='
  'nonce-PO2OQxOi4WkSY4sukJAbZg==' 'nonce-5uEE3hj9xUaFxjf7+lAxVQ==';
  style-src 'unsafe-inline' 'self' 'unsafe-eval' https://fonts.googleapis.com;

当访问网站本身时，我遇到了多个静态 html and/or js 文件的错误：

[Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: (...redacted...)
  Either the 'unsafe-inline' keyword, a hash ('sha256-Lb8dFvdAxwTPI2Stpzv1lYq3YtfRcVGhzizMUGcR1jU='),
  or a nonce ('nonce-...') is required to enable inline execution.

有没有办法让插件处理这些文件，或者我是否需要手动执行一些操作才能使其正常工作？

Answer 1

错误消息显示“拒绝执行内联脚本”，所以这不是您的静态文件，'self' 允许它们。它是内联脚本或事件属性（如 onclick）。如果它是内联脚本，则在脚本的错误消息中可能会出现 link，添加哈希值即可解决问题。如果它是一个事件属性，添加哈希将无济于事，您将需要使用事件侦听器重写它。

如何将 CspHtmlWebpackPlugin 用于静态 html 和 js 文件？

How to use CspHtmlWebpackPlugin for static html and js files?

content-security-policy

html-webpack-plugin

csp-html-webpack-plugin