HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。如图是对iframe的大致介绍：

使用

<iframe 
    src="https://developer.mozilla.org/en-US/docs/Glossary"
    width="100%" 
    height="500"
    frameborder="0"
    allowfullscreen 
    sandbox>
      <p>
          <a href="https://developer.mozilla.org/en-US/docs/Glossary">
             Fallback link for browsers that don't support iframes
          </a>
     </p>
 <iframe>

父子页面通讯

在父页面获取iframe里的内容

获取iframe的window对象

iframe.contentWindow
window.frames['iframeName'].window。iframeName是iframe的name属性 （推荐使用）

获取iframe的document对象，iframe.contentDocument

在iframe中获取父页面内容

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档

父子页面传参

方法一 window.postmessage()

传递：postMessage(message, targetOrigin) message：传递给iframe的内容，string或者object,使用object时使用JSON.stringify进行转化 targetOrigin：接受你传递消息的域名

接收：window.addEventListener('message', receiver, false);

举例：

<iframe src="http://tuhao.com" name="sendMessage"></iframe>

//当前脚本
let ifr = window.frames['sendMessage'];
   //使用iframe的window向iframe发送message。
ifr.postmessage('give u a message', "http://tuhao.com");

//tuhao.com的脚本
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://tuhao.com') {
        if (e.data == 'give u a message') {
            e.source.postMessage('received', e.origin);  //向原网页返回信息
        } else {
            alert(e.data);
        }
    }
}

当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性，data,origin,source

data：postMessage传递进来的值
origin：发送消息的文档所在的域
source：发送消息文档的window对象的代理，如果是来自同一个域，则该对象就是window，可以使用其所有方
法，如果是不同的域，则window只能调用postMessage()方法返回信息

其他方法 1.直接拼接在iframe的的src上进行传递

2.将需要传递的值挂载在window对象上

安全性

单击劫持，一种常见的iframe攻击，黑客将隐藏的iframe嵌入到您的文档中（或将您的文档嵌入到他们自己的恶意网站），并使用它来捕获用户的交互

如何预防攻击

1. 设置sandbox属性

该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串

sandbox
该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。有效的值有：
- allow-downloads-without-user-activation : 允许在没有征求用户同意的情况下下载文件。
- allow-forms: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。
- allow-modals: 允许嵌入的浏览上下文打开模态窗口。
- allow-orientation-lock: 允许嵌入的浏览上下文锁定屏幕方向（译者注：比如智能手机、平板电脑的水平朝向或垂直朝向）。
- allow-pointer-lock: 允许嵌入的浏览上下文使用 Pointer Lock API.
- allow-popups: 允许弹窗 (例如 window.open, target="_blank", showModalDialog)。如果没有使用该关键字，相应的功能将自动被禁用。
- allow-popups-to-escape-sandbox: 允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。
- allow-presentation: 允许嵌入的浏览上下文开始一个 presentation session。
- allow-same-origin: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。
- allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
- allow-storage-access-by-user-activation : 允许嵌入的浏览上下文通过 Storage Access API 使用父级浏览上下文的存储功能。
- allow-top-navigation: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。
- allow-top-navigation-by-user-activation: 允许嵌入的浏览上下文在经过用户允许后导航（加载）内容到顶级的浏览上下文。 注意：
当被嵌入的文档与主页面同源时，强烈建议不要同时使用 allow-scripts 和 allow-same-origin。如果同时使用，嵌入的文档就可以通过代码删除 sandbox 属性，如此，就安全性而言还不如不用sandbox。
如果攻击者可以在沙箱化的 iframe 之外展示内容，例如用户在新标签页中打开内联框架，那么沙箱化也就没有意义了。建议把这种内容放置到独立的专用域中，以减小可能的损失。
沙箱属性 (sandbox) 在 Internet Explorer 9 及更早的版本上不被支持。

2. 配置CSP，对嵌入的资源配置内容安全策略

(限制浏览器加载的资源的来源，比如只能加载同源资源)

<iframe>

使用