HTML5 <img> <link> 标签里的 crossorigin 属性到底有什么用

HTML5 <img> <link> 标签里的 crossorigin 属性到底有什么用

Chris Yue No Comment
Posts

之前写过一篇文章叫《HTML5 <script> 标签里的 crossorigin 属性到底有什么用》,其中有说到别的一些链接外部资源的标签,比如 img,也是有 CORS 相关的属性的,但没有系统阐述。我看有小伙伴在评论里问,就直接写一篇新文章来说明吧。

注,本篇只讨论为什么 img/link 要添加 CORS 相关属性,而不讨论如何用这些属性。关于使用方法可见 MDN 文档,写得已经很清楚了。

可能有的小伙伴用过 Gmail,Gmail 在有新邮件的情况下,favicon 是会显示当前登录用户未读邮件数的。先不管 Gmail 实际是怎么实现这个需求的,这里只假设 Gmail 的 favicon 是后台服务动态生成的图片。

如果这个时候有另外一个别有用心的网站,想知道某个用户在 Gmail 有没有账户,比如 chrisyue.com,它可以直接写一个 link 标签或者 img 标签来引入 Gmail 的 favicon 的资源。如果没有 CORS 的保护,chrisyue.com 可以通过 canvas 来读出图片内容并将其发送到攻击者服务器,通过图片内容数据可以判断出 chrisyue.com 的用户在 Gmail 有没有账户,以及是不是登录的状态。

为了防止这种情况,现代的浏览器都会默认 canvas 只能按 tainted 方式读取非同域名下的图片资源,『taint』就是上色,贴膜的意思,比如给汽车车窗贴膜。我理解浏览器里的『贴膜』方式,应该是指只能将图片贴在 canvas 上,但不能将图片作为数据读出来,从而防止某些隐私信息随着图片传到别的地方。

但如果是用了 CORS 定义好了规则,则 canvas 不仅可以读取另外一个域名下的图片资源的数据,还能对其做操作,就跟操作同个域名下的图片一样了。

HTML5 <img> <link> 标签里的 crossorigin 属性到底有什么用 by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

微信赞赏码

写作累,服务器还越来越贵
求分担,祝愿好人一生平安
天使打赏人

发表评论

+ 20 = 30