OBJECTIVE: to load a local video file from hard drive
Techstack : react electron v16 electronforge v6 webpack
my index.html looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
i have NOT passed any content security policies,
in my videoComponent.tsx
<video
id="video1"
ref={videoRef}
className="video"
src ={`priviliged://${videoPath}`} // videopath = " E:\videofolder\videofile.mp4"
></video>
as according to https://www.electronjs.org/docs/latest/api/protocol#protocolregisterschemesasprivilegedcustomschemes A standard scheme adheres to what RFC 3986 calls generic URI syntax. For example http and https are standard schemes, while file is not.
i decided to make a custom priviliged protocol as per the docs in electron.main.ts
app.whenReady().then(() => {
protocol.registerSchemesAsPrivileged([
{ scheme: "priviliged", privileges: { bypassCSP: true } },
]);
});
and applied to videocomponent.tsx ` but i still get this error
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.
what should i do?
You will need to modify the content-security-policy. Your current policy is "default-src 'self' 'unsafe-inline' data:", which will allow any script from the host where your page loads, any inline script and anything via the data scheme. To allow loading local files you will likely need to add "filesystem:" to your CSP as such:
default-src 'self' 'unsafe-inline' data: filesystem:
Since you are using file protocol,
Add the following line in your in index.html file
<meta http-equiv="Content-Security-Policy" content="default-src 'none'">