Can someone explain me why and what to do?

This is my vue page in electron app :

<template>
  <div v-if="false"></div>
</template>

<script lang="ts">


import { Component, Vue } from 'vue-property-decorator'
import { ipcRenderer } from 'electron'

@Component
export default class Ipc extends Vue {
  private bindIpcEvents(): void {
    ipcRenderer.on('setting', (event: any, ...args: any[]) => {
      //const eventType: any = args[0]
      //const value: any = args[1]
      //this.handleIcpEvents(eventType, value)
    })
    //ipcRenderer.on('preferences', () => {
    //  this.$router.push({ path: '/settings' })
    //})
  }
}
</script>

Can someone explain me why these two lines:

ipcRenderer.on('setting', (event: any, ...args: any[]) => {

}

cause these error messages ?

And how to solve the problem?

I’ve tested also this simpler vue page and gives the same error message:

<template>
  <div v-if="false"></div>
</template>


<script lang="ts">

import { ipcRenderer } from 'electron'

export default {

  methods: {
    rendererFunct () {
      ipcRenderer.on('setting', (event: any, arg: any) => {
        console.log(arg);
      })
    }
  }
}

</script>

So… the problem is something related to webpack configuration?

hi
have you tried to enable node in the renderer process?
for example i have no worries in my app to turn node integration and i can easily access __dirname using node js api
to enable node integration you should define it in the main process where you defined the browser widow like

const mainWindow  = {
...
webPreferences: {
      nodeIntegration: true,
    },
}

Hi @mustafaKamal-fe !!!

I have two questions:

1° Question)

Putting

webPreferences: {
    nodeIntegration: true,
} 

I get this error:

Uncaught TypeError: fs.existsSync is not a function

Searching around for info about this kind of problem, I found this post:

With these link: https://webpack.js.org/concepts/targets/

But I already specified in webpack.config.js the target ‘node’:

in webpack.config.js :

module.exports = {
  entry: './src/background.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'background.js'
  }
}

2° Question)

Why must I put

webPreferences: {
    nodeIntegration: true,
} 

if, for security reasons, it is more secure to have:

webPreferences: {
  nodeIntegration:false,
  contextIsolation: true, // protects against prototype pollution
  preload: path.join(__dirname, "../dist_electron/preload.js"),
}

dist_electron/preload.js :

const {
    contextBridge,
    ipcRenderer
} = require("electron");

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

?

1 Like

hi…
i asssume that you have already solved your problem in question 1. otherwise could you please elaborate more on that.
for the second question, YES, it is a security issue to integrate node inside your renderer process.However, see my application is guaranteed to not let users navigate the internet or go to any external link. in other words, there will be no place where they click to visit a web site on the internet. hence, i am very assured that i have no problem integrating node in the renderer process (the UI part of my application). i remember that even the team behind Discord had to issue this as a security vulnerability (since they used to follow this approach) and fixed it at some point. in coclusion, your secod approach pust you and your app on the safe side anyways. and gain it depends on your application and how you want it to work.

note: imagine you let users navigate to some external site from within your application. and that link or site is a scam. then any attacker can easily inject scrips in your app (since they have access to node from within your renderer process) and jeprodize your app (database , server, etc…)

Hi @mustafaKamal-fe

you can git clone the repo from here: https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding.git

After executing yarn -> yarn electron:serve
you will get the correct page.

But when activating in /src/views/Home.vue this line:

//import { ipcRenderer } from 'electron'

you will get this error:

1 Like

@mustafaKamal-fe I’m using from now on this new account . The old one, “marcoi”, is going to be dismissed

1 Like