crossorigin属性的目的......？

Question

在图像和脚本标签中.

我的理解是您可以访问其他域上的脚本和图像.那么什么时候使用这个属性？

当你想限制他人访问你的脚本和图像的能力时,这是吗？

图片

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

脚本

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Answer 1

答案可以在规范中找到.

用于img:

该crossorigin属性是CORS设置属性.其目的是允许来自允许跨源访问的第三方站点的图像使用canvas.

并为script:

该crossorigin属性是CORS设置属性.对于从其他来源获取的脚本,它控制是否将公开错误信息.

Answer 2

这就是我们crossorigin在script标记中成功使用它的方法:

我们遇到的问题:我们试图使用服务器记录服务器中的js错误 window.onerror

我们记录的几乎所有错误都有这样的信息:Script error.我们得到的关于如何解决这些js错误的信息非常少.

事实证明,chrome中的本机实现报告错误

if (securityOrigin()->canRequest(targetUrl)) {
        message = errorMessage;
        line = lineNumber;
        sourceName = sourceURL;
} else {
        message = "Script error.";
        sourceName = String();
        line = 0;
}

将发送message,就Script error.好像请求的静态资产违反浏览器的同源策略一样.

在我们的例子中,我们从cdn提供静态资产.

我们解决它的方法是将标签添加crossorigin到script标签中.

PS得到了这个答案的所有信息

Answer 3

启用CORS的图像可以在元素中重复使用而不会受到污染.允许的值是:

该页面已经回答了您的问题.

如果您有一个跨原始图像,您可以将其复制到画布中,但这会"污染"画布,这会阻止您阅读它(因此您无法"窃取"图像,例如从网站本身无法访问的内部网).但是,通过使用CORS,存储图像的服务器可以告诉浏览器允许跨源访问,因此您可以通过画布访问图像数据.

MDN还有一个关于这个东西的页面:https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

当你想限制他人访问你的脚本和图像的能力时,这是吗？

没有.