How can I disable third-party cookies for tags?

Question

Note: This workaround does not work 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 <iframe sandbox>;
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>

Leave a Comment Cancel reply