The crossorigin attribute in html
Article Directory
Preface
Elements with crossorigin attribute in html are: script, link, img. Both are used for CORS requests.
1. The role of crossorigin attribute in script
When introducing a cross-domain script (such as using the library file on apis.google.com), if the script has an error, because of browser limitations (the root cause is the agreement), you will not get the error message. When locally trying to use window.onerror to record script errors, cross-domain scripting errors will only return Script error.
The new HTML5 regulations allow local access to cross-domain scripting error information, but there are two conditions: one is that the cross-domain scripting server must allow the current domain name to obtain the error through the Access-Control-Allow-Origin header. Information, the second is that the script tag in the web page must also indicate that the address specified by the src attribute is an address that supports cross-domain, that is, the crossorigin attribute. With these two conditions, you can get the error message of cross-domain scripting.
But when scriptin srca cross-domain html resources, its error message may leak private information, so you need to carefully consider carefully whether to use crossorigin property.
Second, the role of the crossorigin attribute in img and link
After the crossorigin attribute is added to img and link, canvas can not only read the data of image resources under another domain name, but also perform operations on it, just like operating images under the same domain name.
When it is not added, canvas can only read image resources under different domain names in tainted mode. "taint" means coloring and filming, such as filming on car windows. I understand that the "sticking film" method in the browser should mean that only pictures can be posted on the canvas, but the pictures cannot be read out as data, so as to prevent certain private information from being transmitted to other places along with the pictures.
Reference blog post: https://www.chrisyue.com/what-the-hell-is-crossorigin-attribute-in-html-script-tag.html