如何禁用<img>标签的第三方cookie？

Question

是否有任何解决方案可以禁用使用H​​TML5或JavaScript技术从第三方域加载的图像的cookie？

我正在寻找类似于标签属性或标签sandbox属性的东西.<iframe>referrerpolicycrossorigin<img>

Answer 1

经过这个问题的几天挑战后,我可以确认使用<img>标签和任何当前可用的技术无法做到这一点.

正确的方法是为像谷歌这样的图像使用cookieless代理服务器,但这对我们来说太耗费资源了.

可接受的解决方法:

• 禁用cookie替换<img>为;<iframesandbox>
• 要在内部显示图像,请<iframe>使用内联CSS的数据URI ;
• 要模拟<img>标签大小调整行为,请使用background-size: cover缩放图像的CSS ,这样可以将宽度和高度设置为<iframe>适用于内部图像的宽度和高度.
• 使用ARIA属性来指定role="img",并aria-label作为alt替代品.

例:

<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>

Answer 2

在大多数情况下，这不是一个选项，但如果第三方图像提供的标Access-Control-Allow-Origin头包含*您的主机，则可以使用该crossorigin="anonymous"属性来禁用 cookie。在这些情况下，您可能还应该包含referrerpolicy="no-referrer"更多隐私。

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

大多数网站不会设置此标头，您需要找到替代方案。但有些确实如此，例如 Facebook 的 API，这是针对这些情况的最简单的解决方案。