How to enable nodeintegration in electron webview?

Question

I build an app with Electron an i try to use a webview to display a file loaded from my disk and i need nodeintegration in the webview. Although it is documented in the Electron Documentation here i can`t get it working. I created a test project with the main.js file, which creates a BrowserWindow, where i load my index.html and index.js files. The index.js file creates a webview with my file loaded and the file is webview.html with webview.js. I call require in webview.js and i can see in the DevTools, that it is giving the error

Uncaught ReferenceError: require is not defined
at webview.js:2

Here are my testfiles, what am i missing or got this feature removed? I am using Electron ^12.0.2

main.js

const { app, BrowserWindow, BrowserView } = require('electron')

function createWindow () {
   let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        webviewTag: true,
        nodeIntegrationInWorker: true,
        nodeIntegrationInSubFrames: true
    }
  })

  win.loadFile('index.html')
  return win;
}

app.whenReady().then(() => {
    let win = createWindow();
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <div class="root">
    </div>
    <script src="index.js" charset="utf-8"></script>
</body>
</html>

index.js

function createWebview(id, url) {
        //creates a webview with the id of the tab and the url loaded
        let webview = document.createElement("webview");
        webview.setAttribute("id", id);
        webview.setAttribute("src", url);
        webview.setAttribute("nodeintegration", "");
        webview.setAttribute("preload", "./pre.js")
        webview.addEventListener('dom-ready', () => {
            webview.openDevTools();
        });
        console.log(webview);
        return webview;
}
document.querySelector(".root").appendChild(createWebview("web", `file://${__dirname}/webview.html`));

webview.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        test
        <script src="webview.js" charset="utf-8"></script>
    </body>
</html>

webview.js

console.log("test");
//a require to test the functionality
const { app, BrowserWindow, ipcMain, Menu, MenuItem } = require('electron');

Edit 1: The preload script is empty.

Redstonerayy Redstonerayy · Accepted Answer · 2021-03-25T08:32:59

After thinking much more i came to the solution, that if the webview is similar to the BrowserWindow, then i need to disable contextIsolation in the webPreferences object of the webview. This is definitely something that needs to be added to electron documenten. I change my index.js file like this

function createWebview(id, url) {
        //creates a webview with the id of the tab and the url loaded
        let webview = document.createElement("webview");
        webview.setAttribute("id", id);
        webview.setAttribute("src", url);
        webview.setAttribute("nodeintegration", "");
        webview.setAttribute("webpreferences", "contextIsolation=false");
        webview.addEventListener('dom-ready', () => {
            webview.openDevTools();
        });
        console.log(webview);
        return webview;
}
document.querySelector(".root").appendChild(createWebview("web", `file://${__dirname}/webview.html`));

How to enable nodeintegration in electron webview?

2 Answers