CSP header read but apparently not understood - iis

Question

So, I am trying to obtain images from an API, doing like this:
fetch(callUrl, {method:'GET',
headers: {'Authorization': 'Basic ' + btoa('___')}})
.then(r => r.blob())
.then(bl => {
const imageObjectURL = URL.createObjectURL(bl);
$('<img/>',{src:imageObjectURL})
On IIS, I have :
<system.webServer>
<cors enabled="true">
<add origin="_mysite_"
allowCredentials="true"
maxAge="120">
<allowHeaders allowAllRequestedHeaders="true" />
</add>
</cors>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="default-src 'self' http://mysite:* blob: data:; img-src 'self' http://mysite:* data: http: https: blob:;script-src 'self' 'unsafe-inline' 'unsafe-eval' http://mysite:*;style-src 'self' 'unsafe-inline';frame-src *" />
</customHeaders>
</httpProtocol>
</system.webServer>
Which results in a header being received:
Content-Security-Policy: default-src 'self' http://mysite:* blob: data:; img-src 'self' http://mysite:* data: http: https: blob:;script-src 'self' 'unsafe-inline' 'unsafe-eval' http://mysite:*;style-src 'self' 'unsafe-inline';frame-src *
Nevertheless, Chrome tells me:
Refused to load the image 'blob:http://gdcvmas163/bfece579-fe7c-49f7-99ef-9773b592acd3' because it violates the following Content Security Policy directive: "img-src 'self' data: https:".
Which to me seems like it doesnt read the header at all.
What is going on/ what am I missing?

Answer 1

Try to use below sample setting in your web.config. I know you want use http://mysite:*.
<add name="Content-Security-Policy" value="worker-src blob:; child-src blob: gap:; img-src 'self' blob: data:; default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:" />
If it works, it means that the format or writing of our CSP value value is incorrect.
Please comment all the settings about CSP, and we can create a new html for test and add <meta> tag for test, until it works well.
<meta http-equiv="Content-Security-Policy"
content="
worker-src blob:;
child-src blob: gap:;
img-src 'self' blob: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">