93

在图像和脚本标签中。

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

这是您想限制其他人访问您的脚本和图像的能力吗？

图片：

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

脚本：

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

4

5 回答 5

60

答案可以在规范中找到。

对于img：

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

和script：

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

于 2013-08-20T13:53:36.050 回答
38

这就是我们在标签中成功使用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从这个答案中得到了所有信息

于 2015-01-13T22:59:59.737 回答
33

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

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

如果您有跨域图像，则可以将其复制到画布中，但这会“污染”画布，从而阻止您阅读它（因此您不能“窃取”图像，例如从站点本身无法访问的 Intranet ）。但是，通过使用 CORS，存储图像的服务器可以告诉浏览器允许跨域访问，因此您可以通过画布访问图像数据。

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

这是您想限制其他人访问您的脚本和图像的能力吗？

不。

于 2013-08-20T13:51:09.000 回答
4

如果您正在本地开发一段快速代码，并且您使用的是 Chrome，那么就会出现问题。如果您的页面使用“file://xxxx”形式的 URL 加载，则尝试在画布上使用 getImageData() 将失败，并引发跨域安全错误，即使您的图像是从相同的本地计算机上的目录作为呈现画布的 HTML 页面。因此，如果您的 HTML 页面是从中获取的，请说：

file://D:/wwwroot/mydir/mytestpage.html

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

file://D:/wwwroot/mydir/mycode.js

file://D:/wwwroot/mydir/myImage.png

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

由于某种原因，Chrome 没有正确设置原点，而是将必需实体的原点属性设置为“null”，从而无法仅通过在浏览器中打开 HTML 页面并在本地调试来测试涉及 getImageData() 的代码。

此外，出于同样的原因，将图像的 crossOrigin 属性设置为“匿名”也不起作用。

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

我刚刚尝试在 Firefox 中运行我的代码，并且 Firefox 通过识别我的图像与 HTML 和 JS 脚本来自相同的来源而做对了。所以我欢迎一些关于如何在 Chrome 中解决问题的提示，因为目前，虽然 Firefox 可以工作，但它的调试器速度非常慢，以至于从拒绝服务攻击中移除了一步。

于 2016-11-19T15:42:38.653 回答
1

我发现了如何说服 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 不会抛出跨域错误。

于 2017-08-01T06:13:10.270 回答