iframe如何用？常见的一些套路

news2025/11/4 17:14:37

文章目录

- 🌊什么是iframe
- - 我们来看一个demo
  - iframe的常用属性
  - iframe的优缺点
- 🌊点击劫持和安全策略
- 🌊postMessage通信
- - postMessage
- 🌊iframe如何解决跨域
- 资源链接

🌊什么是iframe

iframe 标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。

由于 iframe 可能在某些方面不符合标准网页设计的理念，已经被HTMLl5抛弃，目前的HTML5不再支持它了

我们来看一个demo

./code/iframe1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <iframe src='https://www.juejin.cn' width="100%" height="300px"></iframe>
</body>
</html>

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=.%2Fimg%2Fimage.png&pos_id=img-vCizchFe-169337764

如果我们把链接换成www.baidu.com, 就会受到策略限制
./code/iframe2.html
在这里插入图片描述

iframe的常用属性

frameborder
width
height
name
src
scrolling
sandbox 安全限制`
- alallow-scripts 允许运行脚本
- allow-downlods 允许下载
- allow-same-origin 允许同域请求:ajax
- allow-top-navigation 允许使用顶层上下文的导航: window.top
- allow-popups 允许从 iframe 中弹出新窗口:window.open
- allow-forms 允许 form 表单提交

更加详细的属性解释，看下方的MDN链接

iframe的优缺点

优点

使用起来很方便
方便开发，减少代码的重复率
缺点
部分使用会产生跨域
浏览器后退按钮无效

🌊点击劫持和安全策略

CSP(Content Security Policy,即内容安全策略)

Content Security Policy (CSP) 是一种网络安全策略，用于减少和报告网站上的 XSS (跨站脚本)、数据注入和点击劫持等攻击。
CSP 通过定义合法的内容来源，限制浏览器加载和执行特定资源的方式。它基于白名单原则，只允许来自特定源的内容加载和执行，阻止任何不在白名单上的资源，从而防止恶意脚本的执行。
CSP 允许网站管理员制定一系列的策略指令，这些指令告诉浏览器可以执行哪些任务和从哪些地方加载资源。常见的 CSP 指令包括 default-src、script-src、style-src、img-src 等。
CSP 的优点是可以减少许多客户端的攻击，提高网站的安全性。然而，配置 CSP 需要考虑到网站的需求和资源来源，因此需要进行正确的配置和测试，以确保不影响网站的正常运行。

🌊postMessage通信

我们先来看一个例子（我们可以借助vscode的一个插件Live Server来启动服务）

project1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>项目一</h1>
    <iframe src="http://127.0.0.1:5500/docs/repository/temp_lihegui/pro2/index.html" frameborder="0" width="300px"
        height="300px"></iframe>
    <script>
        window.addEventListener('message', (event) => {
            console.log("监听到了");
            console.log('====================================');
            console.log(event.data);
            console.log('====================================');
        })
    </script>
</body>

</html>

project2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 onclick="publish()">项目二</h1>
    <script>
        function publish() {
            console.log('publish');
            window.parent.postMessage({
                messgae:'传输'
            }, '*')
        }
    </script>
</body>

</html>

💣遇到的坑

如果受同源协议限制，window.parent获取到数据都是空壳原始数据，但是这个方法还是可以用的

postMessage

window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用这种消息传递技术来实现安全的通信。

参数说明

message：要发送的消息内容。它可以是任何 JavaScript 可序列化的对象或基本类型。
targetOrigin：目标窗口的 URL。只有与目标窗口的 URL 完全匹配时，消息才会被发送。这是为了防止恶意代码发送消息到不受信任的窗口。
transfer：一个可选的数组，包含需要传递到目标窗口的 Transferable 对象。Transferable 对象是一些特定类型的对象，如 ArrayBuffer 和 MessagePort，它们可以在窗口间转移所有权，而不是进行复制操作。这可以提高性能，尤其是对于大型数据。

应用场景