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

[BigBenJr]

Hello there,

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

[nico3333fr]

Hi,

yes, this seems to be a Chrome issue, I was able to reproduce it here: https://www.nicolas-hoffmann.net/source/1369-Balise-video-de-HTML5-Alone-in-the-Light-Terragen2.html

and data: in img-src fixes the problem. This is a browser bug.

[nico3333fr]

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

[dascritch]

This is not a bug : data: should be precised, as it can inject JS, CSS , or as there, an SVG image which may include JS content, font (to target, unanonymise people,...) etc

[nico3333fr]

@dascritch it is a problem: this is the image that Chrome displays to load the video. As it is a browser-related, it should not trigger any CSP violation. (or you have to trigger data: for displaying videos on Chrome... that makes no sense ^^)

[BigBenJr]

Thanks for the report nico.
I guess the only solution is to use data: in img-src until bug is solved.

[BigBenJr]

Same bug happens on Safari:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15

{"csp-report":{"document-uri":"https://xxx","referrer":"","violated-directive":"default-src 'self'","effective-directive":"img-src","original-policy":"default-src 'self'; report-uri https://xxx","blocked-uri":"data","status-code":0}}

[nico3333fr]

Do you have ghostery activated? It seems the problems comes from here.

[BigBenJr]

I don't have Ghostery.
I don't get message error on your website, but I still get one on my website even with all extensions swtich off. What are your CSP directives ?
Could you make a test on my website ?
https://math-coaching.com

[nico3333fr]

This is strange: I've the same bug with Ghostery enabled on your website (a CSP violation on img-src because data: is not enabled in default-src), if I disable Ghostery, no CSP violation on your website.