使不安全的图像源安全客户端答案

【问题标题】：Making insecure images sources secure client-side使不安全的图像源安全客户端
【发布时间】：2014-12-31 15:58:46
【问题描述】：

我让我的 VanillaForums 论坛上的用户选择是否使用https 协议，我想测试是否可以使用 jQuery 在客户端更改图像源。

我希望此代码将图像源链接中的协议更改为// 而不是http:// 并在图像加载之前加载，所以我使用了.ready()：

$(document).ready(function () {
    if (window.location.protocol == "https:") {     
        var $imgs = $("img");
        $imgs.each(function () {
            var img_src = $(this).prop("src");
            if (img_src.indexOf("http://") < 0) return;
            var new_img_src = img_src.replace("http:", "");
            $(this).prop("src", new_img_src);
        });
    }
});

虽然它确实可以更改图像源，但 URL 栏仍然显示：

并且控制台会给出http://someimageurl... 不安全的警告。

我是否需要将代码移到页面顶部，否则不会产生影响？

【问题讨论】：

它会在ready 触发之前开始加载图像吗？无论使用何种协议，您都可以进行替换，那么为什么不在服务器端进行呢？
如果您不想要警告，您需要在服务器上进行修改。浏览器看到网址后为时已晚
谢谢查理，我认为这可能是问题所在。

标签： javascript jquery ssl

【解决方案1】：

需要在服务器端完成浏览器才不会抛出不安全的连接警告。负责代码的文件是/library/core/functions.render.php，可以看here。

$PhotoURL 是需要更改的变量。使用以下内容确保所有图像都通过https: 协议加载：str_replace('http://', 'https://', $PhotoURL)。

我通常不介意小型软件的全局范围，但在像 Vanilla 这样大的软件中，这就像大海捞针一样。

我找不到任何其他特别适用于 Vanilla 的修复程序，所以我希望这对人们有所帮助。

【讨论】：