在Electron渲染器中,我试图通过自定义协议加载图像,但在渲染器控制台中,我得到以下错误:
main_window:13 Refused to load the image 'dir://pumpjack.png' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
尽管我已经显式地设置了img-src。我的index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; img-src * 'self' dir:">
<title>Star Domain</title>
</head>
<body>
<img src="dir://pumpjack.png">
<div id="board"></div>
</body>
</html>
如果我从Meta标签中删除index.html
img-src,那么它只显示:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'">
内容安全策略有两个错误:
main_window:13 Refused to load the image 'dir://pumpjack.png' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
main_window:13 Refused to load the image 'dir://pumpjack.png' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
我正在使用Electron应用程序,默认配置是我使用
yarn create electron-app "Star Domain" --template=webpack-typescript
为什么会发生这种情况,我可以做些什么来修复我的内容安全策略?请注意,JS和CSS在此CSP设置下可以正常加载。
2条答案
按热度按时间omjgkv6w1#
您所显示的策略中的default-src和错误消息是不同的。这意味着您的页面有多个策略。有可能是你的框架(或web服务器,负载均衡器等)添加的默认策略。查看响应标头,并尝试确定这些策略是如何设置的,以便能够修改或删除它们。
7bsow1i62#
这是由于Electron Forge的webpack开发服务器将内容安全策略HTTP头添加到它所服务的index.html。请注意,这不会发生在可分发的Electron应用程序中,因为它不使用这样的开发服务器。
您可以通过设置webpack插件属性
devContentSecurityPolicy
来更改forge.config.ts
项目中的Electron Forge配置来解决此问题。您可以将其设置为实际的CSP,或者如果将其设置为空字符串,则不会向index.html文件添加任何头文件,并且默认情况下,其行为与可分发应用程序中的行为相同。