Question

我一直在阅读电子安全文档。 https://electronjs.org/docs/tutorial/security 试图了解我应该如何安全地编写代码。

据我了解，我应该使用webPreferences和preload脚本来访问将访问文件系统的功能。

我想有一个打开文件选择器的按钮。

我尝试使用预加载脚本，但据我所知，该脚本从未加载或运行。有人可以向我解释预加载脚本的工作原理吗？它会在哪里加载，或者我可以在chrome开发工具中查看它是否已加载？它何时运行，在页面加载之前还是之后？我还能在html文件的脚本中引用功能吗？

const mainWindow = new BrowserWindow({
{width: 800, height: 600},
  webPreferences: {
    nodeIntegration: false,
    preload: `file://${__dirname}/index.js`
  }
});

mainWindow.loadURL(`file://${__dirname}/index.html`);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron Hello World!</title>
  </head>
  <body>
    <h1>Electron Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
    <br/>
    <button id="openFile" onclick="openFile();">Open</button>
    <br />
    <textarea id="editor" style="width: 400px; height: 300px;"></textarea>
  </body>
</html>

index.ts

{
    console.log('preloaded');
const electron = require('electron').remote;
const dialog = electron.dialog;
const fs = require('fs');
function openFile () {
    dialog.showOpenDialog({filters: [{ name: 'text', extensions: ['txt'] }]}, function (fileNames) {
        if (fileNames === undefined) 
        {
            return;
        }
        var fileName = fileNames[0];
        fs.readFile(fileName, 'utf-8', function (err, data) {
            document.getElementById("editor").innerText = data;
        });
    }); 
} 
}

此代码无效。 index.html中的版本号不会显示，但会在控制台中导致错误。 console.log无法运行，并且按钮事件不起作用。

Electron webPreferences预加载脚本，其运行方式和位置？

0 个答案: