Define CSP HTTP Header in Electron App

Question

Following the API documentation, I don't understand how to define a Content-Security-Policy HTTP Header for the renderer of my Electron application. I always get a warning in the DevTools.

I tried:

1) Copy/Paste the code in the API Doc, blindly:

app.on('ready', () => {     const {session} = require('electron')     session.defaultSession.webRequest.onHeadersReceived((details, callback) => {         callback({responseHeaders: `default-src 'self'`})     })      win = new BrowserWindow(...)     win.loadUrl(...) } 

(By the way, I don't get why "Content-Security-Policy:" is missing in the string. But adding it don't change anything)

2) Modifying the session of the renderer with the same code:

win = new BrowserWindow(...) win.loadUrl(...)  const ses = win.webContents.session; ses.webRequest.onHeadersReceived((details, callback) => {   callback({responseHeaders: `default-src 'self'`}) }) 

3) Add an extra header to ther renderer:

win = new BrowserWindow(...) win.loadURL(`file://${__dirname}/renderer.html`,{     extraHeaders: `Content-Security-Policy: default-src 'self'` }); 

...

The only thing that works is using a meta tag in the renderer HTML file:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'> 

Answer 1

Not sure why the documentation contains this broken code. It confused the hell out of me but I found a working solution by trial and error:

session.defaultSession.webRequest.onHeadersReceived((details, callback) => {     callback({ responseHeaders: Object.assign({         "Content-Security-Policy": [ "default-src 'self'" ]     }, details.responseHeaders)}); }); 

So the headers argument must be an object with the same structure as the original headers received in details.responseHeaders. And the original headers must be included in the passed object as well because this object seems to completely replace the original response headers.

The extraHeaders option isn't for response headers. It is for request headers sent to the server.