archive.org 网站上动态创建的“a”（锚）元素的错误href

Question

我使用此代码创建“a”元素以将其添加到页面。 （在第 3 方网站上，它是一个用户脚本）

let anchor = document.createElement("a");
anchor.href = new URL("https://duckduckgo.com");
console.log(anchor);

//anchor.target = "_blank";
//anchor.rel = "nofollow noopener noreferrer";
//anchor.click();

在控制台中运行此代码进行检查。

此代码在所有网站上都可以正常工作，web.archive.org 上的某些页面除外

例如：

在https://web.archive.org/web/19961220154510/https://www.yahoo.com/

我明白了 <a href="https://web.archive.org/web/19961220154510if_/https://duckduckgo.com/"></a>,

但应该<a href="https://duckduckgo.com/"></a>。

.click()（在上面）打开了这个错误的 URL。

如何解决？

Chrome 和 Firefox 都会出现这种情况。

---

UPD：window.open("https://duckduckgo.com") 也会出错。

它打开https://web.archive.org/web/20080820060021/http://duckduckgo.com/ 而不是https://duckduckgo.com/。

Answer 1

这是因为该网站上的 Javascript 覆盖了HTMLAnchorElement.prototype.href：

覆盖原生原型是不好的做法，会导致类似这样的令人困惑的错误。

对于用户脚本，您可以通过在页面加载开始时保存对 href 属性描述符的引用来修复它，然后在错误的内置代码尝试重新分配它后将其重新分配给 HTMLAnchorElement.prototype.href：

// ==UserScript==
// @name             0 New Userscript
// @include          https://web.archive.org/web/19961220154510/https://www.yahoo.com/
// @run-at           document-start
// @grant            none
// ==/UserScript==

const originalHrefDescriptor = Object.getOwnPropertyDescriptor(HTMLAnchorElement.prototype, 'href');
window.addEventListener('DOMContentLoaded', () => {
  Object.defineProperty(HTMLAnchorElement.prototype, 'href', originalHrefDescriptor);
  // Now, assigning to .hrefs results in normal behavior again
});

确保使用// @run-at document-start 确保您的用户脚本在页面上的任何代码运行之前运行 - 这样，您可以在描述符被覆盖之前保存对它的引用。

对于 wombat 的这种特殊情况，您还可以为 a 提供 _no_rewrite 属性，而不是保存描述符：

const a = document.createElement('a');
a._no_rewrite = true;
a.href = 'https://www.google.com';