Run non-inline JS locally in Electron

Question

I'd like to stick all of my separate JS scripts as files in another folder when developing locally. The only way I've been able to do this is if I don't declare the meta statement. However, by not declaring it, I of course get a warning.

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled. This exposes users of this app to unnecessary security risks.

Is there a way to do it locally without either ignoring or violating CSP?

Answer 1

Set the following meta tag in the renderers.

<meta http-equiv="Content-Security-Policy" content="script-src 'nonce-xxx or sha256-yyy' " />

Kindly checkout my github repo electron-renderer-CSP-sample, containing samples for both nonce & SHA methods for internal & external js files as well.

OR

You can make use of preload argument in webPreferences while creating the main BrowserWindow. In the main.js,

  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: false,
      preload: path.join(__dirname, 'preload.js')
    }
  })

In the preload.js

        const remote = require("electron").remote;
// electron APIs
        window.appQuit = function() {
          remote.app.exit(0);
        };
// node modules
       window.notify= function notify(msg) {
       return require('node-notifier').notify(msg);
       };
// DOM can be manipulated from here (Refer 
// https://github.com/electron/electron-quick-start/blob/master/preload.js)