如何获取站点图片、脚本等资源经代理改写后用于HTML的src属性

问题原因分析 #

• 核心诱因是URL未编码：你直接将原始资源URL拼接在代理的查询参数中，若原始URL包含&、?、中文字符、空格等特殊字符，会直接破坏代理URL的参数结构。直接在地址栏访问时浏览器会自动对URL做隐式编码处理，所以可以正常访问，但通过JS直接给src/href属性赋值时不会自动处理参数内部的特殊字符，导致资源地址失效。
• 其次可能是重复拼接代理前缀：如果你的代码被多次触发，会出现代理地址+代理地址+原始资源地址的错误嵌套，导致资源无法访问。
• 也可能是代理响应头配置问题：如果代理返回的响应头设置了X-Content-Type-Options: nosniff，但返回的Content-Type和原始资源类型不匹配，浏览器会拒绝将资源加载到<img>、<script>等标签中，而直接地址栏访问时浏览器对MIME类型的校验规则更宽松，所以可以正常展示。
• 执行时机错误：如果代码在DOM未完全加载时就执行，会遗漏部分还没渲染完成的标签属性。

修复后代码 #

// 等待DOM完全加载后再执行属性替换，避免遗漏静态节点
document.addEventListener('DOMContentLoaded', function() {
    const proxy_url = "----insert proxy query here----";
    const srcNodeList = document.querySelectorAll('[src],[href]');

    for (let i = 0; i < srcNodeList.length; ++i) {
        const currentNode = srcNodeList[i];
        // 处理src属性，先判断是否已经加过代理前缀避免重复拼接
        if (currentNode.src && !currentNode.src.startsWith(proxy_url)) {
            // 对原始URL做编码处理，避免特殊字符破坏参数结构
            currentNode.src = proxy_url + encodeURIComponent(currentNode.src);
        }
        // 处理href属性，逻辑同上
        if (currentNode.href && !currentNode.href.startsWith(proxy_url)) {
            currentNode.href = proxy_url + encodeURIComponent(currentNode.href);
        }
    }                         
})

额外排查点 #

• 如果页面有动态插入的DOM元素，需要在元素插入完成后单独执行上述替换逻辑，当前的选择器只能捕获代码执行时已经存在的节点。
• 检查代理服务是否配置了防盗链规则：从页面标签发起的请求会携带当前页面的Referer头，直接地址栏访问不会携带，部分代理服务会拦截带非白名单Referer的请求。

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