Recently I'm fiddling with electron preload.js due to security concerns of nodeIntegration set to True. I found it strange that I can pass object, string and numbers from render.js to preload.js normally but it seems that I can't successfully pass DOM event object or some properties of it to the preload.js.

Here is my preload.js:

const fs = require('fs')
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('test', {
    // Cant pass DOM events.
    logFile: (fn, fp) => {
        console.log(fn)
        console.log(fp)
    }
})

Here is my render.js

let holder = document.querySelector('#holder')
holder.addEventListener('drop', (e)=>{
    e.preventDefault()
    e.stopPropagation()

    // Failed. Comment this otherwise the app will crash or log out empty object/list.
    window.test.logFile(e.dataTransfer.files, 'test event transfer')
    window.test.logFile(e.dataTransfer.files[0], 'test event transfer')
    
    // Successful. Information will be logged in the console.
    for (const file of e.dataTransfer.files) {
        const fileName = file.name
        const filePath = file.path

        window.test.logFile({'file name': fileName}, filePath)
    }
    // It's impossible to pass event objects from render to preload.
})
    
holder.addEventListener('dragover', (e) => {
    e.preventDefault()
    e.stopPropagation()
}) 

I'm curious about this behavior. Why am I not able to pass event object directly from the render.js to preload.js as they are just objects, too? If this is a designed behavior then what's the logic behind this?

My env:

• electron - 14.0.0
• Linux Mint 20.2 Cinnamon
• node.js - 16.8.0