导致heroku上托管的MERN应用程序的头盔导致错误:拒绝执行内联脚本,因为它违反了以下规定

超级0803

我已经将我的MERN应用托管在Heroku上,但是每当我在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'));
}

应用在本地环境中运行良好,但头盔导致错误:

拒绝执行内联脚本,因为它违反了以下“内容安全策略”指令:“ script-src'self'”。要启用内联执行,需要使用“ unsafe-inline”关键字,哈希(“ sha256-c8oXMAC5SpSNhKqLeKnZuBIrD93BdSvpZ47lOJrkmFE =”)或随机数(“ nonce -...”)。

我还尝试按照以下方法修复它:

  1. 在项目根目录中创建一个.env文件
  2. 添加变量,如下所示: INLINE_RUNTIME_CHUNK=false
  3. 再次构建项目,然后再次加载扩展。

但这没有帮助。请指导我如何解决它,以及在我的应用中实施其他安全措施的最佳方法是什么?

埃文·哈恩(Evan Hahn)

头盔维护者在这里。

之所以发生这种情况,是因为有一个称为“内容安全策略”的内容,头盔默认会设置该内容。为了解决您的问题,您将需要配置Helmet的CSP。

MDN拥有有关CSP的良好文档,我建议您阅读以获取相关背景知识。之后,看一下Helmet的自述文件,了解如何配置其CSP组件。

针对此问题提供一些帮助:此错误告诉script-src您CSP指令不允许内联JavaScript,因此已被阻止。

这被认为是“内联” JavaScript:

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

但是,这不是:

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

有几种方法可以解决此问题:

  1. 在行内添加哈希或随机数,<script>并在CSP中使用它。有关帮助,请参见MDN上的此示例

  2. 重构您的应用程序,以完全避免内联脚本。

  3. 更新您的CSP以允许使用不安全的内联脚本。您将执行以下操作:

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

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

  4. 禁用CSP。这是最危险的选择,因此我不建议这样做。

    app.use(
      helmet({
        contentSecurityPolicy: false,
      })
    );
    

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档