Html crossorigin 属性的目的...？

Purpose of the crossorigin attribute...?

提问by Smurfette

In both image and script tags.

在图像和脚本标签中。

My understanding was that you can access both scripts and images on other domains. So when does one use this attribute?

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

Is this when you want to restrict the ability of others to access your scripts and image?

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

Images:

图片：

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

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

Scripts:

脚本：

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

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

采纳答案by ThiefMaster

CORS-enabled images can be reused in the element without being tainted. The allowed values are:

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

The page already answers your question.

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

If you have a cross-origin image you can copy it into a canvas but this "taints" the canvas which prevents you from reading it (so you cannot "steal" images e.g. from an intranet where the site itself doesn't have access to). However, by using CORS the server where the image is stored can tell the browser that cross-origin access is permitted and thus you can access the image data through a canvas.

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

MDN also has a page about just this thing: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

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

Is this when you want to restrict the ability of others to access your scripts and image?

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

No.

不。

回答by T.J. Crowder

The answer can be found in the specification.

答案可以在规范中找到。

For img:

对于img：

The crossoriginattribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.

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

and for script:

和script：

The crossoriginattribute is a CORS settings attribute. It controls, for scripts that are obtained from other origins, whether error information will be exposed.

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

回答by Omar Rayward

This is how we have successfully used crossoriginattribute it in a scripttag:

这是我们crossorigin在script标签中成功使用属性的方式：

Problem we had: We were trying to log js errors in the server using window.onerror

我们遇到的问题：我们试图使用以下命令在服务器中记录 js 错误 window.onerror

Almost all of the errors that we were logging had this message : Script error.and we were getting very little information about how to solve these js errors.

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

It turns out that the native implementation in chrome to report errors

原来chrome中的原生实现报错

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

will send messageas Script error.if the requested static asset violates the browser's same-origin policy.

将发送message，Script error.好像请求的静态资产违反了浏览器的同源策略。

In our case we were serving the static asset from a cdn.

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

The way we solved it was adding the crossoriginattribute to the scripttag.

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

P.S. Got all the info from this answer

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

回答by David Edwards

If you're developing a quick piece of code locally, and you're using Chrome, there's a problem. if your page loads using a URL of the form "file://xxxx", then trying to use getImageData() on the canvas will fail, and throw the cross-origin security error, even if your image is being fetched from the same directory on your local machine as the HTML page rendering the canvas. So if your HTML page is fetched from, say:

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

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

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

and your Javascript file and images are being fetched from, say:

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

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

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

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

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

then despite the fact that these secondary entities are being fetched from the same origin, the security error is still thrown.

然后，尽管这些次要实体是从同一来源获取的，但仍会引发安全错误。

For some reason, instead of setting the origin properly, Chrome sets the origin attribute of the requisite entities to "null", rendering it impossible to test code involving getImageData() simply by opening the HTML page in your browser and debugging locally.

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

Also, setting the crossOrigin property of the image to "anonymous" doesn't work, for the same reason.

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

I'm still trying to find a workaround for this, but once again, it seems that local debugging is being rendered as painful as possible by browser implementors.

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

I just tried running my code in Firefox, and Firefox gets it right, by recognising that my image is from the same origin as the HTML and JS scripts. So I'd welcome some hints on how to get round the problem in Chrome, as at the moment, while Firefox works, it's debugger is painfullyslow, to the point of being one step removed from a denial of service attack.

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

回答by David Edwards

I've found out how to persuade Google Chrome to allow file:// references without throwing a cross-origin error.

我已经找到了如何说服 Google Chrome 允许 file:// 引用而不引发跨域错误的方法。

Step 1: Create a shortcut (Windows) or the equivalent in other operating systems;

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

Step 2: Set the target to something like the following:

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

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

That special command line argument, --allow-file-access-from-files, tells Chrome to let you use file:// references to web pages, images etc., without throwing cross-origin errors every time you try to transfer those images to an HTML canvas, for example. It works on my Windows 7 setup, but it's worth checking to see if it will work on Windows 8/10 and various Linux distros too. If it does, problem solved - offline development resumes as normal.

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

Now I can reference images and JSON data from file:// URIs, without Chrome throwing cross-origin errors if I attempt to transfer image data to a canvas, or transfer JSON data to a form element.

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