OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Get image blob for png, jpeg, gif, and svg while respecting img-src content security policy

  • Thread starter Thread starter TheCloudlessSky
  • Start date Start date
T

TheCloudlessSky

Guest
In my application, a user can load custom content such as a third-party hosted image. I have specific goals (for security):

  1. Load the image in a sandboxed iframe and "transfer" the image to the "host". This allows the "host" to avoid needing to define a CSP with image-src for each possible user-uploaded image. It also allows the browser to handle things like CSP validation for the image source and then the host can trust a data URL of the image.
  2. Keep the "host" CSP restricted to only allow iframes from our "sandbox" iframe.
  3. Keep the "sandbox" CSP restricted for user-defined content. E.g. using img-src to only allow images from that image's host source.

In order to "transfer" the image to the host, I need a blob/data URL/object URL. I've tried the following solutions:

  1. Use fetch() in the "sandbox" to make an HTTP request for the image URL and get the blob. This is treated as connect-src rather than img-src and "opens up" security problems.
  2. Create an <img> with the source of the image, dynamically create a <canvas>, use canvas.getContext('2d').drawImage(img, 0, 0) (and/or related APIs), and then finally use canvas.toBlob(). This works great for JPEGs and PNGs, but only grabs the first frame for GIFs and doesn't include the raw source for an SVG.

Ideally, I'm looking for an image-oriented API (so that img-src is respected). For example:

  • Telling fetch() to expect an image?
  • Using an API like createImageBitmap() from the <img> but with all the data in the loaded image.
  • Using an API directly on <img> to "transfer" it to a different context (e.g. "sandbox" iframe to "host").

Is this possible?
<p>In my application, a user can load custom content such as a third-party hosted image. I have specific goals (for security):</p>
<ol>
<li>Load the image in a sandboxed iframe and "transfer" the image to the "host". This allows the "host" to avoid needing to define a CSP with <code>image-src</code> for each possible user-uploaded image. It also allows the browser to handle things like CSP validation for the image source and then the host can trust a data URL of the image.</li>
<li>Keep the "host" CSP restricted to only allow iframes from our "sandbox" iframe.</li>
<li>Keep the "sandbox" CSP restricted for user-defined content. E.g. using <code>img-src</code> to only allow images from that image's host source.</li>
</ol>
<p>In order to "transfer" the image to the host, I need a blob/data URL/object URL. I've tried the following solutions:</p>
<ol>
<li>Use <code>fetch()</code> in the "sandbox" to make an HTTP request for the image URL and get the blob. This is treated as <code>connect-src</code> rather than <code>img-src</code> and "opens up" security problems.</li>
<li>Create an <code><img></code> with the source of the image, dynamically create a <code><canvas></code>, use <code>canvas.getContext('2d').drawImage(img, 0, 0)</code> (and/or related APIs), and then finally use <code>canvas.toBlob()</code>. This works great for JPEGs and PNGs, but only grabs the first frame for GIFs and doesn't include the raw source for an SVG.</li>
</ol>
<p>Ideally, I'm looking for an image-oriented API (so that <code>img-src</code> is respected). For example:</p>
<ul>
<li>Telling <code>fetch()</code> to expect an image?</li>
<li>Using an API like <code>createImageBitmap()</code> from the <code><img></code> but with <em>all the data</em> in the loaded image.</li>
<li>Using an API directly on <code><img></code> to "transfer" it to a different context (e.g. "sandbox" iframe to "host").</li>
</ul>
<p>Is this possible?</p>
Continue reading...
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top