Mixed Content: The page at was loaded over HTTPS, but requested an insecure imag

简介: Mixed Content: The page at was loaded over HTTPS, but requested an insecure imag

让浏览器不再显示 https 页面中的 http 请求警报

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

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

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

01ebd755782e4c909dad0843d3544acf.jpeg

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

CSP设置upgrade-insecure-requests

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难,在 2015 年 4 月份就出了一个 Upgrade Insecure Requests草案,他的作用就是让浏览器自动升级请求。

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

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

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

01ebd755782e4c909dad0843d3544acf.jpeg

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

01ebd755782e4c909dad0843d3544acf.jpeg

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

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

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

从 W3C 工作组给出的 example,可以看出,这个设置不会对外域的 a 链接做处理,所以可以放心使用。


目录
相关文章
|
自然语言处理 Kubernetes 安全
服务网格ASM使用FAQ之(1):如何使用WebSocket over HTTP/2协议
为了更好地满足企业日益加深的大规模使用服务网格产品、服务多语言互通、服务精细治理等需求,2022 年 4 月 1 日起,阿里云服务网格产品 ASM 正式发布商业化版本,为企业在生产环境下大规模落地服务网格能力提供性能、安全、高可用、高可靠等服务保障。阿里云内部很早就开始调研并实践 ServiceMesh 技术,通过总结业务场景落地经验,持续驱动技术发展,积累一系列服务网格核心技术,并将其沉淀成为业
422 0
|
2月前
解决Error:All flavors must now belong to a named flavor dimension. Learn more at https://d.android.com
解决Error:All flavors must now belong to a named flavor dimension. Learn more at https://d.android.com
22 5
|
7月前
|
存储 XML 数据格式
【SVN异常】svn: E175003: The server at ‘https://svn.example.com/!/%23MyRepo/‘ does not support the HTTP/
【SVN异常】svn: E175003: The server at ‘https://svn.example.com/!/%23MyRepo/‘ does not support the HTTP/
86 0
|
7月前
|
JSON 前端开发 JavaScript
什么是 HTTP Over the wire
什么是 HTTP Over the wire
41 0
|
12月前
|
前端开发 JavaScript
【WEB前端】【报错解决】This request has been blocked; the content must be served over HTTPS.
【WEB前端】【报错解决】This request has been blocked; the content must be served over HTTPS.
613 0
|
12月前
|
JavaScript 网络安全
Mixed Content: The page at ‘<URL>‘ was loaded over HTTPS, but requested an insecure frame ‘<URL>‘...
Mixed Content: The page at ‘<URL>‘ was loaded over HTTPS, but requested an insecure frame ‘<URL>‘...
656 0
|
前端开发 JavaScript
uniapp真机调试文件查找失败:‘./pages/index/index.nvue?mpType=page‘; Error: Cannot find module ‘pages/ ———————————————— 版权声明:本文为CSDN博主「前端老实人」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_52691965/article/details/119241451
uniapp真机调试文件查找失败:‘./pages/index/index.nvue?mpType=page‘; Error: Cannot find module ‘pages/ ———————————————— 版权声明:本文为CSDN博主「前端老实人」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_52691965/article/details/119241451
|
Web App开发 应用服务中间件 nginx
错误:Mixed Content: The page at 'https://a.b.com/detail?id=5' was loaded over HTTPS, but reque
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/catoop/article/details/70247993 关于这个错误的详细内容为: Mixed Content: The page at 'https://a.
6913 0
|
2月前
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
148 0
|
1天前
|
安全 网络协议 算法
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
【计算机网络】http协议的原理与应用,https是如何保证安全传输的