总结了前端开发中支持跨域的 HTML 标签（如 img、script、iframe 等）及其 CORS 属性配置。详细对比了 crossorigin 属性值对请求的影响，列举了 postMessage、iframe 等跨域通信方式。同时分析了 Cookie、LocalStorage 等缓存机制的跨域限制，并梳理了第三方集成、微前端、SSO 等常见跨域场景及解决方案（CORS、JSONP、代理等）。旨在帮助开发者根据实际需求选择合适方案，兼顾安全性与兼容性。
| 标签 | 跨域能力 | 跨域相关属性 | 使用场景 | CORS 要求 | 安全限制 |
|---|---|---|---|---|---|
<img> | ✅ 支持跨域加载图片 | crossorigin | 加载第三方图片、头像、验证码等 | 设置 crossorigin 时需 CORS | 无法读取图片内容（除非配置 CORS 且画布同源） |
<script> | ✅ 支持跨域加载 JS | crossorigin | CDN 加载 JS 库、JSONP、模块化脚本 | 设置 crossorigin 时需 CORS | 错误信息不透明（除非 CORS） |
<link> | ✅ 支持跨域加载 CSS | crossorigin | 加载第三方 CSS、字体、图标库 | 设置 crossorigin 时需 CORS | 字体文件需 CORS 配置 |
<audio> | ✅ 支持跨域加载音频 | crossorigin | 加载第三方音频资源 | 设置 crossorigin 时需 CORS | 音频分析需 CORS |
<video> | ✅ 支持跨域加载视频 | crossorigin | 加载第三方视频资源 | 设置 crossorigin 时需 CORS | 视频截图需 CORS |
<iframe> | ✅ 支持跨域嵌入页面 | sandbox、allow | 嵌入第三方页面、微前端 | 需目标页面允许嵌入 | 受 X-Frame-Options 限制，通信需 postMessage |
<form> | ✅ 支持跨域提交表单 | action、target | 跨域表单提交、文件上传 | 传统方式无需 CORS | 无返回值获取（重定向或 iframe 捕获） |
<a> | ✅ 支持跨域导航 | href、target | 跳转到第三方网站 | 无需特殊配置 | 无法读取目标页面内容 |
<source> | ✅ 支持跨域媒体资源 | src | 配合 audio/video 使用 | 与父标签一致 | 同 audio/video 限制 |
<track> | ✅ 支持跨域字幕 | src | 加载第三方字幕文件 | 需 CORS 配置 | 文本内容访问需 CORS |
<embed> | ⚠️ 有限支持 | src | 嵌入插件内容（已过时） | 插件决定 | 安全性差，不推荐使用 |
<object> | ⚠️ 有限支持 | data | 嵌入插件/PDF（过时） | 插件决定 | 安全性差，不推荐使用 |
| 属性/API | 所属标签 | 跨域能力 | 使用方式 | 安全机制 |
|---|---|---|---|---|
crossorigin | img, script, link, audio, video 等 | 控制 CORS 请求 | crossorigin="anonymous" 或 crossorigin="use-credentials" | 决定是否发送凭据 |
sandbox | iframe | 限制 iframe 权限 | sandbox="allow-scripts allow-same-origin" | 细粒度控制 iframe 能力 |
allow | iframe | 控制浏览器功能 | allow="camera; microphone; geolocation" | 权限策略控制 |
allowfullscreen | iframe | 跨域全屏权限 | allowfullscreen | 需用户交互触发 |
postMessage() | window/iframe | 跨文档通信 | targetWindow.postMessage(data, origin) | 严格 origin 验证 |
srcdoc | iframe | 内联内容（可跨域通信） | <iframe srcdoc="<html>..."></iframe> | 内容可配合 postMessage |
formtarget | form/input | 指定表单提交目标 | formtarget="iframe-name" | 可结合 iframe 捕获跨域响应 |
crossorigin 属性值对比：| 值 | 说明 | 是否发送 Cookie | CORS 响应头要求 | 适用场景 |
|---|---|---|---|---|
| 不设置 | 传统跨域请求 | ❌ 不发送 | 无需特殊响应头 | 简单资源加载，不关心响应 |
anonymous | 匿名 CORS 请求 | ❌ 不发送 | 需要 Access-Control-Allow-Origin | 大多数公共 CDN 资源 |
use-credentials | 带凭证 CORS 请求 | ✅ 发送 | 需要 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials: true | 需要认证的私有资源 |
<!-- 基础跨域加载 -->
<img src="https://third-party.com/image.jpg" alt="第三方图片">
<!-- CORS 模式加载，可在 canvas 中处理 -->
<img src="https://third-party.com/image.jpg" crossorigin="anonymous" onerror="handleError()">
<!-- JSONP 方式（传统） -->
<script src="https://api.example.com/data?callback=handleData"></script>
<!-- CORS 模式（现代） -->
<script src="https://cdn.example.com/library.js" crossorigin="anonymous" integrity="sha384-..."></script>
<!-- 嵌入第三方页面 -->
<iframe src="https://third-party.com/widget" sandbox="allow-scripts allow-forms" allow="payment"></iframe>
<script>
// 父页面向 iframe 发送消息
const iframe = document.getElementById('thirdPartyFrame');
iframe.contentWindow.postMessage({type: 'update', data: 'value'}, 'https://third-party.com');
// 接收 iframe 消息
window.addEventListener('message', (event) => {
if (event.origin !== 'https://third-party.com') return;
console.log('收到消息:', event.data);
});
</script>
<!-- 跨域 POST 提交 -->
<form action="https://api.example.com/submit" method="POST" target="hiddenFrame">
<input type="text" name="data">
<button type="submit">提交</button>
</form>
<iframe name="hiddenFrame"></iframe>
| 安全风险 | 防护措施 | 相关标签/属性 |
|---|---|---|
| XSS 攻击 | 验证 postMessage 的 origin | iframe, postMessage |
| CSRF 攻击 | 使用 CSRF Token | form, img |
| 点击劫持 | 设置 X-Frame-Options/CSP | iframe |
| 信息泄露 | 限制 crossorigin 使用范围 | 所有带 src 属性标签 |
| 恶意内容嵌入 | 使用 sandbox 属性 | iframe |
| 特性 | Chrome | Firefox | Safari | Edge | 备注 |
|---|---|---|---|---|---|
crossorigin 属性 | 13+ | 8+ | 6+ | 12+ | 基本全面支持 |
sandbox 属性 | 4+ | 17+ | 5+ | 12+ | 部分值需更新版本 |
postMessage | 4+ | 8+ | 5+ | 12+ | 稳定支持 |
allow 属性 | 60+ | 65+ | 11.1+ | 79+ | 相对较新特性 |
总结：
HTML 提供了多种支持跨域的标签和属性，开发者应根据具体需求选择合适的方案。
现代开发中，CORS 配合 crossorigin 属性是最推荐的方式，而 iframe 配合 postMessage 则适用于复杂的跨域通信场景。
始终牢记安全第一，合理配置各种安全属性。
| 缓存方式 | 跨域支持性 | 适用场景 | 注意事项 |
|---|---|---|---|
| Cookie | ✅ 支持跨域，但需设置 SameSite=None; Secure 和正确 CORS 配置 | 身份认证、会话管理、跨域单点登录 | 大小限制（4KB），需注意安全配置（HttpOnly, Secure），存在 CSRF 风险 |
| LocalStorage | ❌ 不支持跨域访问（同源策略限制） | 同源应用的数据持久化（如用户偏好设置） | 数据仅在同一协议 + 域名 + 端口下共享，大小约 5-10MB |
| SessionStorage | ❌ 不支持跨域（同源策略限制） | 同源会话级临时存储 | 标签页关闭后清除，不可跨标签页共享 |
| IndexedDB | ❌ 不支持跨域访问（同源策略限制） | 同源复杂结构化数据存储 | 异步 API，支持事务，存储容量较大 |
| Cache API | ⚠️ 有限支持（需配合 Service Worker，且受 CORS 限制） | PWA 应用缓存网络请求资源 | 缓存响应需符合 CORS 规则，通常用于同域或允许跨域的资源 |
| window.postMessage | ✅ 可用于跨域通信（传递数据，非直接存储） | 跨域 iframe 间通信传递数据 | 需验证消息来源，双向通信需配合其他存储使用 |
| SharedWorker | ⚠️ 间接支持（可通过 Worker 脚本作为中介实现跨域数据共享） | 跨标签页数据共享（同源或可控跨域） | 兼容性一般，需通过消息机制通信 |
| BroadcastChannel | ❌ 仅限同源（跨域不可用） | 同源页面间广播通信 | 较新 API，兼容性需注意 |
| Service Worker 缓存 | ⚠️ 受 CORS 限制（只能缓存跨域资源响应头允许的请求） | 离线缓存、网络请求拦截 | 需 HTTPS，缓存策略需自行实现 |
| URL 参数/Hash | ✅ 可通过 URL 传递数据（但长度有限，暴露在地址栏） | 跨域简单参数传递，OAuth 回调等 | 数据可见且长度受限，敏感信息需加密 |
表格总结了前端缓存机制在跨域场景下的核心差异，实际选择时需结合具体需求、安全性和兼容性综合考虑。
SameSite、Secure 及 CORS 响应头（如 Access-Control-Allow-Credentials: true）。postMessage + 后端同步或中间存储（如服务端 Session）实现。Access-Control-Allow-Origin。| 场景类别 | 具体场景 | 跨域原因 | 典型实现方式 |
|---|---|---|---|
| 第三方服务集成 | 1. 支付接口（支付宝、微信支付） |
Access-Control-Allow-Origin |
| 跨站数据聚合 | 1. 多平台数据展示面板crossorigin 属性 |
| 跨域文件上传 | 1. 上传到独立 OSS 存储服务| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| CORS | 前后端分离、API 调用、现代浏览器环境 | 标准化、安全性好、支持各种 HTTP 方法 | 需要服务器端配置、旧浏览器支持有限 |
| JSONP | 只读第三方 API、旧浏览器兼容 | 兼容性极好、简单易用 | 仅支持 GET、安全性差、错误处理有限 |
| 代理服务器 | 开发环境、无 CORS 权限的第三方 API | 完全绕过浏览器限制、可缓存/处理数据 | 增加服务器负担、生产环境需额外部署 |
| postMessage | iframe 间通信、跨窗口数据传递 | 安全可控、支持复杂数据 | 需建立信任关系、实现较复杂 |
| WebSocket | 实时双向通信、独立部署的推送服务 | 真正的双向通信、高效 | 需服务器支持、连接保持开销 |
| Nginx 反向代理 | 生产环境 API 代理、多服务聚合 | 高性能、配置灵活 | 运维成本、配置复杂性 |
| document.domain | 同主域不同子域间的简单通信 | 简单快速 | 仅限同主域、已逐渐被淘汰 |
| window.name | 旧浏览器跨域数据传输 | 兼容性好 | 安全性差、已过时 |
通过理解这些常见场景和解决方案，前端开发者可以更有效地设计和实现跨域功能。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online