html标签中crossOrigin、integrity属性详解、SRI、HSTS

crossOrigin属性

用于img标签

在canvas中使用drawImage()绘制图像时，若传入未声明crossorigin属性的跨源<img>元素，会使canvas变成污染状态（tainted），此时任何读取canvas数据的操作，如getImageData()、toDataURL()、toBlob()等，均会抛出错误（可理解为在img标签涉及到canvas时需使用crossOrigin='anonymous'）。

示例及详述 

Allowing cross-origin use of images and canvas - HTML: HyperText Markup Language | MDN

跨源相关机制综述（三）：crossorigin属性 - 知乎

用于script标签

对于跨源的传统脚本（未声明type=module的脚本），若未声明crossorigin属性，在发生错误时，window.onerror中不会收到详细的错误信息，仅有类似“Script error”这样的简单提示。这样做是因为，即使是错误信息，也有可能暴露用户状态。

SRI

Subresource Integrity - 子资源完整性，是指浏览器通过验证资源的完整性（通常从 CDN 获取）来判断其是否被篡改的安全特性。通常通过script或link标签上的integrity属性值确定。

integrity属性

用于script或者link标签，赋值哈希，开启浏览器对获取的资源进行检查，用来进行检验加载的JavaScript文件或者CSS文件是否完整（可避免托管在CDN的资源被篡改而引入的XSS 风险）。

示例及详述 

HTML属性crossorigin和integrity有什么用_小帅的编程笔记的博客-CSDN博客

使用 SRI 解决 CDN 劫持 - 掘金

HSTS

HSTS(HTTP Strict Transport Security) 是一种Web安全协议，它的作用是在本地强制客户端（如浏览器）使用HTTPS与服务器创建连接。服务器开启HSTS的方法是，当客户端通过HTTPS发出请求时，在服务器返回的超文本传输协议响应头中包含STS(Strict-Transport-Security)字段。

一文带你了解中间人攻击和HSTS - 掘金

简单易懂HSTS，你需要它！ - 掘金