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

Question

我已经像这样配置了 Content-Security-Policy 元数据：

<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 和 'self'。为此，我尝试了不同的选项，但 none 有效。

<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';">

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

Configuration of Content Security Policy to retrieve images from remote URL and local

html

content-security-policy

angular