2017-07-04 2 views
0

Ich arbeite an einer ionic 2-Anwendung und empfange eine Fehlermeldung von der Konsole, die besagt, dass Bild und Skript nicht geladen werden, weil es gegen die CSP-Regeln verstößt.CSP Verweigert das Laden von base64 image

Wie für das Bild gespeichert wird, ist die Datenbank als Blob. Ich bin in der Lage, die Base64-Werte zu erhalten, konnte aber nicht auf der Anwendung angezeigt werden.

Index.HTML

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

Komponente Html

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

Fehlermeldung: 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".

aktualisieren

Ich versuchte mit DomSanitizer aus Winkel, aber trifft einen anderen Fehler. Dies ist mein aktualisierter Code.

Komponente ts

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

Komponente ts

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

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

+0

Haben Sie das CSP-Tag tatsächlich so hinzugefügt, dass Ihre Komponente html so ist? Weil es in Ihrer 'index.html' Datei sein muss –

+0

Bitte verwenden Sie https://Stackoverflow.com/posts/44912876/edit, um Ihre Frage zu bearbeiten/zu aktualisieren und fügen Sie die genaue Fehlermeldung hinzu, die Sie in der Devptools Konsole Ihres Browsers sehen – sideshowbarker

+0

@Andreas Gassmann Ja. Ich füge es in der Haupt-'index.html' nicht der Komponente html hinzu. Das tut mir leid. – aaa

Antwort

1

Die Nachricht zeigt Ihnen https://s-media-cache-ak0.pinimg.com zu Ihrer Politik hinzufügen müssen:

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