【Javascript】Content-Security-Policy upgrade-insecure-requests

关注

原创最新推荐文章于 2026-04-01 03:32:34 发布 4.6k 阅读 AI 写同款· GEO 优化 ›

网站扫描出的漏洞解决：检测到目标Content-Security-Policy、X-XSS-Protection/Content-Security-Policy响应头缺失、加密算法等处理修复方法 Content Security Policy (CSP) 通过告诉浏览器一系列规则，严格规定页面中哪些资源允许有哪些来源，不在指定范围内的统统拒绝，可以服务器添加 Content-Security-Policy 头信息来指定规则解决。connect-src *会使安全进行升级，即一个http页面中所有调用的静态资源会自动升级使用https调用。但这样也会产生很多问题，如果调用的资源实际并不支持https的话，这时如果不是线上环境可以不理会，线上环境使用https就没有这样的问题了。阅读详情

业务场景

在 https 协议下使用阿里云的 OSS 直传功能时，会出现相关错误提示导致图片无法上传

解决方案

可以在客户端页面 head 元素中添加 CSP meta 标签来解决，可参考如下资料：
https://cloud.tencent.com/developer/section/1189878

代码示例

function set_content_security_policy() {
    if (window.location.protocol == 'http:') return;

    var metas = document.getElementsByTagName("meta");
    var has_set = false;
    for (var i = 0; i < metas.length; i++) {
        if (metas[i].getAttributeNode("http-equiv") != null &&
            metas[i].getAttributeNode("http-equiv").value == "Content-Security-Policy" &&
            metas[i].getAttributeNode("content") != null &&
            metas[i].getAttributeNode("content").value == "upgrade-insecure-requests"
        ) {
            has_set = true;
            break;
        }
    }
    if (!has_set) {
        var meta_new = document.createElement("META");
        var http_equiv = document.createAttribute("http-equiv");
        var content = document.createAttribute("content");
        http_equiv.value = "Content-Security-Policy";
        content.value = "upgrade-insecure-requests";
        meta_new.setAttributeNode(http_equiv);
        meta_new.setAttributeNode(content);
        document.getElementsByTagName("head")[0].appendChild(meta_new);
    }
}