CSP 拒绝加载 base64 图像

Question

我正在处理 ionic 2 应用程序并从控制台收到错误消息，指出拒绝加载图像和脚本，因为它违反了 CSP 规则。

至于图像，它是以 blob 形式存储在数据库中的。我能够获取 base64 值，但无法在应用程序上显示它。

Index.html

<head>
    <meta http-equiv="Content-Security-Policy" content="
       img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
    " />
</head>

组件Html

<ion-card>
<img src="data:image/png;base64,{{storePhoto}}">
</ion-card>

错误信息：Refused to load the image 'unsafe:data:image/png;base64,' because it violates the following Content Security Policy directive: "img-src 'self' data: https://s-media-cache-ak0.pinimg.com".

更新

我尝试使用 angular 中的 DomSanitizer，但遇到了另一个错误。这是我更新后的代码。

组件 ts

import { DomSanitizer } from '@angular/platform-browser';
constructor(public DomSanitizerService : DomSanitizer){}

组件 ts

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(data:image/png;base64,{{storePhoto}})" />

Uncaught(in promise):Error: Template parse errors:Parser Error: Got interpolation ({{}})

Answer 1

该消息表明您需要将 https://s-media-cache-ak0.pinimg.com 添加到您的策略中：

<meta http-equiv="Content-Security-Policy" content="
img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
script-src 'self' https://maps.googleapis.com;
" />

CSP 拒绝加载 base64 图像

CSP Refuse to load base64 image

content-security-policy

ionic2