配置内容安全策略以从远程URL和本地检索图像

Question

我已经配置了内容安全策略元，如下所示：

<meta http-equiv="Content-Security-Policy" content="default-src *;
script-src 'self' 'unsafe-eval' 'unsafe-inline';
img-src *;
style-src 'self' 'unsafe-inline';">

然而，我仍然得到Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:

这怎么可能呢？我想实现的是启用来自远程URL的数据，如：https://example.com和"自我"。为此，我尝试了不同的选择，比如，但都不起作用。

<meta http-equiv="Content-Security-Policy" content="default-src *;
script-src 'self' 'unsafe-eval' 'unsafe-inline';
img-src https://example.com 'self';
style-src 'self' 'unsafe-inline';">
<meta http-equiv="Content-Security-Policy" content="default-src *;
script-src 'self' 'unsafe-eval' 'unsafe-inline';
img-src https: 'self';
style-src 'self' 'unsafe-inline';">

我使用像Angular中的图像，其中"image"值包含远程图像URL。

<img [defaultImage]="'assets/images/product/placeholder.jpg'"
[lazyLoad]="image"
[alt]="image" class="img-fluid" [src]="image">

Answer 1

这里有一个小打字错误https//example.com应该是https://example.com或带有通配符*.example.com

<meta http-equiv="Content-Security-Policy" content="default-src *;
script-src 'self' 'unsafe-eval' 'unsafe-inline';
img-src *.example.com 'self';
style-src 'self' 'unsafe-inline';">