0

如何正确地将带有元标记的安全层添加到我的反应应用程序中，我尝试使用 npm csp-html-webpack-plugin 执行此操作，但结果是该应用程序未显示在浏览器中并且列表违反内容安全策略的错误

大多数错误都与 style-src 有关，因为我使用的是材料 UI 包

以及其他读取属性为 null 的“cssRules”

我正在使用 pm2 启动我的应用程序

我的构建看起来像这样

"build": "env-cmd -e production react-app-rewired build"

我的元标题看起来像这样

<meta http-equiv="Content-Security-Policy" content="" />

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

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

const cspConfigPolicy = {
  "style-src": ["'self'", "'unsafe-inline'"],
  "default-src": ["'self'"],
  "base-uri": "'self'",
  "object-src": "'none'",
  "script-src": ["'unsafe-inline'", "'https://unpkg.com'"]
};

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

  return config;
}

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

我的 .env 看起来像这样

"production": {
"GENERATE_SOURCEMAP": false,
"INLINE_RUNTIME_CHUNK": false,
"REACT_APP_PUBLIC_URL": "",
"REACT_APP_API_URL": "localhost",
"REACT_APP_API_VERSION": "api/v1",
}

有人可以举一个例子来说明如何做到这一点

4

0 回答 0