Express / HelmetJS / CSP 和 Gzip 资产

Question

我有一个托管 React 网络应用程序的 Express 应用程序。我正在使用 HelmetJS 来帮助保护我的 Express 应用程序。

我也在 return 可能的情况下使用 gzipped 资产。但是，自从将 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文件夹中正在渲染的索引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>

如果我禁用头盔，这很好用。如何配置头盔以允许加载此文件？

Answer 1

您可以使用 express-static-gzip 包。它是一个 Express 中间件。它负责设置 Content-Type header 和其他事情，比如检查浏览器接受哪种编码。

示例：

var express = require("express");
var expressStaticGzip = require("express-static-gzip");
var app = express();

app.use("/", expressStaticGzip("/my/rootFolder/"));

Express / HelmetJS / CSP 和 Gzip 资产

Express / HelmetJS / CSP and Gzip Assets

javascript

express

content-security-policy

helmet.js