javascript - Express / HelmetJS / CSP 和 Gzip 资产
问题描述
我有一个托管 React Web 应用程序的 Express 应用程序。我正在使用 HelmetJS 来帮助保护我的 Express 应用程序。
我也会尽可能归还压缩后的资产。但是,自从将 Helmet 添加到 Express 后,我现在在尝试加载托管的 Web 应用程序时收到以下错误
Refused to execute script from 'http://localhost:3000/static/main.8bbec8980664a60606b0.min.js' because its MIME type ('application/gzip') is not executable, and strict MIME type checking is enabled.
我的 Express 应用程序如下所示...
const express = require('express');
const helmet = require('helmet');
const path = require('path');
const app = express();
const POLICY_NONE = ["'none'"];
const POLICY_SELF = ["'self'"];
app.use(helmet());
app.use(helmet.referrerPolicy({ policy: 'same-origin' }))
app.use(
helmet.contentSecurityPolicy({
directives: {
defaultSrc: POLICY_SELF,
connectSrc: POLICY_SELF,
fontSrc: POLICY_SELF,
imgSrc: POLICY_SELF,
manifestSrc: POLICY_SELF,
mediaSrc: POLICY_SELF,
objectSrc: POLICY_NONE,
scriptSrc: POLICY_SELF,
styleSrc: POLICY_SELF,
workerSrc: POLICY_SELF,
formAction: POLICY_SELF,
frameAncestors: POLICY_NONE,
blockAllMixedContent: true,
upgradeInsecureRequests: false,
}
})
);
app.use((req, res, next) => {
if (/\.(js|css)$/.test(req.url)) {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
}
next();
});
app.use(express.static(path.resolve(__dirname, '../dist')));
app.get('/healthz', (req, res) => res.send('OK'));
app.get('*', (req, res) =>
res.sendFile(path.resolve(__dirname, '../dist/index.html'))
);
const PORT = process.env.SERVER_PORT || 3000;
const HOST = process.env.SERVER_HOST || '127.0.0.1';
app.listen(PORT);
console.log(`API started on ${HOST}:${PORT}`);
dist 文件夹中正在渲染的 index html 如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Web App
</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="static/main.8bbec8980664a60606b0.min.js"></script></body>
</html>
如果我禁用头盔,这很好用。如何配置头盔以允许加载此文件?
解决方案
您可以使用该express-static-gzip
软件包。它是一个 Express 中间件。它负责设置Content-Type
标头和其他事情,例如检查浏览器接受的编码。
例子:
var express = require("express");
var expressStaticGzip = require("express-static-gzip");
var app = express();
app.use("/", expressStaticGzip("/my/rootFolder/"));
推荐阅读
- snowflake-cloud-data-platform - 雪花 - 聚类
- firebase - 尝试创建颤振 appbundle 时的 API 警告
- bixby - 我如何判断胶囊使用是否来自自然语言发现
- javascript - XMLHttpRequest POST API 调用
- javascript - 如何在集合 SHOPIFY 中的产品下方添加“您添加了这个”
- git - 我的仓库中包含 git push 日期和时间的文件
- api - 使用每日随机 API 密钥限制对我的前端应用程序的 API 访问
- javascript - NodeJS 和 NodeMailer 没有这样的文件或目录
- javascript - 使用 JavaScript 中的正则表达式检查数组的项目是否在字符串中
- haskell - 在默认的 Haskell Stack 项目中构建多个可执行文件