Safari混合内容限制下修改客户端JS脚本URL的方案咨询

1. 页面加载前注入脚本替换资源地址 #

在iOS应用的WebView（如WKWebView）中，可通过文档开始阶段注入用户脚本的方式，在页面静态资源加载前完成地址替换：

• 配置WKUserScript时设置注入时机为atDocumentStart，确保DOM开始解析但资源未发起请求前执行
• 注入脚本逻辑：遍历所有已解析的<script>标签，匹配目标HTTP地址的标签，将其src替换为你的HTTPS端点地址

示例注入脚本：

document.querySelectorAll('script[src="http://127.0.0.1:1234/script.js"]').forEach(script => {
    script.src = 'https://my-endpoint/script.js';
});

这种方式从根源上规避混合内容拦截，浏览器会直接请求安全的HTTPS资源。

2. 页面渲染后修改并重新执行脚本 #

若无法提前注入，也可在页面加载完成后处理被拦截的脚本：

1. 定位原HTTP脚本标签，记录其在DOM中的位置
2. 创建新的<script>元素，设置src为你的HTTPS地址
3. 将新脚本插入到原标签的对应位置，保证执行顺序与原逻辑一致
4. 原脚本初始化的localhostExists为false，新脚本加载后会覆盖该变量，后续判断逻辑可正常运行

示例代码：

const oldScript = document.querySelector('script[src="http://127.0.0.1:1234/script.js"]');
if (oldScript) {
    const newScript = document.createElement('script');
    newScript.src = 'https://my-endpoint/script.js';
    oldScript.parentNode.insertBefore(newScript, oldScript.nextSibling);
    oldScript.remove();
}

注意：需确保你的HTTPS端点返回的脚本内容与原localhost脚本完全一致（即localhostExists=true;），否则页面逻辑会出现错误。

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