无法在电子js中加载本地文件答案

【问题标题】：Cannot load local files in electron js无法在电子js中加载本地文件
【发布时间】：2022-01-05 09:04:44
【问题描述】：

目标：从硬盘加载本地视频文件

Techstack：反应电子 v16 electronforge v6 webpack

我的 index.html 看起来像这样

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>app</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

我没有通过任何内容安全政策，

在我的 videoComponent.tsx

 <video
     id="video1"
     ref={videoRef}
     className="video"
    src ={`priviliged://${videoPath}`} // videopath = " E:\videofolder\videofile.mp4"
></video>

根据https://www.electronjs.org/docs/latest/api/protocol#protocolregisterschemesasprivilegedcustomschemes 标准方案遵循 RFC 3986 所称的通用 URI 语法。例如 http 和 https 是标准方案，而 file 不是。

我决定根据文档制作自定义特权协议在 electron.main.ts

  app.whenReady().then(() => {
  protocol.registerSchemesAsPrivileged([
    { scheme: "priviliged", privileges: { bypassCSP: true } },
  ]);
});

并应用于 videocomponent.tsx ` 但我仍然收到此错误

Refused to load media from 'priviliged://E:\videofolder\videofile.mp4' 
because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". 
Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.

我该怎么办？

【问题讨论】：

好吧，我认为这不是我的堆栈或代码中的错误，只需尝试最新的 electron forge typescript webpack 模板并将 web security 设置为 none 并添加一个带有 src 的视频标签到路径任何本地文件。您将遇到 csp 错误

标签： javascript reactjs electron content-security-policy electron-forge

【解决方案1】：

由于您使用的是文件协议，

在 index.html 文件中添加以下行

<meta http-equiv="Content-Security-Policy" content="default-src 'none'">

【讨论】：

添加另一个策略将要求两者都需要通过。这个会阻止一切。
我尝试了这两种方法，我得到这个或更多的 CSP 错误；-； index.js:842 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data: filesystem:". at Object../node_modules/webpack-dev-server/client/index.js?

【解决方案2】：

您需要修改内容安全策略。您当前的策略是“default-src 'self' 'unsafe-inline' data:”，这将允许来自您的页面加载的主机的任何脚本、任何内联脚本以及通过数据方案的任何内容。要允许加载本地文件，您可能需要将“文件系统：”添加到您的 CSP 中：

default-src 'self' 'unsafe-inline' 数据：文件系统：

【讨论】：