Question

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

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

Answer 1

经过数天的挑战后，我可以确认无法使用<img>标签和任何当前可用的技术来做到这一点。

正确的方法是像Google一样对图像使用无cookie的代理服务器，但这对我们而言目前太耗资源了。

可接受的解决方法：

要禁用Cookie，请将<img>替换为<iframe sandbox >；
要在<iframe>内显示图像，请使用Data URI和内联CSS；
要模拟<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

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

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

否则，我不知道删除cookie的纯HTML方式。我认为，如果iframe的cors政策禁止，您可以使用JS更改父级的iframe cookie。

Answer 3

在大多数情况下，这不是一种选择，但是如果使用包含Access-Control-Allow-Origin或主机的*标头来提供第三方图片，则可以使用{ {1}}属性可禁用cookie。在这些情况下，您可能还应该添加crossorigin="anonymous"以获得更大的隐私。

referrerpolicy="no-referrer"

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

Answer 4

我不能真正确定下面的代码是否可以满足您的要求（因为我的浏览器，机器和网络中都有大量跟踪保护功能……）但只是添加另一种选择：您是否已尝试过？通过javascript加载图像？
（我最初写的是“ AJAX ”，而不是“ 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>

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

4 个答案: