Helmet causing MERN app hosted on heroku cause ERROR: Refused to execute inline script because it violates the following

Question

我在 Heroku 上托管了我的 MERN 应用程序，但每当我在 app.js 文件中实现头盔时，它就会导致这个问题。

const path = require('path');
const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
// const cors = require('cors');
const rateLimit = require('express-rate-limit');
const helmet = require('helmet');
const mongoSanitize = require('express-mongo-sanitize');
const expressSanitizer = require('express-sanitizer');
const xss = require('xss-clean');
const hpp = require('hpp');
const compression = require('compression')

const authRouter = require('./routes/authRoutes');

const app = express();
// IMPLEMENT CORS
// app.use(cors());
// app.options('*', cors());
app.use((req, res, next) => {
   res.header('Access-Control-Allow-Origin', '*');
   res.header(
      'Access-Control-Allow-Headers',
      'Origin, X-Requested-With, Content-Type, Accept, Authorization'
   );
   if (req.method === 'OPTIONS') {
      res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, PATCH, DELETE');
      return res.status(200).json({});
   }
   return next();
});

//SECURITY
// app.use(helmet());  <------causing issue.

const limiter = rateLimit({
   max: 100,
   windowMs: 60 * 60 * 1000,// 1 hour
   message: 'Too many requests from this IP, please try again in an hour!'
})
app.use('/api', limiter);

// Body parser, reading data from body into req.body
app.use(express.json({ limit: '10kb' }));
app.use(express.urlencoded({ extended: true, limit: '10kb' }));
app.use(cookieParser());
// Data sanitization against NoSQL query injection
app.use(mongoSanitize());
// HTML sanitizer
app.use(expressSanitizer());
// Data sanitization against XSS
app.use(xss());
// Prevent parameter pollution
app.use(hpp({
   whitelist: ['tags', 'likeCounts', 'commentCounts']
}));
// COMPRESSION
app.use(compression())
// logging 
if (process.env.NODE_ENV === 'development') {
   app.use(morgan('dev'));
}

应用程序在本地环境中运行正常，但头盔导致错误：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-c8oXMAC5SpSNhKqLeKnZuBIrD93BdSvpZ47lOJrkmFE='), or a nonce ('nonce-...') is required to enable inline execution.

我也尝试按照以下方法修复它：

在项目根目录中创建一个 .env 文件
添加变量如下：INLINE_RUNTIME_CHUNK=false
再次构建项目并再次加载扩展。

但这并没有帮助。请指导我如何修复它，以及在我的应用中实施其他安全措施的最佳方式是什么？

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 组件。

针对此问题提供一些帮助：此错误告诉您 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,
  })
);
```

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

Helmet causing MERN app hosted on heroku cause ERROR: Refused to execute inline script because it violates the following

Helmet causing MERN app hosted on heroku cause ERROR: Refused to execute inline script because it violates the following

express

reactjs

helmet.js

mern