HTML代码安全中利用属性拦截未授权的跨域数据读取-html教程-PHP中文网

crossorigin是拦截跨域数据读取的第一道关卡，它不是请求开关而是读取许可声明，必须与服务端access-control-allow-origin等响应头配对生效；未声明则js无法读取元数据，声明后服务端未授权则静默拒绝响应。

html代码安全中利用属性拦截未授权的跨域数据读取

为什么`crossorigin`属性是拦截跨域数据读取的第一道关卡

浏览器对跨域资源的“读取权”和“加载权”是分开控制的。<img>、<script></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。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

没写 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 属性注入范畴，靠输入过滤和 CSP script-src 拦截

服务端没配 CORS 时，`crossorigin` 的行为边界在哪

前端加了 crossorigin，但服务端没返回任何 CORS 头，浏览器不会“降级处理”，而是严格按规范拒绝暴露响应体。这不是 bug，是设计使然。

典型表现：fetch 报 No 'Access-Control-Allow-Origin' header；<img crossorigin> 加载成功但 naturalWidth 为 0；<script crossorigin></script> 加载失败且无 onerror 触发（静默失败）。