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

Question

是否有解决方案来禁用使用 HTML5 或 JavaScript 技术从第三方域加载的图像的 cookie？

我正在寻找类似于<iframe>标签的sandbox属性、 <img>标签的referrerpolicy或crossorigin属性的东西。

Answer 1

注意：此解决方法不适用于：

火狐 68
Safari 12.1.2

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

正确的方法是像谷歌那样使用无cookie代理服务器来处理图像，但这对我们来说太耗资源了。

可接受的解决方法：

禁用 cookie 替换<img>为<iframe sandbox > ；
要在<iframe>中显示图像，请使用带有内联 CSS 的Data URI ；
要模拟<img>标签的大小调整行为，请使用 CSS background-size: cover缩放图像，这允许将宽度和高度设置为适用于内部图像的<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，这是针对这些情况的最简单的解决方案。

Answer 3

这不是一个理想的解决方案，但您可以使用 iframe 加载图像，然后使用 CSS 技巧来屏蔽 iframe。

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

否则我不知道删除 cookie 的纯 HTML 方式。 如果 iframe 的CORS策略阻止它，我不相信您可以使用 JavaScript 从父级更改 iframe cookie。

Answer 4

我无法真正确认下面的代码是否符合您的要求（因为我的浏览器、机器和网络上有很多跟踪保护内容......）但只是添加另一个选项：您是否已经尝试加载通过 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>

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

问题描述

4 个解决方案

解决方案1
26 已采纳 2018-07-27 20:00:38

解决方案2
6 2019-08-01 16:29:34

解决方案3
0 2018-07-27 01:23:36

解决方案4
-3 2019-07-31 14:42:07

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

问题描述

4 个解决方案

解决方案1 26 已采纳 2018-07-27 20:00:38

解决方案2 6 2019-08-01 16:29:34

解决方案3 0 2018-07-27 01:23:36

解决方案4 -3 2019-07-31 14:42:07

解决方案1
26 已采纳 2018-07-27 20:00:38

解决方案2
6 2019-08-01 16:29:34

解决方案3
0 2018-07-27 01:23:36

解决方案4
-3 2019-07-31 14:42:07