Content security policy

[kylejramstad]

When converting my app to use htt2-express-bridge, it seems to be setting the content security policy headers to block everything. My pages are not allowed to load their own scripts or even a css file.

My project is https://github.com/kylejramstad/garage-pi-v2. In my server.js file I have made the following changes in CODE :

'use strict';

const bodyParser = require('body-parser');
const express = require('express');
const favicon = require('express-favicon');
const session = require('express-session');
const FileStore = require('session-file-store')(session);
const fs = require('fs');
const helmet = require('helmet');
const nocache = require("nocache");

**const http2Express = require('http2-express-bridge');
const http2 = require('http2');**

const databaseController = require('./controllers/databaseController.js');

const api = require('./routers/apiRoute.js');
const index = require('./routers/indexRoute.js');
const login = require('./routers/loginRoute.js');
const loginController = require('./controllers/loginController.js');
const logout = require('./routers/logoutRoute.js');
const settings = require('./routers/settingsRoute.js');

//Create app
**const app = http2Express(express);**

app.disable('x-powered-by'); //not technically needed because of the use of helmet, but it is recommended

//Middleware//
app.use(helmet());
app.use(nocache());
app.use(favicon(__dirname + '/assets/icons/icon-72x72.png'));
app.use(session({
    store: new FileStore,
    secret: loginController.genRandomString(15),
    name: 'sessionId',
    resave: true,
    saveUninitialized: false,
    cookie: { 
        secure: true,
        httpOnly: true,
        maxAge: 31536000000
    }
}));
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies

//API Calls//
app.use('/', api);

//User Endpoints//
app.use('/', index);
app.use('/', login);
app.use('/', logout);
app.use('/settings', settings);

//Start the app and server//
app.use('/assets', express.static('assets')); //give pages access to the assets folder for JS and CSS files
app.use(express.static(__dirname + '/tls', { dotfiles: 'allow' } )); //Allows for CertBot to do automatic authentication

//To catch all false routes and redirect them back to the home page
app.use(function(req, res, next){
    res.status(404).redirect('/');
});

//Start App with HTTPS
**http2.createSecureServer**({
  key: fs.readFileSync('tls/privkey.pem'),
  cert: fs.readFileSync('tls/fullchain.pem'),
  **allowHTTP1: true**
}, app).listen(443, () => {
  console.log('Listening...');
  console.log('Version: ' + process.env.npm_package_version);
});

[kylejramstad]

Here is the specific error from the console:

Refused to load the script '' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

[lamweili]

I tried with a small test and there is no CSP issue. You can download the source code here: test.zip

Run it and access https://localhost:3000/static.

---

The CSP issue only happened when upgraded to helmet@^5.0.0 as that version enabled CSP by default. That is not an http2-express-bridge issue.

You can disable CSP in helmet@^5.0.0:

app.use(
  require('helmet')({
    contentSecurityPolicy: false,
  })
)

Or you can set it to report only in helmet@^5.0.0:

app.use(
  require('helmet').contentSecurityPolicy({
    reportOnly: true,
  })
)