为何MutationObserver无法及时修改动态iframe的navigator.userAgent属性？

我正在更新一款重定义navigator.userAgent的Chrome扩展，把原来的DOMNodeInserted事件替换为MutationObserver后，出现了无法修改iframe的navigator.userAgent的异常行为。

在UA测试页面控制台运行代码可复现差异：

• 使用DOMNodeInserted能正常将iframe的UA改为'TEST'：

document.addEventListener('DOMNodeInserted', function(event) {
    if (event.target.tagName == 'IFRAME')
        for (var i=0; i<window.frames.length; i++)
            try { Object.defineProperty(window.frames[i].navigator, 'userAgent', {value:'TEST'}); } catch(e) {}
});

• 改用MutationObserver则无法修改：

var observer = new MutationObserver(function(mutations) {
    for (var mutation of mutations)
        for (var item of mutation.addedNodes)
            if (item.tagName == 'IFRAME')
                for (var i=0; i<window.frames.length; i++)
                    try { Object.defineProperty(window.frames[i].navigator, 'userAgent', {value:'TEST'}); } catch(e) {}
});
observer.observe(document, { childList:true, subtree:true });

注：上面遍历window.frames的方式比较粗糙，我尝试过相关优化方案但没成功，甚至怀疑MutationObserver根本做不到这个UA补丁。

问题出在触发时机的同步/异步差异：

• DOMNodeInserted是同步事件：iframe刚被插入DOM就立即执行回调，此时iframe还处于加载初期，navigator.userAgent还没被页面脚本读取，修改能生效。
• MutationObserver是异步触发：回调会等当前宏任务执行完才运行，这时候iframe可能已经完成初始化，UA已经被读取过，甚至浏览器已经对navigator的属性做了保护，导致修改无效。

1. 重写document.createElement提前介入 #

直接拦截iframe的创建过程，在元素被插入DOM前就绑定load事件，确保在iframe初始化时修改UA：

// 保存原生方法
const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
  const element = originalCreateElement.call(this, tagName);
  if (tagName.toLowerCase() === 'iframe') {
    // 绑定load事件，iframe加载完成时立即修改UA
    element.addEventListener('load', function() {
      try {
        Object.defineProperty(this.contentWindow.navigator, 'userAgent', {
          value: 'TEST',
          writable: false,
          configurable: true
        });
      } catch(e) {}
    });
  }
  return element;
};

这种方式比DOM监听更早，能覆盖所有通过createElement创建的iframe。

2. MutationObserver结合同步修改+load兜底 #

在Observer回调里先同步尝试修改，同时监听iframe的load事件确保覆盖所有场景：

const observer = new MutationObserver(function(mutations) {
  for (const mutation of mutations) {
    for (const item of mutation.addedNodes) {
      if (item.tagName === 'IFRAME') {
        const modifyUA = () => {
          try {
            Object.defineProperty(item.contentWindow.navigator, 'userAgent', {
              value: 'TEST',
              writable: false,
              configurable: true
            });
          } catch(e) {}
        };
        // 先同步尝试修改（可能在iframe加载前生效）
        modifyUA();
        // 若iframe未加载完成，load时再补一次
        if (item.contentWindow.document.readyState !== 'complete') {
          item.addEventListener('load', modifyUA);
        }
      }
    }
  }
});
observer.observe(document, { childList: true, subtree: true });

3. Chrome扩展专属：用content script注入到所有iframe #

这是最可靠的方案，直接在扩展的manifest.json里配置，让修改UA的脚本在所有iframe初始化前就执行：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["modify-ua.js"],
      "all_frames": true,
      "run_at": "document_start"
    }
  ]
}

modify-ua.js内容：

Object.defineProperty(navigator, 'userAgent', {
  value: 'TEST',
  writable: false,
  configurable: true
});

run_at: document_start会在iframe的DOM开始构建前就注入脚本，直接修改UA，完全不需要依赖DOM监听。

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