跨域属性的目的...？

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

属性：

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

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;
}

如果请求的静态资源违反了浏览器的

同源策略

，

将发送

message

作为 Script error.。

在我们的例子中，我们从 CDN 提供静态资产。

我们解决这个问题的方法是将

crossorigin

属性添加到

script

标签中。

附注从这个答案

获取所有信息

Answer 3

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

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

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

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

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

不。

Answer 4

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

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

并且您的 Javascript 文件和图像将从以下位置获取：

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

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

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

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

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

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

我刚刚尝试在 Firefox 中运行我的代码，Firefox 识别出我的图像与 HTML 和 JS 脚本来自同一来源，因此正确无误。因此，我欢迎有关如何解决 Chrome 中的问题的一些提示，因为目前，虽然 Firefox 可以工作，但它的调试器速度“痛苦地”缓慢，以至于可以从拒绝服务攻击中删除一步。

Answer 5

第 1 步：创建快捷方式（Windows）或其他操作系统中的等效项；

第 2 步：将目标设置为如下所示：

“C:\Program Files (x86)\Google\Chrome\Applicatio