CODEWITHSUNDEEP
htmlgoogle-chromehtml5-videocontent-security-policy
Big Ben Jr
Big Ben Jr

Reputation: 33

How to make HTML5 <video> compatible with CSP (Google Chrome)?

I use HTML5 video element on my website and a strict Content-Security-Policy directive (default-src 'self'). I get this error message in Google Chrome console when I load for the first time a page with video element: 

[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.

There is a total of 9 data:image violating CSP directive. These data:image are used for the controls of video element. If they are blocked it is impossible to use the video element.

I am aware of the possibility to use "img-src 'self' data:;" directive, but I would like to avoid this solution as it reduce the protection I could get from strict CSP directives.

I notice that HTML5 video element does not violate CSP directive when I use Edge or Firefox.

Is it possible to fix this issue ? Thank you.

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>

Upvotes: 2

Views: 704

Answers (1)

Nicolas Hoffmann
Nicolas Hoffmann

Reputation: 46

Yes, this is a browser bug. I was able to reproduce it: https://github.com/nico3333fr/CSP-useful/issues/75

Bug reported: https://bugs.chromium.org/p/chromium/issues/detail?id=921027

Upvotes: 3

Related Questions