Javascript 如何为<；禁用第三方cookie；img>；标签？_Javascript_Html_Security_Cookies

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

javascript html security cookies

Javascript 如何为<；禁用第三方cookie；img>；标签？,javascript,html,security,cookies,Javascript,Html,Security,Cookies,是否有任何解决方案可以使用HTML5或JavaScript技术禁用从第三方域加载的图像的cookie 我正在寻找类似于标记的属性，或者标记的属性。不是理想的解决方案，但是您可以使用iframe加载图像，然后使用css技巧来屏蔽iframe <iframe class="img-frame" sandbox src="https://www.google.com/favicon.ico" /> 否则，我不知道用纯HTML的方式删除cookies。如果iframe的cors策略阻止

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

我正在寻找类似于

标记的属性，或者

标记的属性。

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

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

否则，我不知道用纯HTML的方式删除cookies。如果iframe的cors策略阻止，我不相信您可以使用JS从父级更改iframes Cookie。

更新：此解决方案不再适用于：

火狐68
Safari 12.1.2

经过几天对这个问题的质疑，我可以确认这不能用

我无法确认下面的代码是否符合您的要求（因为我的浏览器、机器和网络中都有很多跟踪保护功能……），但我只是想添加另一个选项：您是否已经尝试通过javascript加载图像？
（我最初写的是“AJAX”而不是“javascript”-塞缪尔·威勒姆，谢谢你告诉我我的错误。）


document.addEventListener（'DOMContentLoaded'，函数（）{
var arr=document.getElementsByTagName（'img'），e；
对于（耳环的e）{
if（e.hasAttribute（'data-src'））{
e、 src=e.getAttribute（'data-src'）；
}
}
});

在大多数情况下，这不是一个选项，但是如果第三方映像使用包含

或您的主机的

访问控制允许源文件标题，则可以使用crossorigin=“anonymous”
属性禁用cookie。在这些情况下，您可能还应该包括refererpolicy=“no referer”
，以获得更大的隐私

谢谢你的回答，这是我解决这个问题的第一个方法之一。祝你好运，如果你找到了答案，请留下听，知道这是否可能会很有趣-1；这似乎不起作用（至少在Chrome中，它仍然会向Google发送cookies-请查看您的网络选项卡），而且在典型情况下（您不信任第三方，这就是您想要禁用第三方cookies的全部原因），它会造成不可接受的安全漏洞。仅仅因为URL今天返回图像并不意味着它总是会返回图像；如果有一天第三方服务器决定返回一个包含网络钓鱼表单的HTML页面，那么采用这种方法，您将为他们将该表单嵌入到您的页面中，这是非常糟糕的。这既有趣又聪明，但我不确定它是否如前所述工作。我在Firefox中尝试了这一点（首先从代码片段中删除原始img以避免混淆），在域上手动设置了一些Cookie之后，它们被包含在来自iframe的请求中：这在Chrome中似乎是可行的，但是查看了沙盒规范、功能策略以及我能找到的任何文档，我没有发现任何关于沙盒影响饼干的说法。这可能不是一种标准化的行为，我们可以跨浏览器依赖。@JeremyBanks，今天我在macOS上的Chrome、Opera、Firefox和Safari、Android上的Chrome和WebView以及iOS上的Safari上重新测试了这个解决方案。一切正常。我在我的宠物项目中使用这种方法大约一年了——我厌倦了一个简化的例子，你可以在上找到，它似乎仍然在Firefox中发送请求中的cookie，正如你在和上面发布的屏幕截图中所看到的。我做错什么了吗？它似乎不起作用。在Bugzilla-@JeremyBanks上发布了一个问题，谢谢你的评论。我的主要想法是显示来自第三方域的图像，但不允许它们设置/发送cookie。将此视为自定义Twitter应用。明白了。关于堆栈溢出本身如何防止在网站上加载Facebook头像时将Cookie和推荐者发送到Facebook的供参考。令人沮丧的是，似乎没有一种简单的、符合规范的、只有前端才能做到这一点的方法。Jeremy Banks注意到，接受的答案不能保证按规范工作。在图像上使用crossorigin=“anonymous”
是不正确的，因为它将请求设置为“cors”，从而使请求返回网络错误，除非第三方服务器发出适当的access control allow origin
头。使用fetch
和credentials:'omit'，mode:'no cors'
可以让请求成功，但返回一个“不透明”的响应。我得到的最好的主意是，如果有人想从Jeremy的赏金中获利，可以在接下来的23小时内尝试一下，是使用fetch
然后在CacheStorage
中缓存不透明响应，然后使用服务人员将该不透明响应作为图像src提供吗？不过，我没有时间学习如何使用其中涉及的工具。如何使用？他们获取一个URL和一个图像的大小，并为您自动缩放它。所以Cookie不会成为问题，因为它可以访问url@JeremyBankst在问题和评论中提到了这一点，但我认为应该在回答中明确写明，因为我在第一次阅读这篇文章时对此并不清楚。crossorigin是否应该污染图像，这意味着它仍然显示，但不能通过画布读取其像素？这是一个合理的建议，但是代码片段并不像您建议的那样使用Ajax。。。
<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>