HTML属性CrossOrigin：处理跨域图片与脚本的安全属性解析-html教程-PHP中文网

crossorigin不是跨域开关，仅在img、script、link等标签生效，且必须与服务端access-control-allow-origin等响应头严格配对，否则仍被拦截；同域图片误加会触发不必要的预检。

html属性crossorigin：处理跨域图片与脚本的安全属性解析

crossorigin 不是跨域“开关”，加了不等于能用；它只在 <img>、<script></script>、<link rel="stylesheet">（或 rel="preload" as="font"）等少数标签上生效，且必须和服务端返回的 Access-Control-Allow-Origin 等响应头配对，否则浏览器照样拦截、照样报错。

为什么 `<img>` 加了 `crossorigin` 还是 canvas 报错？

根本原因不是前端没加属性，而是服务端没配对响应头，或前端加错场景。

crossorigin="anonymous" 时，服务端必须返回 Access-Control-Allow-Origin: * 或精确域名（如 https://your-site.com），不能只返回 * 同时又用了 crossorigin="use-credentials"
即使服务端配对了，如果图片后续要进 canvas 并调用 toDataURL() 或 getImageData()，<img> 必须显式写 crossorigin="anonymous" —— 不写、写空值（crossorigin）、或写错值都会导致 canvas “污染”（tainted）
常见误操作：给同域图片加 crossorigin，看似无害，但会强制触发 CORS 流程，可能意外引发预检请求（尤其带自定义 header 时）
注意：服务端返回 Access-Control-Allow-Origin: * 时，crossorigin="use-credentials" 一定失败，因为 * 和 Credentials 互斥

`<script></script>` 的 `crossorigin` 怎么配才让错误监控有效？

线上 JS 错误堆栈丢失，90% 是因为动态加载的 chunk 没带 crossorigin，尤其部署到 CDN 后。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

静态 <script src="xxx.js"></script>：必须显式写 crossorigin="anonymous"（不建议省略值），且服务端响应头需匹配
Webpack 构建项目：在 output.crossOriginLoading 中设为 'anonymous'，否则 import() 加载的 chunk 默认不带该属性，window.onerror 只收到 "Script error."
Vite 项目：需在 vite.config.ts 的 build.rollupOptions.output 中配置 crossOrigin: 'anonymous'，或通过插件注入 script 标签属性
不生效的典型场景：本地双击 HTML 文件（file:// 协议），或脚本与页面同域 —— 此时 crossorigin 被忽略，也不触发 CORS

`crossorigin` 和 `integrity` 必须一起用吗？

不是“必须”，但 integrity 在跨域资源上**只有配合 crossorigin 才会校验**。

浏览器逻辑是：先走 CORS 流程 → 成功后才校验 hash；没 crossorigin，哪怕 integrity 值正确，也会跳过校验，相当于形同虚设
典型组合：<script src="https://cdn.example.com/app.js" crossorigin="anonymous" integrity="sha384-xxx"></script>
若用 crossorigin="use-credentials"，CDN 必须返回 Access-Control-Allow-Credentials: true + 精确域名的 Access-Control-Allow-Origin，否则连请求都发不出去，更别说校验
注意：SRI（Subresource Integrity）校验失败时，浏览器直接拒绝执行脚本，不会 fallback，这点和 CORS 报错表现不同

最容易被忽略的是：服务端响应头和前端属性的值必须严格对应——crossorigin="anonymous" 对应 Access-Control-Allow-Origin: * 或单域名；crossorigin="use-credentials" 对应非通配符域名 + Access-Control-Allow-Credentials: true。少一个头、错一个值，整个链路就断在第一步。