crossorigin是拦截跨域数据读取的第一道关卡，它不是请求开关而是读取许可声明，必须与服务端Access-Control-Allow-Origin等响应头配对生效；未声明则JS无法读取元数据，声明后服务端未授权则静默拒绝响应。
为什么crossorigin属性是拦截跨域数据读取的第一道关卡
浏览器对跨域资源的“读取权”和“加载权”是分开控制的。<img>、<script>等标签默认能加载跨域资源，但 JS 想调用 image.naturalWidth 或 response.json() 就必须过 crossorigin 这一关——它不是可选开关，而是触发 CORS 校验的显式声明。
没加 crossorigin，浏览器就当你是“只加载不读取”，连预检请求都不发；加了但值不对（比如写了 crossorigin="use-credentials" 却没带 cookie），服务端又不认，照样被拦在响应体之外。
-
crossorigin="anonymous"：最常用，发请求时不带 cookie，服务端可返回Access-Control-Allow-Origin: * -
crossorigin="use-credentials"：需带认证信息，服务端必须返回具体域名（如http://localhost:3000），不能是* - 完全不写
crossorigin：JS 无法读取该资源的任何元数据（宽高、像素、响应头），img.naturalWidth返回 0，fetch直接报错
crossorigin 配合 integrity 才能防篡改+防越权读取
单靠 crossorigin 只解决“能不能读”，不解决“读到的是不是原始内容”。攻击者若劫持 CDN 或中间网络，可能返回恶意图片或脚本——这时 integrity 就成了第二道防线。两者必须共存，否则 integrity 会被忽略。
例如：<script crossorigin="anonymous" integrity="sha256-..." src="https://cdn.example.com/app.js"></script>。如果服务端返回的 JS 内容哈希不匹配，浏览器会直接拒绝执行，且不抛 JS 错误，只在 Console 记一条 Failed to find a valid digest in the 'integrity' attribute。
立即学习“前端免费学习笔记（深入）”；
- 没写
crossorigin，即使写了integrity，浏览器也跳过校验（因为没走 CORS 流程） -
crossorigin="use-credentials"时，integrity仍生效，但服务端响应必须同时满足 credentials 和 hash 两重校验 - CDN 返回 304 Not Modified 响应时，
integrity依然校验原始资源的哈希，不是缓存头里的 ETag
哪些 HTML 属性看似安全，实则绕过 crossorigin 校验
有些属性天然不触发 CORS，但可能被用于间接读取跨域数据，属于“隐蔽通道”。它们不走 crossorigin，也不受 integrity 约束，容易被忽略。
-
<link rel="stylesheet" href="https://evil.com/style.css">：样式表可跨域加载，但无法用 JS 读取其内容；不过可通过document.styleSheets[0].cssRules试探性访问（受限于同源策略，仅当服务端返回Access-Control-Allow-Origin时才可能成功） -
<iframe src="https://other.com/page.html"></iframe>：加载无限制，但父页 JS 无法访问其contentDocument，除非对方主动设document.domain或发postMessage -
<img src="javascript:alert(1)">：协议级 XSS，完全绕过 CORS，属于 HTML 属性注入范畴，靠输入过滤和 CSPscript-src拦截
服务端没配 CORS 时，crossorigin 的行为边界在哪
前端加了 crossorigin，但服务端没返回任何 CORS 头，浏览器不会“降级处理”，而是严格按规范拒绝暴露响应体。这不是 bug，是设计使然。
典型表现：fetch 报 No 'Access-Control-Allow-Origin' header；<img crossorigin> 加载成功但 naturalWidth 为 0；<script crossorigin> 加载失败且无 onerror 触发（静默失败）。
- 不要指望
mode: 'no-cors'能绕过——它只允许发出请求，响应永远是opaque，JS 拿不到 status、headers、body - Vite/Webpack dev proxy 是开发期方案，它让请求“看起来不跨域”，但不改变
crossorigin的语义，上线后仍依赖服务端配置 - JSONP 已淘汰：它靠
<script>标签绕过限制，但只支持 GET，无错误捕获，且服务端必须包裹回调函数，安全性不可控
crossorigin 不是“请求开关”，而是“读取许可声明”。它和后端的 CORS 响应头是一对契约——前端声明要读，后端必须明确授权，缺一不可。漏掉任一端，数据就读不出来，而且往往静默失败，不容易被发现。 
