Purpose of the crossorigin attribute...?
This is how we have successfully used crossorigin
attribute it in a script
tag:
Problem we had: We were trying to log js errors in the server using 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.
It turns out that the native implementation in chrome to report errors
if (securityOrigin()->canRequest(targetUrl)) {
message = errorMessage;
line = lineNumber;
sourceName = sourceURL;
} else {
message = "Script error.";
sourceName = String();
line = 0;
}
will send message
as Script error.
if the requested static asset violates the browser's same-origin policy.
In our case we were serving the static asset from a cdn.
The way we solved it was adding the crossorigin
attribute to the script
tag.
P.S. Got all the info from this answer
CORS-enabled images can be reused in the element without being tainted. The allowed values are:
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.
MDN also has a page about just this thing: 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.
The answer can be found in the specification.
For img
:
The
crossorigin
attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used withcanvas
.
and for script
:
The
crossorigin
attribute is a CORS settings attribute. It controls, for scripts that are obtained from other origins, whether error information will be exposed.