使用快速（带头盔）使用 create-react-app 创建的应用程序时出现 CSP 错误

Question

我正在努力使用 Express with Helmet 为使用“create-react-app”创建的构建提供服务。我在资源管理器控制台中遇到与内容安全策略相关的几个错误：

csp-errors

当然，它没有显示该应用程序。我注意到如果在 Express 中删除 Helmet 作为中间件它可以工作，但这不是我想要的解决方案。这是我的服务器代码：

const express = require('express');
const helmet = require('helmet');
const cors = require('cors');
const morgan = require('morgan');
const bodyParser = require('body-parser');

/**
 * Server Configuration
 */

const whitelist = [];

const app = express();

// Express Configurations

// Enable reverse proxy support in Express. This causes the the "X-Forwarded-Proto" header field to be trusted so its
// value can be used to determine the protocol. See // http://expressjs.com/api#app-settings for more details.

app.enable('trust proxy');

app.use(morgan('dev')); // Log every request to the console
app.use(helmet()); // Configure secure Headers
app.use(bodyParser.urlencoded({ extended: false })); // Enable parsing of http request body
app.use(bodyParser.json());

// CORS Configuration

const corsOptions = {
  origin: (origin, callback) => {

    if (whitelist.indexOf(origin) !== -1 || !origin) {

      callback(null, true);

    } else {

      callback(new Error('Not allowed by CORS'));

    }

  },
};

app.use(cors(corsOptions)); // Allow CORS

/**
 * Launcher method
 */

app.start = () => {

  // start node server
  const port = process.env.PORT || 3000;
  app.listen(port, () => {

    console.log(`App UI available http://localhost:${port}`);
    console.log(
      `Swagger UI available http://localhost:${port}/swagger/api-docs`,
    );

  });

};

/**
 * App Initialization
 */

function initializeApp(readyCallback) {

  readyCallback(null, app);

}

module.exports = (readyCallback) => {

  initializeApp(readyCallback);

};

谁能帮帮我？提前致谢！

Answer 1

这里是头盔维护员。

发生这种情况是因为 Helmet 默认设置的内容安全策略。要解决您的问题，您需要配置 Helmet 的 CSP。

MDN has a good documentation about CSP which I would recommend reading for background. After that, take a look at Helmet's README 查看如何配置其 CSP 组件。

为了针对此问题提供一些帮助，让我们看一下您看到的一个错误：

Content Security Policy: This page's settings blocked the loading of a resource at inline ("script-src").

此错误告诉您 CSP 的 script-src 指令不允许内联 JavaScript，因此它被阻止了。

这被认为是“内联”JavaScript:

<script>console.log('hello world!')</script>

然而，这不是：

<script src="/foo.js"></script>

有几种方法可以解决这个问题：

向内联 <script> 添加哈希或随机数，并在您的 CSP 中使用它。请参阅 this example on MDN 寻求帮助。
重构您的应用以完全避免内联脚本。

更新您的 CSP 以允许不安全的内联脚本。你会做这样的事情：

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        ...helmet.contentSecurityPolicy.getDefaultDirectives(),
        "script-src": ["'self'", "'unsafe-inline'", "example.com"],
      },
    },
  })
);

请注意，这被认为是不安全的。

禁用 CSP。这是最危险的选择，所以我不推荐它。
```
app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);
```

您的其他错误，例如 fonts.googleapis.com 错误，请参考 default-src，如果未指定指令，这是回退。

总结：要解决您的问题，您需要告诉 Helmet 配置您的 CSP。

Answer 2

带着同样的问题通过 google 来到这里。我不想降低头盔中的任何安全设置，所以我更改了我的反应构建配置。只需添加行

INLINE_RUNTIME_CHUNK=false

到您的 .env 在反应应用程序根目录中。那么当你运行 npm run build 构建应用程序，所有内联脚本将被删除，不再违反 CSP。这确实会在首次加载网站时添加一个额外的初始 HTTP GET 请求，但在我看来似乎值得安全方面的好处。

Answer 3

这是第三种解决方案。将 package.json 中的构建脚本更改为以下内容：

"build": "GENERATE_SOURCEMAP=false node scripts/build.js"

使用快速（带头盔）使用 create-react-app 创建的应用程序时出现 CSP 错误

CSP error while serving with express (with helmet) an app created with create-react-app

javascript

express

reactjs

helmet.js

create-react-app