跨域页面HTML5怎么限_跨域页面限HTML5规则【应用】

苏承栈
2026-09-29 • 👁 0人浏览过
跨域限制由浏览器同源策略强制实施，非HTML5本身提供；iframe无法访问跨域contentWindow、fetch需服务端CORS响应头配合、客户端存储完全隔离，推荐postMessage安全通信。 HTML5 本身不提供跨域页面限制能力，真正起作用的是浏览器的
Cross-Origin Resource Sharing
（CORS）机制和
document.domain
、
postMessage
等 API 的配合使用。直接在 HTML 中写个标签或属性就想“限制跨域”是无效的。 iframe 跨域时无法访问
contentWindow
或
contentDocument
这是最常见的报错场景：父页用
</code></div>
加载后，尝试执行
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframe.contentWindow.document.body</code></div>
会抛出
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">DOMException: Blocked a frame with origin "http://a.com" from accessing a cross-origin frame.</code></div>
。
这不是 HTML5 的“限制规则”，而是浏览器同源策略（Same-Origin Policy）的强制保护
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">allow</code></div>
属性（如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">allow="clipboard-read"</code></div>
）只影响 iframe 内部权限，不解除跨域 DOM 访问限制
若双方可控，可在子页面顶部加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.domain = "example.com"</code></div>
（仅限同主域不同子域，如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">a.example.com</code></div>
↔
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">b.example.com</code></div>
），但现代浏览器已逐步弃用该方式
推荐方案：使用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.postMessage()</code></div>
进行安全通信，父页监听
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">message</code></div>
事件，子页调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">parent.postMessage(data, "https://parent-domain.com")</code></div>
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">fetch</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">XMLHttpRequest</code></div>
跨域请求被拒
前端
JS 发起跨域请求时，即使 URL 正确，也可能收到
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">net::ERR_FAILED</code></div>
或控制台提示
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">No 'Access-Control-Allow-Origin' header</code></div>
。
关键点不在前端代码，而在服务端响应头是否包含
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Access-Control-Allow-Origin</code></div>
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">fetch("https://api.other.com/data")</code></div>
默认不带凭据（
cookie
s），若需携带，必须显式设置
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">credentials: "include"</code></div>
，且服务端必须返回
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Access-Control-Allow-Credentials: true</code></div>
（此时
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Access-Control-Allow-Origin</code></div>
不能为
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">*</code></div>
）
预检请求（OPTIONS）会被自动触发：当请求含自定义 header（如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Authorization</code></div>
）或非简单方法（如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">PUT</code></div>
），服务端必须正确响应预检，否则请求根本不会发出
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">localStorage</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">sessionStorage</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">IndexedDB</code></div>
完全隔离
跨域页面之间无法共享任何客户端存储数据——哪怕两个页面只差一个子域名，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">https://admin.example.com</code></div>
和
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">https://api.example.com</code></div>
的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">localStorage</code></div>
也是完全独立的。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
这不是“HTML5 规则限制”，而是浏览器按源（origin）严格划分存储空间
无法通过 JS 绕过；
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.cookie</code></div>
同理，且受
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">SameSite</code></div>
属性约束
若需跨域同步状态，只能走服务端中转，或用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">postMessage</code></div>
+ 主域页面做代理（例如让两个子域页面都与
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">example.com</code></div>
上的中继页通信）
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">const iframe = document.getElementById("myIframe");
iframe.contentWindow.postMessage({ type: "GET_USER_INFO" }, "https://child-domain.com");

window.addEventListener("message", (e) => {
  if (e.origin !== "https://child-domain.com") return;
  if (e.data.type === "USER_INFO_RESPONSE") {
    console.log("Received:", e.data.payload);
  }
});</code></div>
跨域真正的难点从来不在“怎么写 HTML”，而在于理解哪些操作被浏览器拦截、为什么被拦截、以及对应的安全替代路径。很多问题表面是“HTML5 限制”，实际是混淆了规范、API 行为和浏览器实现三者的边界。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="jxgpc-article-nav" aria-label="文章导航">

    
                                <a href="http://www.jxgpc.com/pc/15233.html" class="jxgpc-article-nav-link jxgpc-article-nav-prev">
                                    <span>&#8249;</span>
                                    <div>
                                        <div class="jxgpc-article-nav-label">上一篇</div>
                                        <div class="jxgpc-article-nav-title">利用js读取动态网站从服务器端返回的数据_javascript技巧</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.jxgpc.com/pc/15240.html" class="jxgpc-article-nav-link jxgpc-article-nav-next">
                                    <div>
                                        <div class="jxgpc-article-nav-label">下一篇</div>
                                        <div class="jxgpc-article-nav-title">数据库如何与html网页连接数据库连接</div>
                                    </div>
                                    <span>&#8250;</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="jxgpc-content-section" style="margin-top: 20px;">
                        <h2 class="jxgpc-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="jxgpc-article-list">

    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15233.html" class="jxgpc-article-link">利用js读取动态网站从服务器端返回的数据_javascript技巧</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15225.html" class="jxgpc-article-link">在css中如何用text-transform控制大小写</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15145.html" class="jxgpc-article-link">使用Meteor配合Node.js编写实时聊天应用的范例_node.js</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15140.html" class="jxgpc-article-link">JavaScript中模块化视角下的前端状态管理方案选型</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15131.html" class="jxgpc-article-link">CSS如何通过focus伪类强化表单体验_在输入框获焦时突出css边框</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15240.html" class="jxgpc-article-link">数据库如何与html网页连接数据库连接</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15242.html" class="jxgpc-article-link">Javascript 高阶函数使用介绍_javascript技巧</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15243.html" class="jxgpc-article-link">如何处理HTML路径路径错误的解决办法</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15251.html" class="jxgpc-article-link">一个精简的JS DIV层tab切换代码_javascript技巧</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/15259.html" class="jxgpc-article-link">Web应用中Excel导出功能的最佳实践：后端优先策略解析</a>
                                <div class="jxgpc-article-meta">2026-09-29</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="jxgpc-sidebar jxgpc-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">推荐阅读</h3>
        <div class="jxgpc-recommend-grid">

    
            <a href="http://www.jxgpc.com/pc/15268.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="HTML函数能否在无风扇迷你主机开发_迷你PC适用性评估【汇总】">
                </div>
                <div class="jxgpc-recommend-title">HTML函数能否在无风扇迷你主机开发_迷你PC适用性评估【汇总】</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/15259.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="Web应用中Excel导出功能的最佳实践：后端优先策略解析">
                </div>
                <div class="jxgpc-recommend-title">Web应用中Excel导出功能的最佳实践：后端优先策略解析</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/15251.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="一个精简的JS DIV层tab切换代码_javascript技巧">
                </div>
                <div class="jxgpc-recommend-title">一个精简的JS DIV层tab切换代码_javascript技巧</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/15243.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="如何处理HTML路径路径错误的解决办法">
                </div>
                <div class="jxgpc-recommend-title">如何处理HTML路径路径错误的解决办法</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">最新文章</h3>
        <ul class="jxgpc-article-list">

    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/15268.html" class="jxgpc-article-link">HTML函数能否在无风扇迷你主机开发_迷你PC适用性评估【汇总】</a>
                <div class="jxgpc-article-meta">2026-09-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/15259.html" class="jxgpc-article-link">Web应用中Excel导出功能的最佳实践：后端优先策略解析</a>
                <div class="jxgpc-article-meta">2026-09-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/15251.html" class="jxgpc-article-link">一个精简的JS DIV层tab切换代码_javascript技巧</a>
                <div class="jxgpc-article-meta">2026-09-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/15243.html" class="jxgpc-article-link">如何处理HTML路径路径错误的解决办法</a>
                <div class="jxgpc-article-meta">2026-09-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/15242.html" class="jxgpc-article-link">Javascript 高阶函数使用介绍_javascript技巧</a>
                <div class="jxgpc-article-meta">2026-09-29</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/15240.html" class="jxgpc-article-link">数据库如何与html网页连接数据库连接</a>
                <div class="jxgpc-article-meta">2026-09-29</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">热门标签</h3>
        <div class="jxgpc-article-tag-list">

    
            <a href="http://www.jxgpc.com/tag/5559" class="jxgpc-article-tag-item">跨域</a>
    
            <a href="http://www.jxgpc.com/tag/2689" class="jxgpc-article-tag-item">session</a>
    
            <a href="http://www.jxgpc.com/tag/2387" class="jxgpc-article-tag-item">html5</a>
    
            <a href="http://www.jxgpc.com/tag/2335" class="jxgpc-article-tag-item">cookie</a>
    
            <a href="http://www.jxgpc.com/tag/2137" class="jxgpc-article-tag-item">前端</a>
    
            <a href="http://www.jxgpc.com/tag/1803" class="jxgpc-article-tag-item">js</a>
    
            <a href="http://www.jxgpc.com/tag/1796" class="jxgpc-article-tag-item">access</a>
    
            <a href="http://www.jxgpc.com/tag/1682" class="jxgpc-article-tag-item">浏览器</a>
    
            <a href="http://www.jxgpc.com/tag/1596" class="jxgpc-article-tag-item">html</a>
    
            <a href="http://www.jxgpc.com/tag/1593" class="jxgpc-article-tag-item">win</a>
    
            <a href="http://www.jxgpc.com/tag/1590" class="jxgpc-article-tag-item">ai</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="jxgpc-footer">
        <div class="jxgpc-container">
            <div class="jxgpc-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.jxgpc.com/22.html" class="jxgpc-footer-link">免责声明</a>
                
                <a href="http://www.jxgpc.com/23.html" class="jxgpc-footer-link">关于我们</a>
                
                <a href="http://www.jxgpc.com/24.html" class="jxgpc-footer-link">联系我们</a>
                
                <a href="http://www.jxgpc.com/25.html" class="jxgpc-footer-link">投诉删除</a>
                
                <a href="http://www.jxgpc.com/26.html" class="jxgpc-footer-link">投稿须知</a>
                
                
            </div>
            <div class="jxgpc-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 极星编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063994号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="jxgpc-back-to-top" id="backToTop" aria-label="返回顶部">&#8679;</button>

    <!-- 公共脚本 -->
    <script src="http://www.jxgpc.com/static/v3/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>