Question

我正在处理离子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".

更新

我尝试从角度使用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图像

1 个答案: