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:">
所以,我正在尝试从 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:">