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

答案可以在the specification中找到。

img：

crossorigin属性为CORS settings attribute。其目的是允许来自允许跨源访问的第三方站点的图像与canvas一起使用。

和script：

crossorigin属性为CORS settings attribute。对于从其他origins获取的脚本，它控制是否显示错误信息。

Answer 2

这就是我们在crossorigin标记中成功使用script属性的方法：

我们遇到的问题：我们尝试使用window.onerror

在服务器中记录js错误

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

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

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

如果请求的静态资产违反了浏览器的same-origin policy，则

会将message发送为Script error.。

在我们的案例中，我们从cdn提供静态资产。

我们解决问题的方法是将crossorigin属性添加到script标记。

P.S。获得了this answer

的所有信息

Answer 3

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

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

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

MDN还有一个关于此事的页面：https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

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

没有。

Answer 4

如果您在本地开发快速代码，并且您正在使用Chrome，则会出现问题。如果您的页面使用表格＆＃34; file：// xxxx＆＃34;的URL加载，那么尝试在画布上使用getImageData（）将失败，并抛出跨源安全错误，即使您的图像是从呈现画布的HTML页面获取本地计算机上的同一目录。因此，如果您的HTML页面是从中获取的，请说：

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

并且正在提取您的Javascript文件和图片，例如：

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

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

然后，尽管这些辅助实体是从同一个来源获取的，但仍然会抛出安全错误。

出于某种原因，Chrome不是正确设置原点，而是将必需实体的origin属性设置为＆＃34; null＆＃34;，只需打开HTML页面就无法测试涉及getImageData（）的代码您的浏览器和本地调试。

此外，将图像的crossOrigin属性设置为＆＃34; anonymous＆＃34;由于同样的原因，它不起作用。

我仍然试图为此找到解决方法，但再一次，浏览器实现者似乎尽可能地使本地调试变得痛苦。

我只是尝试在Firefox中运行我的代码，并且Firefox通过识别我的图像来自与HTML和JS脚本相同的来源来实现它。所以我欢迎提供一些关于如何解决Chrome问题的提示，就像目前一样，当Firefox运行时，它的调试器痛苦缓慢，到了从拒绝服务攻击中删除一步。

Answer 5

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

步骤1：在其他操作系统中创建快捷方式（Windows）或等效文件;

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

＆＃34; C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe＆＃34; --allow-文件访问从-文件

特殊的命令行参数--allow-file-access-from-files告诉Chrome允许您使用file：//引用网页，图像等，而不会在每次尝试时抛出跨源错误例如，将这些图像传输到HTML画布。它适用于我的Windows 7设置，但值得检查它是否适用于Windows 8/10和各种Linux发行版。如果确实如此，问题就解决了 - 离线开发恢复正常。

现在，我可以从file：// URI引用图像和JSON数据，如果我尝试将图像数据传输到画布，或者将JSON数据传输到表单元素，则Chrome不会抛出跨源错误。

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

5 个答案: