Electron安全
正如我在前几篇文章所说，后端和前端往往遵循不同的规则：
- 后端代码拥有计算机具有完全访问权限
- 前端代码运行来自互联网上站点的代码，但它无法访问浏览器之外的任何内容。
在本文中，我们将忽略这些最佳实践，让前端做它想做的事情。
开启高风险模式
下面是我们如何启动这样高特权的前端代码：
let { app, BrowserWindow } = require("electron")
function createWindow() {
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: true, // 浏览器中公开节点功能
contextIsolation: false, // 禁用安全隔离
}
})
win.maximize()
win.loadFile("index.html")
}
app.on("ready", createWindow)
app.on("window-all-closed", () => {
app.quit()
})
现在，我将直接使用浏览器API来完成所有DOM操作。
获取DOM元素
只需要三个节点可以执行任何操作：
form，告诉我们用户何时按下Enterinput保存用户键入的命令#history我们将在其中追加命令及其输出
let form = document.querySelector("form")
let input = document.querySelector("input")
let terminalHistory = document.querySelector("#history")
显示命令输入
现在让我们创建这个片段：
<div class="input-line">
<span class="prompt">$</span>
<span class="input">${command}</span>
</div>
使用DOM，如下：
function createInputLine(command) {
let inputLine = document.createElement("div")
inputLine.className = "input-line"
let promptSpan = document.createElement("span")
promptSpan.className = "prompt"
promptSpan.append("$")
let inputSpan = document.createElement("span")
inputSpan.className = "input"
inputSpan.append(command)
inputLine.append(promptSpan)
inputLine.append(inputSpan)
return inputLine
}
显示命令输入和输出
我们还想显示命令输出，所以我写了另一个函数。它将在#history后附加以下片段：
<div class="input-line">
<span class="prompt">$</span>
<span class="input">${command}</span>
</div>
<div class="output">${commandOutput}</div>
function createTerminalHistoryEntry(command, commandOutput) {
let inputLine = createInputLine(command)
let output = document.createElement("div")
output.className = "output"
output.append(commandOutput)
terminalHistory.append(inputLine)
terminalHistory.append(output)
}
运行命令
let child_process = require("child_process")
form.addEventListener("submit", (e) => {
e.preventDefault()
let command = input.value
let output = child_process.execSync(command).toString().trim()
createTerminalHistoryEntry(command, output)
input.value = ""
input.scrollIntoView()
})
我们执行addEventListener/preventDefault将JavaScript代码附加到HTML事件。
结果
这是它看起来的样子：
正如你所看到的，ls工作得很好，但是cal试图使用一些特殊的代码来突出显示当天，结果有点混乱。
在接下来的几篇文章，我们将改进这个应用程序。
