How can I disable third-party cookies for <img> tags?
Question
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.
4 answers
solution1
26 ACCPTED 2018-07-27 20:00:38
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<iframesandbox>; - To display image inside
<iframe>use Data URI with inline CSS; - To emulate
<img>tag sizing behavior use CSSbackground-size: coverwhich scales the image, this allows to set width and height to the<iframe>which applies to the inner image; - UseARIA attributes to specify
role="img"andaria-labelasaltreplacement.
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>
solution2
6 2019-08-01 16:29:34
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.
solution3
0 2018-07-27 01:23:36
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.
solution4
-3 2019-07-31 14:42:07
I cannot really confirm that the code below does what you wish (because I have so much tracking protection stuff in my browsers, on my machine and on my network...) But just to add another option: Have you already tried to load the images via JavaScript?
<html>
<script>
document.addEventListener('DOMContentLoaded', function () {
var eArr = document.getElementsByTagName('img'), e;
for (e of eArr) {
if (e.hasAttribute('data-src')) {
e.src = e.getAttribute('data-src');
}
}
});
</script>
<body>
<img src="" data-src="https://www.google.com/favicon.ico" alt="">
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.