如何使HTML5 <video>与CSP(Google Chrome)兼容?

时间:2019-01-10 16:52:45

标签: html google-chrome html5-video content-security-policy

我在我的网站上使用HTML5视频元素,并使用严格的Content-Security-Policy指令(默认为src'self')。首次加载带有视频元素的页面时,我在Google Chrome控制台中收到此错误消息:

[Report Only] Refused to load the image '<URL>' 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.

[Report Only] Refused to load the image 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOTYgMTk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOTYgMTk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05OCw0OXY0Yy0yNC45LDAtNDUsMjAuMS00NSw0NQoJYzAsMTgsMTAuNiwzMy42LDI1LjksNDAuOGwtMS43LDMuNmMwLjEsMCwwLjIsMC4xLDAuMywwLjFjLTAuMSwwLTAuMi0wLjEtMC4zLTAuMWwwLDBDNjAuNSwxMzQuNSw0OSwxMTcuNiw0OSw5OAoJQzQ5LDcwLjksNzAuOSw0OSw5OCw0OXoiLz4KPC9zdmc+Cg==' 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.

总共有9个数据:违反CSP指令的图像。这些data:image用于控制视频元素。如果它们被阻止,则无法使用视频元素。

我知道可以使用“ img-src'self'数据:;”指令,但是我想避免这种解决方案,因为它会降低我从严格的CSP指令中可以获得的保护。

我注意到使用Edge或Firefox时HTML5视频元素没有违反CSP指令。

是否可以解决此问题?谢谢。

Header always set Content-Security-Policy-Report-Only "default-src 'self'; report-uri https://..."

<video width="560" height="315" src="/mp4/youtube-trailer.mp4" poster="/img/video/youtube-trailer.jpg" preload="none" controls></video>

1 个答案:

答案 0 :(得分:3)

是的,这是一个浏览器错误。我能够复制它:https://github.com/nico3333fr/CSP-useful/issues/75

错误报告:https://bugs.chromium.org/p/chromium/issues/detail?id=921027