逐浪云主机

立即开通

解决ssl调用非安全资源问题This request has been blocked; the content must be served over HTTPS.

作者: 发布时间:2020-04-21 来源:本站原创 点击数:

某天发哥在处理一个旧网页,要用iframe嵌入一个网站。
被嵌入网站是一个非ssl的传统站-政府门户陈旧没人维护:(
结果在客户的ssl站点上,始终显示不出来。

查错思路

有问题就找问题,怎么办?
于是在将这个页面放到其它各个站点,排除是否是针对性的,目标站作了来路过滤和屏蔽。
发现不是。
最后发现在非ssl下就正常。
显然是ssl问题了。

问题原理

HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错:

Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’. This content should also be served over HTTPS.

HTTPS改造之后,我们可以在很多页面中看到如下警报:

多运营对 https 没有技术概念,在填入的数据中不免出现 http 的资源,体系庞大,出现疏忽和漏洞也是不可避免的。

解决方案

CSP设置upgrade-insecure-requests

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难,在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案(http://www.w3.org/TR/mixed-content/),他的作用就是让浏览器自动升级请求。

在我们服务器的响应头中加入:

header("Content-Security-Policy: upgrade-insecure-requests");

我们的页面是 https 的,而这个页面中包含了大量的 http 资源(图片、iframe等),页面一旦发现存在上述响应头,会在加载 http 资源时自动替换成 https 请求。可以查看 google 提供的一个 demo(https://googlechrome.github.io/samples/csp-upgrade-insecure-requests/index.html):

不过让人不解的是,这个资源发出了两次请求,猜测是浏览器实现的 bug:

当然,如果我们不方便在服务器/Nginx 上操作,也可以在页面中加入 meta 头:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

目前支持这个设置的还只有 chrome 43.0,不过我相信,CSP 将成为未来 web 前端安全大力关注和使用的内容。而 upgrade-insecure-requests 草案也会很快进入 RFC 模式。

从 W3C 工作组给出的 example(http://www.w3.org/TR/upgrade-insecure-requests/#examples),可以看出,这个设置不会对外域的 a 链接做处理,所以可以放心使用。

本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友
上一篇文章:https证书pfx 生成 pem,crt,key
下一篇文章: