I've created Electron-Vuejs-Vuetify project from this Vuetify's boilerplate
I'm seeing this warning in the console:
Electron Security Warning
This renderer process has Node.js integration enabled and
attempted to load remote content. This exposes users of this app to severe security risks.
For more information and help, consult https://electronjs.org/docs/tutorial/security
What can possible cause that - Node, Vue.js, webpack's localhost config? What should I do?
Add the following line to main.js:
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
However you should read Security, Native Capabilities, and Your Responsibility to fully understand the implications of doing so.
You're having this:
Electron Security Warning This renderer process has Node.js integration enabled and attempted to load remote content. This exposes users of this app to severe security risks.
Because from the 2nd Security Recommendations from Electron Documentation
It is paramount that you disable Node.js integration in any renderer (BrowserWindow, BrowserView, or WebView) that loads remote content. The goal is to limit the powers you grant to remote content, thus making it dramatically more difficult for an attacker to harm your users should they gain the ability to execute JavaScript on your website.
After this, you can grant additional permissions for specific hosts. For example, if you are opening a BrowserWindow pointed at "https://my-website.com/", you can give that website exactly the abilities it needs, but no more.
A cross-site-scripting (XSS) attack is more dangerous if an attacker can jump out of the renderer process and execute code on the user's computer. Cross-site-scripting attacks are fairly common - and while an issue, their power is usually limited to messing with the website that they are executed on. Disabling Node.js integration helps prevent an XSS from being escalated into a so-called "Remote Code Execution" (RCE) attack.
// Bad
const mainWindow = new BrowserWindow()
mainWindow.loadURL('https://my-website.com')
// Good
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false,
preload: './preload.js'
}
})
mainWindow.loadURL('https://my-website.com')
<!-- Bad -->
<webview nodeIntegration src="page.html"></webview>
<!-- Good -->
<webview src="page.html"></webview>
When disabling Node.js integration, you can still expose APIs to your website that do consume Node.js modules or features. Preload scripts continue to have access to require and other Node.js features, allowing developers to expose a custom API to remotely loaded content.
In the following example preload script, the later loaded website will have access to a window.readConfig() method, but no Node.js features.
const { readFileSync } = require('fs')
window.readConfig = function () {
const data = readFileSync('./config.json')
return data
}
Therefore you're been warned so that you can Disable Node.js Integration for Remote Content.
I hope this helps answer your question.
The Electron security checklist mentions how to deal with the security warning. In particular, when serving index.html from file: protocol (where you can't use HTTP CSP headers), it is possible to use the meta tag for the same purpose, as documented in the security checklist here: CSP HTTP header.
It recommends to use
<meta http-equiv="Content-Security-Policy" content="default-src 'none'" />
…but I have found (got help on GitHub here) this one to be more practical as it allows one to use script src:
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
More on CSP on content-security-policy.com.
Add
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
Like this and the error message will go away.
The newer version of the electron Vue template has these warnings that were previously disabled in the beta using:
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
Which now requires you to do the following inside your index.js:
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1';
From Electron 2.0 on, developers will see warnings and recommendations printed to the developer console. They only show up when the binary's name is Electron, indicating that a developer is currently looking at the console.
I would suggest you to follow Electron official Security Recommendations checklist to avoid these warnings https://github.com/electron/electron/blob/master/docs/tutorial/security.md
TLDR: Disable eval() in your BrowserWindow options.
I just went through this process on the latest electron, vue etc. and the solution is to disable eval() which can be a security risk due to it executing code which is not from you (or your app).
Add the allowEval: false to your webPreferences during window creation to prevent the warning cleanly:
const win = new electron.BrowserWindow({
webPreferences: {
allowEval: false // This is the key!
}
});
Some background info: electron actually tries to execute some javascript code (from a string using require('electron').executeJavaScript) and, if it succeeds, it considers your code unsafe.
