开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

iframe不同域名不同服务器取值

基础概念

<iframe> 是 HTML 中的一个标签，用于在网页中嵌入另一个 HTML 文档。它可以加载不同域名和服务器上的内容。

相关优势

内容隔离：<iframe> 可以将嵌入的内容与主页面隔离开来，避免样式和脚本冲突。
代码复用：可以在多个页面中嵌入同一个 <iframe>，从而复用代码。
安全性：通过 <iframe> 可以加载来自不同域名的内容，但默认情况下，浏览器会阻止跨域脚本访问。

类型

匿名 iframe：没有 name 属性的 <iframe>。
命名 iframe：有 name 属性的 <iframe>，可以通过 window.frames 访问。

应用场景

嵌入第三方内容：如地图、视频、社交媒体插件等。
多窗口应用：通过 <iframe> 实现多个窗口的交互。
模块化设计：将页面分割成多个独立的模块，通过 <iframe> 加载。

跨域取值问题

当 <iframe> 加载的内容来自不同域名时，浏览器会阻止跨域脚本访问，这是出于安全考虑（同源策略）。例如，如果主页面在 example.com，而 <iframe> 加载的内容在 otherdomain.com，则无法直接通过 JavaScript 访问 <iframe> 中的内容。

原因

浏览器的同源策略限制了不同源之间的脚本访问。同源是指协议、域名和端口都相同。

解决方法

CORS（跨域资源共享）：服务器端设置 Access-Control-Allow-Origin 头，允许特定域名访问资源。
CORS（跨域资源共享）：服务器端设置 Access-Control-Allow-Origin 头，允许特定域名访问资源。
PostMessage API：通过 window.postMessage 方法在不同窗口之间安全地传递消息。
PostMessage API：通过 window.postMessage 方法在不同窗口之间安全地传递消息。
服务器端代理：在服务器端设置一个代理，通过同源请求获取数据，然后返回给前端。

示例代码

主页面

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
</head>
<body>
    <iframe id="myIframe" src="https://otherdomain.com/content.html"></iframe>
    <script>
        const iframe = document.getElementById('myIframe');
        iframe.onload = () => {
            iframe.contentWindow.postMessage('Hello from parent', 'https://otherdomain.com');
        };
    </script>
</body>
</html>

iframe 页面

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Content</title>
</head>
<body>
    <script>
        window.addEventListener('message', (event) => {
            if (event.origin !== 'https://example.com') return;
            console.log('Message received:', event.data);
            event.source.postMessage('Hello from iframe', event.origin);
        });
    </script>
</body>
</html>

参考链接

通过以上方法，可以在不同域名和服务器之间安全地进行数据交互。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

DOM-XSS漏洞挖掘与攻击面延申

跨站脚本攻击（Cross-site scripting，通常简称为XSS）发生在客户端，可被用于进行窃取隐私、钓鱼欺骗、偷取密码、传播恶意代码等攻击行为。可以分为反射型、存储型、DOM型等，本文主要讲解DOM-XSS漏洞挖掘与攻击面延申。接下来就开门见山，讲解干货吧。

03

史上最全跨域总结

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

04

js跨域解决方案

在页面渲染时需要动态获取iframe子页面的高度，然后重新设置iframe高度，达到自适应的目的，但是由于iframe子页面中也涉及到访问其他系统的页面，这就使得页面渲染时无法获取子页面高度，这里涉及到跨域访问子页面问题。

01

JS跨域请求解决方案

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS.CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

01

跨域请求方案终极版

现在是资源共享的时代，同样也是知识分享的时代，如果你觉得本文能学到知识，请把知识与别人分享。

03

前端常见跨域解决方案

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

02

前后端数据交互(七)——前端跨域解决方案(全)

同源策略（SOP）是一种约定，是浏览器最核心的也是最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR等攻击。

02

跨域分析以及通解

现今绝大多数新上线的网站都是基于前后端分离的部署模式来对外提供服务，而这种模式在不熟悉的情况下就很容易遇到一个恶心的问题——跨域

03

如何进行渗透测试XSS跨站攻击检测

国庆假期结束,这一节准备XSS跨站攻击渗透测试中的利用点,上一节讲了SQL注入攻击的详细流程,很多朋友想要咨询具体在跨站攻击上是如何实现和利用的,那么我们Sinesafe渗透测试工程师为大家详细的讲讲这个XSS是如何实现以及原理。

03

CSRF攻击原理场景

CSRF（Cross Site Request Forgery, 跨站域请求伪造）是一种网络的攻击方式，它在 2007 年曾被列为互联网 20 大安全隐患之一。其他安全隐患，比如 SQL 脚本注入，跨站域脚本攻击等在近年来已经逐渐为众人熟知，很多网站也都针对他们进行了防御。然而，对于大多数人来说，CSRF 却依然是一个陌生的概念。即便是大名鼎鼎的 Gmail, 在 2007 年底也存在着 CSRF 漏洞，从而被黑客攻击而使 Gmail 的用户造成巨大的损失。

04

详解JavaScript跨域问题

什么是跨域？概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。 URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹允许 http://www.a.com:8000/a.js htt

ajax实现跨域_js跨域请求的三种方法

跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。下面举例，每两个一组。

05

有哪些前端面试题是面试官必考的_2023-03-15

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

03

rebindMultiA：一款功能强大的多重A记录重绑定攻击测试工具

rebindMultiA是一款功能强大的多重A记录重绑定攻击测试工具，该工具可以帮助广大研究人员通过针对目标域名执行多重A记录重绑定攻击，来测试目标域名或地址的安全情况。

01

怎么防止WordPress等网站被别人使用iframe框架恶意调用？

最近发现了一个网站竟然直接使用iframe引用了全站，包括腾讯云的全站，已经通知了腾讯云的运营，运营的答复是会通过司法途径尝试去解决。个人是不可能这么干了，太麻烦，但是我也联系了该网站所在的网安进行监督处理，不知道是什么结果，有结果了再说吧

03

九种实用的前端跨域处理方案(转载非原创)

转载来源:https://www.cnblogs.com/ypSharing/p/corsHanlder.html

00

什么是跨域？解决方案有哪些？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

03

跨域详解

跨域详解 1. 概念协议、域名、端口有一个不同即被当作不同的域 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名，不同端口不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名，不同协议不允许 http://www.a.com/a.js http://70

07

Web前端学习笔记之前端跨域知识总结

相信每一个前端er对于跨域这两个字都不会陌生，在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩，碰到这种情况，就只能自己总结一篇博客，作为记录。

03

同源策略与跨域请求

做前端开发经常会碰到各种跨域问题，通常情况下，前端除了 iframe 、script 、link、img、svg 等有限的标签可以支持跨域外（这也与这些标签的用途有关），其他的资源都是禁止跨域引用的。说到跨域，与浏览器的同源策略是密不可分的。那我们先来理解一下浏览器为什么要设置同源策略。

01

【Web技术】582- 聊聊 Cookie “火热”的 SameSite 属性

2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie，在灰度期间，就导致了阿里系的很多应用都产生了问题，为此还专门成立了小组，推动各 BU 进行改造，目前阿里系基本已经改造完成。所有的前端团队估计都收到过通知，也着实加深了一把大家对于 Cookie 的理解，所以很可能就此出个面试题，而即便不是面试题，当问到 HTTP 相关内容的时候，不妨也扯到这件事情来，一能表明你对前端时事的跟进，二还能借此引申到前端安全方面的内容，为你的面试加分。

02

【Web技术】424- 那些年曾谈起的跨域

对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决，以至于很多人都忽略了对跨域的认识。为什么会导致跨域？遇到跨域又怎么去解决呢？本文会对这些问题一一的介绍。

01

同源策略和跨域解决方法

第一部分：同源策略:same-origin policy 1.同源策略的由来： 1995年，同源策略由Netscape(曾经的浏览器霸主，拒绝微软收购请求，被IE给整垮。现在发展为火狐浏览器背后的Mozilla)引入。目前，所有浏览器都遵循同源策略。 2.同源定义：即同协议、同域名、同端口号例如：http://www.test.com:80/test.html；协议:http;域名:www.test.com;端口号：80(默认端口，可以省略) http://www.test.com/test10

07

浏览器同源策略及跨域的解决方法

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

02

跨域

前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。

03

一文带你了解跨域的前因后果和解决方案

在了解跨域之前，我们必须要了解一下同源策略。跨域问题其实就是浏览器的同源策略造成的。

01

这次全了，8种超详细Web跨域解决方案！

导语 | 在日常开发过程中，我们通常都会遇到ajax跨域请求或者前端跨域通信的开发场景。无论是前端同学还是后端同学都需要具备解决跨域问题的能力。本文总结梳理了常见的跨域场景、跨域解决方案及其优缺点，希望可以作为大家解决跨域问题的参考。一、什么是跨域当a.qq.com域名下的页面或脚本试图去请求b.qq.com域名下的资源时，就是典型的跨域行为。跨域的定义从受限范围可以分为两种，广义跨域和狭义跨域。（一）广义跨域广义跨域通常包含以下三种行为：资源跳转：a链接、重定向。资源嵌入：<li

03

九种跨域方式实现原理（完整版）

前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。

03

八种方式实现跨域请求

那么，何为同源呢？只有当协议、端口、域名都相同的页面，则两个页面具有相同的源。只要网站的协议protocol、主机host、端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。

04

传说中图片防盗链的爱恨情仇

我们先来了解了解防盗链的原理，在 http 协议中，如果从一个页面跳到另一个页面，header字段里面会带个 Referer。图片服务器通过检测 Referer 是否来自规定域名，来进行防盗链。

04

一文带你了解跨域的前因后果和解决方案

在了解跨域之前，我们必须要了解一下同源策略。跨域问题其实就是浏览器的同源策略造成的。

01

你真的了解跨域吗

相信每个前端对于跨域这两个字都不会陌生，在实际项目中应用也很多，但跨域方法的多种多样让人目不暇接，前段时间公司同事出现了跨域问题，又一时找不到问题所在，所以在此总结下跨域知识，一篇由浅入深的万字Web基操文

03

跨域

一、浏览器的同源策略 1.什么是同源？所谓“同源”指的是”三个相同“。相同的域名、端口和协议，这三个相同的话就视为同一个域，本域下的JS脚本只能读写本域下的数据资源，无法访问其它域的资源。协议相同域名相同端口相同（如果没有写端口，默认是80端口） 2.什么是同源策略？同源策略是浏览器为了保护用户的个人信息以及企业数据的安全而设置的一种策略，不同源的客户端脚本是不能在对方未允许的情况下访问或索取对方的数据信息； 3.同源策略的目的同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

03

跨域详解【原创】

跨域详解 Write By CS逍遥剑仙我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航跨域详解 1. 概念 2. 跨域资源共享（CORS） 3. jsonp跨域 3.1 概念 3.2 实现 3.3 jQuery封装操作 3.4 JSONP优缺点 CORS 与 J

05

跨域通信

那到底什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

04

15-网络芯片CH395Q学习开发-DNS 域名解析

<iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearnCH395Q" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe>

01

到底什么是跨域？附解决方案！

同源策略是由 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。

02

vue解决跨域的几种办法_前端跨域方法之cors

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时，那说明跨域了。

03

AJAX 与跨域通信（二）：跨域解决方案

本篇讲解常见的几种跨域方案：JSONP、CORS、图像Ping、document.domain、window.name。

01

微前端在小米 CRM 系统的实践

大型组织的组织结构、软件架构在不断地发生变化。移动优先（Mobile First）、App中台（One App）、中台战略等，各种口号在不断的提出、修改和演进。同时，业务也在不断地发展，导致应用不断膨胀，进一步映射到软件架构上。

01

跨域问题

同源策略是一种约定。同源是指”协议+域名+端口”三者相同，就算两个不同的域名指向同一个ip地址，也不属于同源。

02

WEB 前端跨域解决方案

2.) 资源嵌入： <link> 、 <script> 、、 <frame> 等 dom 标签，还有样式中 background:url() 、 @font-face() 等文件外链

02

滴滴前端面试题合集

DNS 服务器中以资源记录的形式存储信息，每一个 DNS 响应报文一般包含多条资源记录。一条资源记录的具体的格式为

00

web之攻与受（劫持与注入篇）

劫持与注入，怎么有种涩涩的感觉。确实，好多时候被攻击都是跟好色有关。当然，好色并不是罪，但即便好色也得注意上网环境的安全。

01

前端开发涉及的Web安全

前端开发涉及常见的Web安全漏洞有：浏览器Web安全，跨站脚本攻击（XSS），跨站请求伪装（CSRF），点击劫持，HTTP劫持，DNS劫持，文件上传漏洞等，以跨站脚本攻击漏洞最为常见，作为前端开发需要了解一些基本的Web安全漏洞和相关的防御措施。

02

浏览器同源策略及规避方式

同源，何为同源，同源的意思就是协议、端口、域名三者均需要相同才能构成同源。例如这个域名来说，https://为协议，www.oecom.cn为域名，默认的端口为80端口。

03

浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"（same-origin policy）。很多开发者都知道这一点，但了解得不全面。本文详细介绍"同源政策"的各个方面，以及如何规避它。一、概述 1.1 含义 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同举例来说，undefined这个网址，协议是http://，域名是www.

浏览器同源策略跨域问题的产生与解决

1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。

03

009-STM32+BC26基本控制篇-基础应用-测试微信小程序扫码绑定BC26模组并实现微信小程序和开发板之间通过MQTT进行远程通信控制

<iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/ZLBC26AA/" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe>

02

滴滴前端二面高频面试题合集

CORS需要浏览器和服务器同时支持，整个CORS过程都是浏览器完成的，无需用户参与。因此实现CORS的关键就是服务器，只要服务器实现了CORS请求，就可以跨源通信了。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭