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

编程问答 2022-05-28

问题描述

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

from scipy.integrate import quad
import numpy as np
from sympy import *
def f(s):
    return c*(s) * exp(lanr * s) * sin (lani * s)
integ = []
for i in enumerate(s):
    g = c * np.exp(lanr * s) * np.sin(lani * s)

    integrate( f(s),s,ID)

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

拒绝执行内联脚本，因为它违反了以下内容 内容安全策略指令：“script-src 'self'”。无论是 'unsafe-inline' 关键字，一个散列 ('sha256-c8oXMAC5SpSNhKqLeKnZuBIrD93BdSvpZ47lOJrkmFE=')，或随机数 ('nonce-...') 是启用内联执行所必需的。

我也尝试通过以下方法修复它：

  1. 在项目根目录中创建一个 .env 文件
  2. 添加变量如下：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')); }
  3. 再次构建项目并再次加载扩展。

但这无济于事。请指导我如何修复它，以及在我的应用中实施其他安全措施的最佳方式是什么？

解决方法

这里是头盔维护者。

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

MDN has a good documentation about CSP 我推荐阅读它作为背景。之后，查看Helmet's README以了解如何配置其 CSP 组件。

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

这被认为是“内联”JavaScript：

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

然而，这不是：

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

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

  1. 向内联 <script> 添加哈希或随机数，并在您的 CSP 中使用它。请参阅 this example on 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。

expressexpressexpresshelmet.jsmernreactjsreactjsreactjsreactjs