第三方JS库设置img-src时，如何强制浏览器使用HTTPS？

问题描述 #

我使用CanadaPost AddressComplete库，该库包含以下代码片段：

/* Preload images that are to be used in the css. */
function preloadImage(url) {
    var img = new Image();
    img.src = url;
}

preloadImage('//' + pca.host + '/images/icons/captureplus/loqatelogoinverted.svg');
preloadImage('//' + pca.host + '/images/icons/captureplus/geolocationicon.svg');
preloadImage('//' + pca.host + '/images/icons/captureplus/loader.gif');
preloadImage('//' + pca.host + '/images/icons/captureplus/chevron.png');

尽管通过HTTPS获取该脚本，但Firefox 128和Chrome 126仍尝试通过HTTP请求这些图片，违反了网站的CSP规则。由于无权修改该JS库的代码，希望了解是否可通过自有JS代码或加载库的script标签修改浏览器行为，还是必须为img-src的CSP添加HTTP规则。

解决方案选项 #

1. 提前重写Image构造函数强制HTTPS #

在加载CanadaPost库之前执行以下代码，重写原生Image构造函数，拦截相对协议的URL并替换为HTTPS：

// 保存原生Image构造函数
const OriginalImage = window.Image;
window.Image = function() {
    const img = new OriginalImage();
    // 获取原生src属性的setter
    const originalSrcSetter = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src').set;

    // 重写src的setter
    Object.defineProperty(img, 'src', {
        set: function(url) {
            // 替换相对协议开头的URL为HTTPS
            if (url.startsWith('//')) {
                url = 'https:' + url;
            }
            originalSrcSetter.call(this, url);
        }
    });
    return img;
};

这种方式能直接修改库中图片预加载的请求协议，无需改动库代码。

2. 使用CSP的upgrade-insecure-requests指令 #

在网站的Content Security Policy中添加upgrade-insecure-requests指令，浏览器会自动将所有相对协议（//）或HTTP的请求升级为HTTPS，彻底解决混合内容问题：

Content-Security-Policy: upgrade-insecure-requests; img-src 'self' https://your-allowed-domains.com; ...其他规则...

该指令兼容性良好，Chrome和Firefox均支持，是最简洁且安全的方案。

3. 不推荐：为img-src添加HTTP规则 #

除非上述两种方案都无法实施，否则不建议直接在img-src中添加HTTP规则。这会放宽CSP限制，允许混合内容加载，降低网站的安全性，违背CSP的设计初衷。

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