Экспресс / HelmetJS / CSP и Gzip Активы - PullRequest
Новая
       13

Экспресс / HelmetJS / CSP и Gzip Активы

0 голосов
/ 16 мая 2018

У меня есть приложение Express, на котором размещено веб-приложение React. Я использую HelmetJS для защиты своего приложения Express.

Я также возвращаю сжатые активы, где это возможно. Однако после добавления Helmet в Express я теперь получаю следующую ошибку при попытке загрузить мое размещенное веб-приложение 

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.

Приложение My 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}`);

Индекс HTML, отображаемый в папке dist, выглядит следующим образом 

<!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>

Если я отключу шлем, это прекрасно работает. Как мне настроить шлем, чтобы разрешить загрузку этого файла?

1 Ответ

0 голосов
/ 16 мая 2018

Вы можете использовать пакет express-static-gzip. Это промежуточное ПО Express. Он заботится об установке заголовка Content-Type и других вещах, например, проверяет, какую кодировку принимает браузер.

Пример: 

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

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