如何修复用户脚本中 URL 替换导致的相对路径误补全问题-js教程-PHP中文网

如何修复用户脚本中 URL 替换导致的相对路径误补全问题

用户脚本中对标签 href 属性执行正则替换后，若结果不以 http:// 或 https:// 等有效协议开头，浏览器会将其视为相对 URL，并自动拼接当前页面地址，造成链接污染。根本原因在于协议分隔符（如 : 和 /）被 URL 编码或格式异常，导致替换后字符串无法通过浏览器的协议校验。

用户脚本中对 `` 标签 `href` 属性执行正则替换后，若结果不以 `http://` 或 `https://` 等有效协议开头，浏览器会将其视为相对 url，并自动拼接当前页面地址，造成链接污染。根本原因在于协议分隔符（如 `:` 和 `/`）被 url 编码或格式异常，导致替换后字符串无法通过浏览器的协议校验。

在 Steam 社区等平台常见的跳转链接（如 https;//steamcommunity.com/linkfilter/?u=https;//www.cyberpunk.net）中，实际协议分隔符常被错误写为 ;（分号）而非标准 :（冒号），这是典型的手动编码或富文本编辑器转义残留。当 JavaScript 执行 .replace() 后得到 https;//www.cyberpunk.net 时，浏览器因未识别 https; 为合法协议，直接降级为相对路径处理——于是将当前页 URL（如 https://store.steampowered.com/app/1091500/...）作为基路径拼接上去，最终生成错误链接。

✅ 正确解法需双重保障：

精准解码与标准化协议头：先修复异常分隔符，再确保协议格式合规；
强制声明绝对 URL：替换后显式添加协议前缀，避免浏览器歧义。

以下为健壮的用户脚本实现（兼容 jQuery 与原生 DOM）：

jQuery(document).on("mouseenter", "a", function(event) {
    const $el = jQuery(this);
    let href = $el.prop("href");

    // Step 1: 修复常见协议分隔符错误（; → :），并解码可能的 HTML 实体
    href = href.replace(/https;\/\//g, "https://")
               .replace(/http;\/\//g, "http://")
               .replace(/&/g, "&")
               .replace(/, "/g, ">");

    // Step 2: 提取 linkfilter 中的真实目标 URL（支持多种编码变体）
    const match = href.match(/https?:\/\/steamcommunity\.com\/linkfilter\/\?u=([^&\s]+)/i);
    if (match && match[1]) {
        let target = decodeURIComponent(match[1]);
        // 再次校验 target 是否已含合法协议，否则补全 https://
        if (!/^https?:\/\//i.test(target)) {
            target = "https://" + target;
        }
        $el.prop("href", target);
    }
});

⚠️ 关键注意事项：

勿依赖 .attr("href")：应始终使用 .prop("href") 获取解析后的绝对 URL（.attr() 返回原始 HTML 值，易受相对路径干扰）；
避免 mouseenter 频繁触发：可改用 click 或 mousedown，或添加防抖逻辑，防止重复处理；
兼容性兜底：若目标 URL 解析失败，建议保留原始 href 或降级为 #，避免链接失效；
安全边界：生产环境应增加白名单校验（如仅处理 steamcommunity.com 域下的 linkfilter 链接），防止 XSS 风险。