'How can I disable third-party cookies for <img> tags?

Is there a 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.

javascripthtmlsecuritycookiesdeveloper-tools


Solution 1:[1]

This won't be an option in most cases, but if the third-party image is being served with an Access-Control-Allow-Origin header that includes * or your host, it is possible to use the crossorigin="anonymous" attribute to disable cookies. In these cases, you should probably also include referrerpolicy="no-referrer" for greater privacy.

<img
  src="https://graph.facebook.com/officialstackoverflow/picture"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

Most websites will not set this header, and you'll need to find an alternative. But some do, such as Facebook's API, and this is the simplest solution for those cases.

Solution 2:[2]

This is not an ideal solution, but you may be able to use an iframe to load the image, and then use CSS trickery to mask the iframe.

<iframe class="img-frame" sandbox src="https://www.google.com/favicon.ico" />

Otherwise I don't know of a pure HTML way of removing the cookies. I don't believe you can alter an iframes cookies from the parent using JavaScript, if the CORS policy from iframe prevents it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Peter Mortensen

Related Questions