问题描述
我正在努力使用Express with Helmet为使用“ create-react-app”创建的构建服务。我在资源管理器控制台中遇到与“内容安全策略”相关的几个错误:
当然,它没有显示该应用程序。我注意到,如果在Express中将头盔移除为中间件可以工作,但这不是我想要的解决方案。这是我的服务器代码:
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);
};
有人可以帮我吗?预先感谢!
解决方法
带着同样的问题通过谷歌来到这里。我不想降低头盔中的任何安全设置,所以我更改了我的反应构建配置。只需添加行
INLINE_RUNTIME_CHUNK=false
到您在 React 应用根目录中的 .env。然后当你跑
npm run build
来构建应用程序,所有内联脚本都将被删除并且不再违反 CSP。这确实在第一次加载站点时增加了一个额外的初始 HTTP GET 请求,但在我看来,这似乎是值得的安全优势。
头盔维护人员在这里。
之所以发生这种情况,是因为有一个称为“内容安全策略”的内容,头盔默认会设置该内容。要解决您的问题,您将需要配置Helmet的CSP。
MDN has a good documentation about CSP,我建议阅读作为背景知识。之后,看看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。
,这是第三种解决方案。将 package.json 中的构建脚本更改为以下内容:
"build": "GENERATE_SOURCEMAP=false node scripts/build.js"