javascript - Hook document.createElement 脚本来更改 src

Question

我正在尝试 Hook document.createElement 来更改每个分配的 src 属性值。

这就是我正在做的事情:

var original = document.createElement;
    document.createElement = function (tag) {
      var element = original.call(document, tag);
      if (tag.toLowerCase() === 'script') {
        Object.defineProperty(element.__proto__, 'src', {
          set: function(newValue) {
            element['src'] = 'test';
          }
        });
      }
      return element;
    };

问题在于 element['src'] = 'test'; 一次又一次地调用 setter 导致堆栈溢出。我尝试了不同的方法，在外部保存局部变量并将其值设置为 newValue 并将 getter 添加到返回的 src 属性相反。这种方法的问题在于，如果稍后将 script 元素附加到 dom，则会添加一个不带 src 属性的 script 标签，就像 append 方法以某种方式尝试获取 src 一样 属性以不同的方式然后正常访问它，这样 getter 就不会被调用，所以我留下了一个空的脚本标签。

在这种情况下我能做什么，有什么想法可以将脚本的 src 属性使用的值“替换”为另一个值吗？

编辑:这是我最终得到的钩子(Hook):

    Object.defineProperty(HTMLScriptElement.prototype, 'src', {
  set: function(newValue) {
    const r = /(?:[^:]+:)?\\/\\//;
    if (r.test(newValue)) {
      this.setAttribute("src", 'http://localhost:8080/v1/proxy?url=' + (newValue.startsWith('http') ? encodeURIComponent(newValue) : encodeURIComponent('http:' + newValue)));
    } else {
      this.setAttribute("src", 'http://localhost:8080/v1/proxy?url=' + encodeURIComponent(absolute('${originalHost}', newValue)));
    }
  }
});

我意识到我需要涵盖更改 script 元素的 src 属性的所有可能方法，包括 setAttribute('src', '...')如果我要 Hook setAttribute ，则会导致堆栈溢出，因为我已经 Hook 了 src 属性 setter 并使用了 setAttribute > 在里面。如何实现 Hook setAttribute 以便完全控制 src 值而不导致堆栈溢出？

Answer 1

搞乱不是您创建的方法和原型(prototype)是非常糟糕的做法，但无论如何，这可能是您的解决方案。

只需将“element['src'] = 'test';”替换为“element.setAttribute('src', 'test');”。这样您就可以避免使用该属性。 setAttribute 方法直接与元素的属性交互，而不是通过浏览器的属性 getter。