iframede 的使用

最新推荐文章于 2024-08-31 02:29:38 发布
最新推荐文章于 2024-08-31 02:29:38 发布
阅读量203 收藏
点赞数
分类专栏： html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70947033/article/details/131612760
版权

<iframe :src="srcUrl" frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

![在这里插入图片描述](https://img-blog.csdnimg.cn/815e3950db4c4ec7aec643aad7b0f403.png)

如果iframe显示浏览器不支持cavas,就在标签加上sandbox=“allow-same-origin allow-scripts allow-popups allow-forms”,就会出现内容了

常乐-
关注
专栏目录
懂得使用sandbox，限制iframe的权限，解决安全性问题
m0_57742384的博客
10-20 5271
懂得使用sandbox，限制iframe的权限，解决安全性问题
使用 iframe sandbox 时的注意点
jdk137的专栏
11-12 8740
一、allow-scripts 允许执行js二、allow-same-origin 同源，允许父子页面共享cookie, 互相操作.三、当被嵌入的文档与主页面同源时，强烈建议不要同时使用 allow-scripts 和allow-same-origin ，否则的话将允许嵌入的文档通过代码删除 sandbox 属性。虽然你可以这么做，但是这样的话其安全性还不如不用sandbox。四、使用src=”da
iframe从入门到入门
weixin_40327626的博客
08-31 50
概念 iframe 是 HTML 中用于在一个网页中嵌入另一个网页的元素。它的全称是 “inline frame”。通过 iframe，你可以在一个页面中显示来自其他网站的内容，或者在同一网站内加载其他页面。 iframe 的基本结构 登录后复制 <iframe src="URL" width="宽度" heigh...
iframe sandbox 沙盒绕过
12-21 2万+
这个问题实际上就是iframe sandbox 沙盒绕过，iframe通过sandbox属性实现沙箱模式，允许js脚本执行，可直接引用第三方js文件来绕过。禁止iframe 里的javascript 执行 top.location = self.location。 也就是禁止了跳转，绕过了反点击劫持。 案例： <iframe src='2.html' sandbox="allow...
(nginx代理 解决 跨域调用子页或allow-same-origin或Access-Control-Allow-Origin问题
weixin_42829146的博客
11-23 2238
nginx代理 解决 跨域调用子页或allow-same-origin或Access-Control-Allow-Origin问题简单说下背景和解决方案方法二 本人理解变成同源既可nginx config配置 简单说下背景和解决方案 项目需要iframe引入其他项目的页面，或者调用其他项目接口。 原因：受浏览器同源策略限制 方法一：修改子窗口请求服务器响应头x-frame-options，设置为允许你自己的域名通过。（略） 方法二：用nginx搞一个代理服务器转发请求 方法二 本人理解变成同源既可
iframe标签的sandbox属性
我的博客
06-28 2046
sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）。如果被规定为空字符串（sandbox=“”），sandbox 属性将会启用一系列对行内框架中内容的额外限制。iframe使用sandbox属性后，即使将所有值设为允许，页面中的flash也无法使用。允许弹出窗口（如window.open，target=“_blank”）。允许脚本执行，即允许iframe运行脚本（但不创建弹出窗口）。例如：此iframe只允许加载script，其他的全部限制。
html5-iframe的新特性
热门推荐
yiluoAK_47的专栏
05-07 4万+
相对于html4.0来说，html5在安全性方面有了很大的提升，甚至html5的标志看上去就像一块盾牌。其中iframe的sandbox特性，就是html5安全中很重要的组成部分部分。于此同时还带来了一个新的mime类型，text-html/sandboxed。    下面先简单介绍一下html5的iframe特性：    相对于我们平时所熟知的标签的特性，比如“src”，“width”,"n
安全基础第二天：http的header和referrer
weixin_62870380的博客
02-28 1万+
form表单、iframe、referrer、防盗链以及其图片绕过、burpsite抓包的请求头部详解、cookie和session的关系、同源和跨域。
VUE使用 iframe 嵌入网页
lilylry的博客
08-11 1万+
但若嵌入的网页是第三方网页，对方的操作可能存在安全风险。为了限制的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。问题：容器云嵌入该工程时使用iframe嵌入，嵌入的路径是动态的，路由的代理会产生问题，运维功能嵌入其他平台时，路径也是动态的同样也需要配置。
Cesium处理iframe的allow-scripts权限问题
skyunlin的专栏
01-04 1122
const iframe = ... // 获取iframe dom元素 iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms') iframe.setAttribute('src', '')
iframe 的使用理解
i_Satan的博客
04-19 4709
frame 用于在页面内显示页面，使用 iframe 会创建包含另外一个文档的内联框架（即行内框架）
深入浅出iframe（+ iframe嵌套第三方页面跨域带cookie问题）
qq_45859670的博客
08-30 7728
iframe 标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。由于 iframe 可能在某些方面不符合标准网页设计的理念，已经被HTMLl5抛弃，目前的HTML5不再支持它了。
iframe使用
Harrietjia的博客
04-26 2102
Theiframetag allows us to embed content coming from other origins (other sites) into our web page. iframe标签允许我们将来自其他来源(其他网站)的内容嵌入到我们的网页中。 Technically, an iframe creates a new nested browsing context. This means that anything in the iframe does not inte..
iframe的基本用法
weixin_42029738的博客
05-08 825
博主使用postMessage API传递参数时，应用B第一次接受的参数为空，之后接收的参数正常了，后来换成URL传递参数，应用B能够快速准确的接受到参数，因此推荐大家优先使用URL进行参数传递，简洁高效。我的功能Demo页面如下图所示，弹框样式自主可控，并且实现了参数传递。
HTML5学习记录3
weixin_44135991的博客
02-14 706
2.2 HTML增强的iframe HTML5不再推荐在页面中使用框架集，因此HTML5删除了&amp;lt;frameset…/&amp;gt;、&amp;lt;frame…/&amp;gt;和&amp;lt;noframes…/&amp;gt;这3个元素。 HTML5依然保留了一个与框架相关的元素：&amp;lt;iframe…/&amp;gt;元素，该元素可以在普通HTML页面中使用，该元素用于在普通HTML页面中生成一个行内框架，可以直
从Referer到XMLHttpRequest：探究Web安全中的重要知识点
qq_68163788的博客
06-07 2608
Referrer指的是HTTP请求头中的一个字段，用于记录用户在访问当前网页之前所在的页面的URL地址。通俗的说，就是记录用户的来源页面，可以为网站优化分析用户流量，了解用户来源，进而改进网站内容和推广策略。一般情况下，referrer字段会被浏览器自动发送给服务器端，但也有些用户会在浏览器中禁用这个功能，因此在使用referrer时需要注意这个问题。 XML（可扩展标记语言）是一种标记语言，用于定义文档的结构。与HTML类似，XML也使用尖括号来标识标签，但与HTML不同的是，XML的标记是自定义的
前端常见的安全问题
laihongfeng的博客
03-07 7735
一、XSS （Cross-Site Scripting）跨站脚本攻击 通常指通过“HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，获取用户信息、控制用户浏览器等的一种攻击 分类：持久性（存储型xss） 指攻击者通过漏洞将恶意内容写在数据库中，然后当其他用户访问含有这些恶意数据的网页时，就遭受了攻击。攻击位置常常在留言板，阅读列表等。 非持久性（ 反射型xss） 把用户输入的数据或者url携带的数据“反射”给浏览器，往往是黑客通过诱使用户点击一个恶意链接从而达到攻击目的 非持
HTML中各级标签用法3
m0_66163230的博客
01-11 230
1、HTML嵌入CSS样式 HTML仅仅只能呈现一些信息，表现能力很有限，需要结合CSS来一起使用，这样可以使页面更加的精美。 CSS 样式既可以作为单独的文件引入到 HTML 文档中，也可以直接写在 HTML 文档中。如下所示： 行内样式（内联样式）：就是把 CSS 样式直接放在HTML的标签（、<strong>、<div>、<p>）中，一般都是放入style属性中，修改不方便，而且每一个标签要<em>设置样式都需要添加 style 属性。如下所示：
iFrame的sandbox配置
m0_46660770的博客
08-01 1788
记录学习日常
新页面使用iframe引用旧页面，但是在旧页面怎么去获取新页面中在iframede src属性中增加的参数
最新发布
09-12
当你在一个旧页面中使用`<iframe>`引用包含额外参数的新页面时，由于浏览器的安全限制（同源策略），直接从父窗口（即旧页面）访问嵌入页面（iframe）的内容可能会受到限制。新页面中的`src`属性添加的参数是不能直接通过JavaScript在父页面上读取的。 然而，你可以通过以下几种间接方法来获取这些信息： 1. **POST通信**：如果新页面对参数进行了POST请求，可以在旧页面通过监听`window.postMessage()`事件，当新页面发送消息时，可以从事件数据中提取参数。 ```javascript window.addEventListener('message', function(event) { if (event.origin !== 'http://newpage.com') return; // 验证是否来自预期来源 const params = JSON.parse(event.data); // 假设参数是以JSON格式发送 console.log(params); }); ``` 2. **查询字符串编码**：如果你将参数附加在`src`后面作为查询字符串，如`src="parent.html?key=value"`, 可以在旧页面通过URL解析来获取： ```javascript const iframeUrl = document.getElementById("yourIframe").contentWindow.location.href; const queryParams = new URLSearchParams(iframeUrl.search); console.log(queryParams.get('key')); // 获取名为'key'的参数值 ``` 3. **使用`srcdoc`属性**：如果新页面内容可以直接设置到`<iframe>`的`srcdoc`属性，那么可以考虑在新页面加载完成后动态修改`srcdoc`，然后在旧页面里通过JavaScript操作这个属性获取内容。 注意以上方法都存在一定的安全性和兼容性问题，实际应用中应根据具体情况选择合适的方式，并处理好跨域问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值