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

时间:2018-07-27 01:02:08

标签: javascript html5 security cookies

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

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

4 个答案:

答案 0 :(得分:6)

经过数天的挑战后,我可以确认无法使用<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>

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:0)

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

referrerpolicy="no-referrer"

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

答案 3 :(得分:-3)

我不能真正确定下面的代码是否可以满足您的要求(因为我的浏览器,机器和网络中都有大量跟踪保护功能……)但只是添加另一种选择:您是否已尝试过?通过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>