CODEWITHSUNDEEP
ionic2content-security-policy
aaa
aaa

Reputation: 858

CSP Refuse to load base64 image

I am working on an ionic 2 application and receiving error message from the console stating that refuse to load image and script because it violates the CSP rules.

As for the image, it is being stored is the database as blob. I am able to get the base64 values but could not display it on the application.

Index.html

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

Component Html

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

Error Message : 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".

Update

I tried using DomSanitizer from angular but hits another error. This is my updated code.

Component ts

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

Component ts

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

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

Upvotes: 0

Views: 6756

Answers (1)

sideshowbarker
sideshowbarker

Reputation: 88286

The message indicates you need to add https://s-media-cache-ak0.pinimg.com to your policy:

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

Upvotes: 1

Related Questions