title: CSP Refuse to load base64 image
body: <p>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. </p>
  
  <p>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.</p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Security-Policy" content="
         img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
      " /&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>Component Html</strong></p>
  
  <pre><code>&lt;ion-card&gt;
  &lt;img src="data:image/png;base64,{{storePhoto}}"&gt;
  &lt;/ion-card&gt;
  </code></pre>
  
  <p>Error Message : <code>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".</code></p>
  
  <p><strong>Update</strong></p>
  
  <p>I tried using <code>DomSanitizer</code> from angular but hits another error. This is my updated code.</p>
  
  <p><strong>Component ts</strong></p>
  
  <pre><code>import { DomSanitizer } from '@angular/platform-browser';
  constructor(public DomSanitizerService : DomSanitizer){}
  </code></pre>
  
  <p><strong>Component ts</strong></p>
  
  <pre><code>&lt;img [src]="_DomSanitizationService.bypassSecurityTrustUrl(data:image/png;base64,{{storePhoto}})" /&gt;
  </code></pre>
  
  <p><code>Uncaught(in promise):Error: Template parse errors:Parser Error: Got interpolation ({{}})</code></p>