CODEWITHSUNDEEP
javascriptexpresscontent-security-policyhelmet.js
Harry Blue
Harry Blue

Reputation: 4512

Express / HelmetJS / CSP and Gzip Assets

I have an Express app hosting a React web app. I am using HelmetJS to help secure my Express app.

I am also return gzipped assets where possible. However, since adding Helmet to Express, I now get the following error when trying to load my hosted web app

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 app looks as follows...

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}`);

The index html being rendered in the dist folder is as follows

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

If I disable helmet, this works just fine. How can I configure helmet to allow the loading of this file still?

Upvotes: 1

Views: 642

Answers (1)

Michał Perłakowski
Michał Perłakowski

Reputation: 92579

You can use the express-static-gzip package. It's an Express middleware. It takes care of setting the Content-Type header, and other things, like checking which encoding the browser accepts.

Example:

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

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

Upvotes: 1

Related Questions