JavaScript动态修改iframe的src后嵌入页面闪烁消失如何解决

• 目标站点禁止嵌入：大部分站点都配置了X-Frame-Options响应头为DENY/SAMEORIGIN，或是配置了CSP的frame-ancestors限制，禁止第三方站点嵌入自身页面。浏览器检测到该限制后会直接终止iframe加载，就会出现闪烁后空白的现象。
• 消息监听未做过滤：当前onmessage监听没有校验消息来源和内容合法性：
  • 可能接收到非主动发送的无效消息（比如iframe内部页面、其他浏览器插件发送的postMessage），导致iframe被赋值了无效/错误的URL
  • 没有校验event.data是否为合法URL，若传入空值、非链接格式内容，都会导致iframe加载失败
• 重复赋值触发刷新：如果短时间内多次触发onmessage事件反复修改src，也会出现闪烁后加载失败的情况。

• 第一步：先做基础校验，优化监听逻辑，过滤无效消息，示例代码如下：

// 存储当前iframe的src，避免重复赋值
let currentIframeSrc = document.getElementById("myIframe").src
window.onmessage = (event) => {
  // 1. 校验消息来源，替换为你自己的站点域名，只接受信任来源的消息
  if (event.origin !== "https://你的业务域名.com") return
  // 2. 校验内容是合法的http/https链接
  if (!event.data || !/^https?:\/\//.test(event.data)) return
  // 3. 和当前src一致则不修改
  if (event.data === currentIframeSrc) return
  currentIframeSrc = event.data
  document.getElementById("myIframe").src = event.data
}

• 第二步：验证目标URL是否可嵌入：直接将需要跳转的URL写死到iframe的src属性中本地测试，如果直接写死也无法加载，说明目标站点禁止嵌入：
  • 如果是你自己可控的站点，修改服务端响应头，添加X-Frame-Options: ALLOW-FROM 你的域名，或是配置CSP的frame-ancestors字段添加你的域名
  • 如果是第三方不可控站点，需要通过你自己的后端服务做代理转发，请求目标站内容后去掉嵌入限制的响应头，再返回给前端加载
• 第三步：优化加载体验避免闪烁：可以给iframe添加加载状态，修改src前显示加载遮罩，监听iframe的load事件后再隐藏遮罩显示iframe，避免加载过程的闪烁感。

内容的提问来源于stack exchange，提问作者idan