How to disable third-party cookie for <img> tags?

Question

Is there any solution to disable cookies for images loaded from third-party domains using HTML5 or JavaScript techniques?

I'm looking for something similar to sandbox attribute for <iframe> tag, referrerpolicy or crossorigin attributes for <img> tag.

Answer 1

Update: This workaround no longer works for:

• Firefox 68
• Safari 12.1.2

---

After several days of challenge with this issue, I can confirm this can not be done using the <img> tag and any currently available techniques.

The right way is to use cookieless proxy server for images like Google does, but this is too resource intensive for us at this moment.

Acceptable workaround:

• To disable cookie replace <img> with <iframesandbox>;
• To display image inside <iframe> use Data URI with inline CSS;
• To emulate <img> tag sizing behavior use CSS background-size: cover which scales the image, this allows to set width and height to the <iframe> which applies to the inner image;
• Use ARIA attributes to specify role="img" and aria-label as alt replacement.

Example:

<img width="100" height="75" alt="About company"       src="https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png" />    <iframe width="100" height="75" aria-label="About company" role="img"          frameborder="0" sandbox          src="data:text/html,<style>body{background:url('https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png') center/cover no-repeat;padding:0;margin:0;overflow:hidden}</style>"></iframe>