翻译 | 《JavaScript Everywhere》第19章将现有的Web应用程序与Electron集成_electron security warning (insecure resources)-优快云博客

本文链接：https://blog.youkuaiyun.com/code_maomao/article/details/110218077

本章节介绍如何将现有的Web应用程序与Electron框架集成，创建桌面应用。内容包括设置应用程序加载本地Web应用，配置运行环境，处理安全警告，特别是内容安全策略的配置。通过配置文件管理开发和生产环境的差异，提升应用安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

翻译 | 《JavaScript Everywhere》第19章将现有的Web应用程序与Electron集成

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ…:*☆哎哟不错哦

第19章将现有的Web应用程序与Electron集成

我喜欢收集浏览器书签，就像一个小孩在沙滩上收集贝壳一样。我不是一定要收集它们，但是到一天结束时，我已经在几个浏览器窗口中打开了许多选项卡。我并不是炫耀，但我怀疑应该不止我一个人是这样。所以，我使用了一些最常用的Web应用程序的桌面版本。通常，这些应用程序对比网页版并没有什么优势，但是独立应用程序的便利性使它们全天易于访问、查找和切换。

在本章中，我们将研究如何获取现有的Web应用程序并将其包装在Electron Shell中。在继续之前，你将需要安装示例API和Web应用程序的本地副本。如果你还没有阅读整本书，请访问附录A和附录B进行操作。

集成我们的Web应用程序

在上一章中，我们设置了Electron应用程序加载index.html文件。我们也可以加载特定的URL。在本例中，我们将从加载本地运行的Web应用程序的URL开始。首先，请确保你的Web应用程序和API在本地运行。然后我们可以更新src/index.js文件，首先将BrowserWindow中的nodeIntegration设置为false。这将避免本地运行的节点应用程序访问外部站点的安全风险。

webPreferences: {
    nodeIntegration: false
},

现在，更改window.loadFile(’index.html’);，如下：

window.loadURL('http://localhost:1234');

运行Web应用程序

你的Web应用程序的本地实例将需要在1234端口上运行。如果你一直在阅读本书，请从Web应用程序目录的根目录运行npm start来启动开发服务器。

这将指示Electron加载URL，而不是文件。现在，如果你使用npm start运行该应用程序，你会看到它已加载到Electron窗口中，但有一些警告。

警告和错误

Electron浏览器开发者工具和我们的终端显示了大量警告和错误。让我们看一下其中的每一个（见图19-1）。

图19-1。我们的应用程序正在运行，但显示大量错误和警告。

首先，我们的终端显示了大量SyntaxError：Unexpected Token errors.此外，我们的开发者工具会显示几个相应的警告，指出DevTools无法解析SourceMap。这两个错误与Parcel生成source map和Electron读取source map的方式有关。不幸的是，结合我们正在使用的技术，似乎没有针对此问题的合理解决方案。最好的选择是禁用JavaScript源映射。在应用程序窗口的开发人员工具中，单击“设置”，然后取消选中“启用JavaScript源映射”（请参见图19-2）。

图19-2。禁用源映射将减少错误和警告的数量

现在，如果退出并重新启动应用程序，将不再看到与源地图有关的问题。这样做的代价是，在Electron内调试客户端JavaScript可能会更加困难，但是值得庆幸的是，我们仍然可以在Web浏览器中访问此功能和我们的应用程序。

最后两个警告与Electron的安全性有关。在将生产应用程序捆绑在一起之前，我们将解决这些问题，但是现在值得探讨这些警告是什么。

Electron Security Warning(Insecure Resources)电子安全警告（资源不安全）

此警告通知我们，我们正在通过http连接加载Web资源。在生产中，我们应始终通过https加载资源，以确保隐私和安全。在开发中，通过http加载本地主机不是问题，因为我们将引用托管网站，该网站在捆绑的应用程序中使用https。
Electron Security Warning(Insecure Content-Security-Policy)电子安全警告（不安全的内容安全策略）

此警告通知我们我们尚未设置内容安全策略（CSP）。CSP允许我们指定允许我们的应用程序从哪个域加载资源，从而大大降低了跨站点脚本（XSS）攻击的风险。同样，在本地开发期间这不是问题，但在生产中很重要。我们将在本章稍后部分使用CSP。