crossorigin属性：为什么它是避免tainted canvases的关键？

本文为HTML标准解读系列文章，其他文章详见这里。

你是否曾经遇到过这样的问题？

• 使用canvas的getImageData() 方法，却报错：The canvas has been tainted by cross-origin data；
• 使用canvas的toDataURL()方法，却报错:Tainted canvases may not be exported;
• 使用document.styleSheets[0].cssRules访问样式表的css规则，却报错：Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules。

如果你上网找解决方案，会发现他们都跟一个HTML属性密切关联：crossorigin。crossorigin是CORS在HTML标签上的应用。 很多的元素，包括img、video、audio、link、script都有这个属性：

<img src="https://example.com/test.png" crossorigin="anonymous"></img>
<video src="https://example.com/test.mp4" crossorigin="anonymous"></video>
<link href="https://example.com/test.css" rel="stylesheet" crossorigin="anonymous" />
<script src="https://example.com/test.js" crossorigin="anonymous"></script>

幸运的是，在不同的元素上，crossorigin发挥作用的机理几乎是一样的，也就是说，只要明白它在一个元素上是如何发挥作用的，其他元素上的使用也就明白了。

本文我将会基于HTML标准2.5.4 CORS settings attribute，力求给你讲清楚：

• crossorigin属性有哪些值？分别是干什么用的？