如何使 HTML5 <video> 与 CSP (Google Chrome) 兼容？
How to make HTML5 <video> compatible with CSP (Google Chrome)?
我在我的网站上使用 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 个 data:image 违反了 CSP 指令。这些 data:image 用于视频元素的控件。如果它们被阻止，则无法使用视频元素。
我知道可以使用 "img-src 'self' data:;" 指令，但我想避免使用此解决方案，因为它会降低我可以从严格的 CSP 指令获得的保护。
我注意到当我使用 Edge 或 Firefox 时，HTML5 video 元素没有违反 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>
我在我的网站上使用 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 个 data:image 违反了 CSP 指令。这些 data:image 用于视频元素的控件。如果它们被阻止，则无法使用视频元素。
我知道可以使用 "img-src 'self' data:;" 指令，但我想避免使用此解决方案，因为它会降低我可以从严格的 CSP 指令获得的保护。
我注意到当我使用 Edge 或 Firefox 时，HTML5 video 元素没有违反 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>