CSP拒絕加載base64圖像

我正在研究離子2應用程序，並從控制檯收到錯誤消息，指出拒絕加載圖像和腳本，因爲它違反了CSP規則。CSP拒絕加載base64圖像

至於圖像，它被存儲的數據庫是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 ({{}})

來源

2017-07-04 aaa

你真的添加了像你的組件html這樣的CSP標籤嗎？因爲它需要在你的'index.html'文件 –

請使用https://stackoverflow.com/posts/44912876/edit來編輯/更新你的問題，並添加你在瀏覽器devtools控制檯中看到的確切錯誤信息 – sideshowbarker

@Andreas Gassmann是的。我將它添加到主index.html而不是組件html中。對於那個很抱歉。 – aaa

的消息表明你需要添加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; 
" />

來源

2017-07-05 06:27:25 sideshowbarker

CSP拒絕加載base64圖像

回答

相關問題