加载空src iframe提取原生常量，如何防止修改src属性（含setAttribute）

Nice catch! You've already got part of the solution by locking down the src property with Object.defineProperty, but you're right that setAttribute can still modify the underlying HTML attribute—since JS properties and DOM attribute nodes are separate (even though they often sync up). Let's cover how to fully block any attempts to change that iframe's src:

方法1：拦截iframe的setAttribute调用 #

直接重写目标iframe实例的setAttribute方法，对src属性的修改请求直接拒绝。为了防止别人再覆盖这个拦截方法，我们用Object.defineProperty把它设为不可写、不可配置：

const iframeElement = document.querySelector('iframe');
const originalSetAttribute = iframeElement.setAttribute;

Object.defineProperty(iframeElement, 'setAttribute', {
  value: function(name, value) {
    if (name.toLowerCase() === 'src') {
      // 可选：抛出警告提示，或者静默忽略
      console.warn('Unauthorized attempt to modify blocked iframe src');
      return;
    }
    // 正常处理其他属性修改
    originalSetAttribute.call(this, name, value);
  },
  writable: false,
  configurable: false
});

方法2：用MutationObserver做兜底监听 #

如果担心有人通过原型链调用（比如Element.prototype.setAttribute.call(iframeElement, 'src', ...)）绕开上面的拦截，可以用MutationObserver监听所有属性变化，一旦发现src被修改就立刻恢复原值：

const iframeElement = document.querySelector('iframe');
const originalSrc = iframeElement.src;

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'src' && mutation.target.src !== originalSrc) {
      // 立即恢复原始src
      iframeElement.src = originalSrc;
      console.warn('Restored blocked iframe src after unauthorized modification');
    }
  });
});

// 启动监听，只关注属性变化
observer.observe(iframeElement, { attributes: true });

这是个"事后补救"的方案，虽然可能有一瞬间属性被修改，但能快速拉回正确状态，保证最终结果符合预期。

方法3：组合双重加固（推荐） #

把上面两种方法和你已有的src属性锁定结合起来，形成多层防护，几乎不可能被绕开：

const iframeElement = document.querySelector('iframe');
const originalSrc = iframeElement.src;
const originalSetAttribute = iframeElement.setAttribute;

// 1. 锁住JS层面的src属性（你已实现的步骤）
Object.defineProperty(iframeElement, 'src', {
  writable: false,
  configurable: false
});

// 2. 拦截setAttribute调用
Object.defineProperty(iframeElement, 'setAttribute', {
  value: function(name, value) {
    if (name.toLowerCase() === 'src') {
      console.warn('Blocked attempt to modify iframe src');
      return;
    }
    originalSetAttribute.call(this, name, value);
  },
  writable: false,
  configurable: false
});

// 3. MutationObserver兜底监听
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'src' && mutation.target.src !== originalSrc) {
      iframeElement.src = originalSrc;
      console.warn('Restored iframe src after unauthorized change');
    }
  });
});

observer.observe(iframeElement, { attributes: true });

额外提示：如果你的场景需要处理命名空间属性，可以用同样的逻辑拦截setAttributeNS方法，进一步缩小漏洞。

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