title: Content Security Policy: "img-src 'self' data:"
body: <p>I have an app, in which the user would be able to copy an image URL, paste it unto an input and the image will be loaded on a box.</p>
  <p>But my app, keeps triggering this message:</p>
  <blockquote>
  <p>Refused to load the image 'LOREM_IPSUM_URL' because it violates the following Content Security Policy directive: &quot;img-src 'self' data:&quot;.</p>
  </blockquote>
  <p>That's my meta tag:</p>
  <pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src *; 
  img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; 
  style-src  'self' 'unsafe-inline' *&quot;&gt;
  </code></pre>
  <p>I'm using html2Canvas within the app, and when I remove this: &quot;img-src 'self' data:&quot;</p>
  <p>It fires this error:</p>
  <pre><code>html2canvas.js:3025 Refused to load the image 'data:image/svg+xml,
  &lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;/svg&gt;' because it violates
  the following Content Security Policy directive: &quot;default-src *&quot;. 
  Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
  </code></pre>
  <p>Along with a bunch of other errors.</p>