I am using the Polaris library to render a component that emits image markup like:
<img class="Polaris-VideoThumbnail__PlayIcon" src="data:image/svg+xml;base64,PHN2Zy....">
This triggers a Content Security Directive issue that precludes the image from rendering. I’ve tried applying a number of policies but have not found one that works when the app is deployed.
Presently the policy is applied via a meta tag like:
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data: https:; script-src *.twimg.com *.twitter.com 'self' 'unsafe-inline'; style-src *.twimg.com *.twitter.com 'self' 'unsafe-inline'">
This works locally – even if I fudge my HOSTS file to use a non-localhost URL to emulate an external request. But when I deploy my app the play icon is broken and I get:
Refused to load the image 'data:image/svg+xml;base64,PHN2ZyB...' because it violates the following Content Security Policy directive: "default-src https: 'unsafe-eval' 'unsafe-inline'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
The issue is presently manifesting itself at https://witty-ocean-02e42dd0f-168.eastus2.azurestaticapps.net/vaccineinfo
When I enter the contents of my meta tag into the CSP evaluator, I get:
img-src All Good
Why is my browser (Chrome) complaining that img-src isn’t set on my deployed instance?