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

问题描述

我已经这样配置了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:

这怎么可能？我想要实现的是从https://example.com和'self'等远程URL启用数据。为此，我尝试了其他类似的选择，但没有一个起作用。

<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的图像，其中“图像”值包含远程图像URL。

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

解决方法

您在这里有一些错字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';">

angular content-security-policy html