Javascript - 阻止图像请求并将请求的 img-url 替换为另一个

Question

我的网站上有一些 Google 脚本，不幸的是其中一个通过 http 而不是 https 加载了一些额外的脚本和图像(我的网站是通过 https 交付的)。我设法使用以下代码( from this question )通过 https 加载脚本:

Object.defineProperty(HTMLScriptElement.prototype, 'src', {
    get: function(url) {
        return this.getAttribute('src')
    },
    set: function(url) {
        //console.log(url);
        var prefix = "http://";

        if (url.startsWith(prefix))
            url = "https://" + url.substr(prefix.length);

        //console.log('being set: ' + url);
        this.setAttribute('src', url);
    }
});

但是有一些图像文件仍然通过 http 加载。这些文件无法通过 https 获取。

我的想法是下载这些图像并将它们放在我的服务器上并从那里加载它们。有没有办法用 JavaScript 来覆盖图像路径？当然，我可以使用 jQuery，但在此之前，我必须在图像请求被触发之前阻止它。否则我的页面上会出现混合内容的问题。

所以让我们把它放在一起:- 页面已加载，一段时间后会发生某个用户操作(在我的例子中提交表单)- 基于此操作，会加载一个附加脚本，该脚本会在我的页面上放置一个虚拟键盘- 这个键盘有一些无法通过 https 加载的图像，所以我想阻止这些请求- 然后，我想用我的自定义图像网址替换被阻止的图像网址

这可能吗？

谢谢!

Answer 1

您可以尝试使用基于 JavaScript 的 HTTP 代理来拦截 http 请求预检。有一个流行的模拟 JavaScript 库可以做到这一点，称为“伪装者”， https://github.com/pretenderjs/pretender/blob/master/pretender.js#L266我认为你可以使用伪装者的代码来帮助你弄清楚如何拦截http请求预检并将它们重新路由到你选择的支持https的代理。