html里面的crossorigin属性

html里面的crossorigin属性


前言

html中拥有crossorigin属性的元素有:script,link,img。都是用于CORS请求。

一、script中crossorigin属性作用

当引入跨域的脚本(比如用了 apis.google.com 上的库文件)时,如果这个脚本有错误,因为浏览器的限制(根本原因是协议的规定),是拿不到错误信息的。当本地尝试使用 window.onerror 去记录脚本的错误时,跨域脚本的错误只会返回 Script error。

而 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息的,但有两个条件:一是跨域脚本的服务器必须通过 Access-Control-Allow-Origin 头信息允许当前域名可以获取错误信息,二是网页里的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址,也就是 crossorigin 属性。有了这两个条件,就可以获取跨域脚本的错误信息。

但是当script中的src为一个跨域的html资源,其报错信息就有可能泄漏隐私信息,因此就需要慎重考虑清楚是否使用crossorigin 属性。

二、img、link中crossorigin 属性作用

img、link添加crossorigin属性后,canvas 不仅可以读取另外一个域名下的图片资源的数据,还能对其做操作,就跟操作同个域名下的图片一样了。
未添加时, canvas 只能按 tainted 方式读取非同域名下的图片资源,『taint』就是上色,贴膜的意思,比如给汽车车窗贴膜。我理解浏览器里的『贴膜』方式,应该是指只能将图片贴在 canvas 上,但不能将图片作为数据读出来,从而防止某些隐私信息随着图片传到别的地方。

参考博文:https://www.chrisyue.com/what-the-hell-is-crossorigin-attribute-in-html-script-tag.html

猜你喜欢

转载自blog.csdn.net/wdhxs/article/details/110144117