reactjs - 添加 csp-html-webpack-plugin dosnt 加载我的反应网页

Question

我正在使用 npm react-app-rewired customize-cra csp-html-webpack-plugin为我的应用程序提供更高的安全性，遵循此示例https://medium.com/@nrshahri/csp-cra-324dd83fe5ff

我的 config-overrides.js 看起来像这样

const { override } = require("customize-cra");
const cspHtmlWebpackPlugin = require("csp-html-webpack-plugin");

const cspConfigPolicy = {
  "default-src": "'none'",
  "base-uri": "'self'",
  "object-src": "'none'",
  "script-src": ["'self'"],
  "style-src": ["'self'"]
};

function addCspHtmlWebpackPlugin(config) {
  if (process.env.NODE_ENV === "production") {
    config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
  }

  return config;
}

module.exports = {
  webpack: override(addCspHtmlWebpackPlugin)
};

问题是，当我尝试进入网页时，它根本没有加载任何东西，当我检查控制台时，它会显示以下错误列表

有没有更好的方法来应用安全策略，以便我可以毫无问题地访问该页面？

非常感谢您提前提出的意见和建议。

Answer 1

您的配置中的 CSP 与错误消息中列出的指令不匹配，这可能意味着设置了多个 CSP。由于内容需要通过所有 CSP，您首先需要识别和控制所有 CSP。检查任何策略的响应标头和元标记。

您需要根据第一条错误消息将 font-src 指令添加到您的 CSP。展开错误以查看您需要添加哪些主机名。