iframe可以实现微前端。很容易的实现跨域通信。使用iframe的main元素，监听事件使用message。向iframe发送数据，先获取iframe元素，取其contentwindow.postMessage(数据，目标地址) 浏览器默认允许所有来源的iframe进入嵌入限制需要服务端使用一个响应头

响应头X-Frame-Options

deny：完全禁止
sameOrigin：只允许同源的引用

如果想限制页面只能被某些页面嵌入响应头Content-Security-Policy

frame-ancestors 'self' 域名

main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iframe+postMessage 跨域通信 主页面</title>
  </head>
  <body>
    <h1>主页面</h1>
    <iframe id="child" src="http://127.0.0.1:5502/iframepage.html"></iframe>
    <div>
      <h2>主页面接收消息区域</h2>
      <span id="message"></span>
    </div>
  </body>
  <script>
    window.onload = function () {
      document
        .getElementById('child')
        .contentWindow.postMessage(
          '主页面消息',
          'http://127.0.0.1:5502/iframepage.html'
        )
    }
    window.addEventListener(
      'message',
      function (event) {
        console.log('??111')
        document.getElementById('message').innerHTML =
          '收到' + event.origin + '消息：' + event.data
      },
      false
    )
  </script>
</html>

iframepage.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iframe+postMessage跨域通信 子页面</title>
  </head>
  <body>
    <h2>子页面</h2>
    <div>
      <h3>接收消息区域</h3>
      <span id="message"></span>
    </div>
  </body>
  <script>
    window.addEventListener(
      'message',
      function (event) {
        if (window.parent !== event.source) {
          return
        }
        console.log(event)
        document.getElementById('message').innerHTML =
          '收到' + event.origin + '消息：' + event.data
        top.postMessage('子页面消息收到', 'http://127.0.0.1:5502/main.html')
      },
      false
    )
  </script>
</html>

iframe的使用

响应头X-Frame-Options

main.html

iframepage.html