crossorigin属性的目的...？

Question 1

在图像和脚本标签中。

我的理解是您可以访问其他域上的脚本和图像。那么何时使用此属性？

当您想限制其他人访问脚本和图像的能力时，是这种情况吗？

图片：

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

脚本：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

Question 2

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

该页面已回答您的问题。

如果您有跨源图像，则可以将其复制到画布中，但这会“弄脏”画布，从而使您无法读取图像（因此，您无法从内部站点无法访问的Intranet中“窃取”图像））。但是，通过使用CORS，存储图像的服务器可以告诉浏览器允许跨域访问，因此您可以通过画布访问图像数据。

MDN也有一个与此相关的页面：https : //developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

当您想限制其他人访问脚本和图像的能力时，是这种情况吗？

没有。

Question 3

答案可以在规范中找到。

对于img：

该crossorigin属性是CORS设置属性。其目的是允许与允许跨域访问的第三方站点的图像一起使用canvas。

和为script：

该crossorigin属性是CORS设置属性。对于从其他来源获得的脚本，它控制是否显示错误信息。

Question 4

这就是我们成功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从这个答案得到了所有的信息

Question 5

如果您要在本地开发快速代码段，并且正在使用Chrome，则有问题。如果您的页面使用格式为“ file：// xxxx”的URL进行加载，则即使在同一图像中获取图像，尝试在画布上使用getImageData（）也会失败，并引发跨域安全错误。本地计算机上的目录作为渲染画布的HTML页面。因此，如果从中获取HTML页面，请说：

文件：// D：/wwwroot/mydir/mytestpage.html

并且您的Javascript文件和图像是从获取的，例如：

文件：// D：/wwwroot/mydir/mycode.js

文件：// D：/wwwroot/mydir/myImage.png

那么尽管事实上这些辅助实体是从同一来源获取的，仍然会引发安全错误。

由于某些原因，Chrome并未正确设置原点，而是将必需实体的原点属性设置为“ null”，从而使得仅通过在浏览器中打开HTML页面并在本地进行调试就无法测试涉及getImageData（）的代码。

同样，出于相同的原因，将图像的crossOrigin属性设置为“ anonymous”不起作用。

我仍在尝试寻找解决方法，但是再次，浏览器实现者似乎使本地调试变得尽可能痛苦。

我只是尝试在Firefox中运行代码，然后Firefox识别出我的图像与HTML和JS脚本来自同一来源，从而使它正确无误。因此，我欢迎您提供一些有关如何解决Chrome中问题的提示，目前，尽管Firefox运行正常，但调试器的运行速度却非常缓慢，以至于可以从拒绝服务攻击中移除一步。

Question 6

我发现了如何说服Google Chrome浏览器允许file：//引用而不会引发跨域错误。

第1步：在其他操作系统中创建快捷方式（Windows）或同等功能；

步骤2：将目标设置为以下内容：

“ C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe” --allow-file-access-from-files

这个特殊的命令行参数--allow-file-access-from-files告诉Chrome浏览器允许您使用file：//对网页，图像等的引用，而不会在每次尝试传输这些错误时引发跨域错误图像到HTML画布。它可以在我的Windows 7安装程序上运行，但是值得检查一下它是否也可以在Windows 8/10和各种Linux发行版上运行。如果可以，则问题已解决-脱机开发将恢复正常运行。

现在，我可以参考来自file：// URI的图像和JSON数据，如果尝试将图像数据传输到画布或将JSON数据传输到表单元素，Chrome不会引发跨域错误。