CSP header 已阅读但显然不理解

CSP header read but apparently not understood

所以,我正在尝试从 API 中获取图像,这样做:

    fetch(callUrl, {method:'GET', 
          headers: {'Authorization': 'Basic ' + btoa('___')}})
          .then(r => r.blob())
        .then(bl =>    {
          const imageObjectURL = URL.createObjectURL(bl);
      $('<img/>',{src:imageObjectURL}) 

在 IIS 上,我有:

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

这导致收到 header:

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 *

尽管如此,Chrome 告诉我:

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:".

在我看来,它根本就没有阅读 header。 发生了什么/我错过了什么?

尝试在 web.config 中使用以下示例设置。我知道你想使用 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:" />

如果有效,说明我们的CSP value值的格式或写法不正确。

请对CSP的所有设置进行注释,我们可以新建一个html进行测试,并添加<meta>标签进行测试,直至正常运行。

<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:">