修复HTTPS升级后出现 Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure frame 'http://xxx'. This request has been blocked; the content must be served over HTTPS. 的问题

简介: 修复HTTPS升级后出现 Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure frame 'http://xxx'. This request has been blocked; the content must be served over HTTPS. 的问题

背景
image

由于需要使用摄像头拍照,需要将原来的http升级到https,通过一顿捣鼓,升级成功。
不过页面加载出现了问题,具体的提示是说:你的页面是在https环境,但是你访问了一个资源(我这里是iframe,也可能是stylesheet等其他资源),而这个资源是在http环境下的,浏览器不给你这样玩。
https只能访问https的资源,也因为此修改了接口的baseURL。
解决办法
在nginx 配置中加上 add_header Content-Security-Policy "upgrade-insecure-requests"; 这一条配置即可。

让 http 能够自动转发到 https

server {
listen 80;
server_name yourdomain.com;

location / {
    return 301 https://$host$request_uri;
}
AI 代码解读

}

server {
listen 443 ssl;
server_name yourdomain.com;
ssl_certificate yourcrt.pem;
ssl_certificate_key yourkey.pem;
ssl_session_timeout 5m;

location / {
    port_in_redirect off;
    proxy_pass http://127.0.0.1:1234;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    # 加上这条即可 👇
    add_header Content-Security-Policy "upgrade-insecure-requests";
}
AI 代码解读

}
为什么HTTPS和HTTP不能混用?
混合内容问题:当一个安全的 HTTPS 页面试图加载非安全的 HTTP 内容时,这种情况被称为“混合内容”。浏览器通常会阻止这种行为,因为它降低了整个页面的安全性。
安全风险:HTTP 内容没有加密,易受中间人攻击。如果在 HTTPS 页面中加载 HTTP 内容,攻击者可能利用这个未加密的内容来攻击整个页面,比如通过注入恶意脚本。
[kod.kangmingjian.com)
[kod.ybs0510.com)
[kod.chinavision1.com)
[kod.pld8.com)
[kod.rwhds.com)
[kod.bzxtp.com)
隐私和完整性:HTTPS 旨在保护用户数据的隐私和完整性。混合内容使得 HTTPS 页面的这些保障部分失效,因为嵌入的 HTTP 内容不受同样的保护。
用户信任:用户可能信任一个安全的 HTTPS 页面,如果这个页面包含不安全的内容,这可能误导用户,使他们对整个页面的安全性有错误的理解。
如果实在要混用怎么办?
参考这篇文章:如何在 https 的 iframe 里访问 http 页面? | nginx应用实战-3
原理就是在服务器访问http拿到页面,然后包装成https再返回来。
其实最好就是原http页面也升级成https,上面的方法是针对原http不是自己写的没法改的情况下。

目录
打赏
0
0
0
0
41
分享
相关文章
MCP协议重大升级,Spring AI Alibaba联合Higress发布业界首个Streamable HTTP实现方案
本文由Spring AI Alibaba Contributor刘军、张宇撰写,探讨MCP官方引入的全新Streamable HTTP传输层对原有HTTP+SSE机制的重大改进。文章解析Streamable HTTP的设计思想与技术细节,并介绍Spring AI Alibaba开源框架提供的Java实现,包含无状态服务器模式、流式进度反馈模式等多种场景的应用示例。同时,文章还展示了Spring AI Alibaba + Higress的完整可运行示例,分析当前实现限制及未来优化方向,为开发者提供参考。
Linux网络应用层协议展示:HTTP与HTTPS
此外,必须注意,从HTTP迁移到HTTPS是一项重要且必要的任务,因为这不仅关乎用户信息的安全,也有利于你的网站评级和粉丝的信心。在网络世界中,信息的安全就是一切,选择HTTPS,让您的网站更加安全,使您的用户满意,也使您感到满意。
82 18
HTTP/HTTPS协议(请求响应模型、状态码)
本文简要介绍了HTTP与HTTPS协议的基础知识。HTTP是一种无状态的超文本传输协议,基于TCP/IP,常用80端口,通过请求-响应模型实现客户端与服务器间的通信;HTTPS为HTTP的安全版本,基于SSL/TLS加密技术,使用443端口,确保数据传输的安全性。文中还详细描述了HTTP请求方法(如GET、POST)、请求与响应头字段、状态码分类及意义,并对比了两者在请求-响应模型中的安全性差异。
244 20
HTTP/HTTPS与SOCKS5协议在隧道代理中的兼容性设计解析
本文系统探讨了构建企业级双协议隧道代理系统的挑战与实现。首先对比HTTP/HTTPS和SOCKS5协议特性,分析其在工作模型、连接管理和加密方式上的差异。接着提出兼容性架构设计,包括双协议接入层与统一隧道内核,通过协议识别模块和分层设计实现高效转换。关键技术部分深入解析协议转换引擎、连接管理策略及加密传输方案,并从性能优化、安全增强到典型应用场景全面展开。最后指出未来发展趋势将更高效、安全与智能。
85 1
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
184 3
HTTP与HTTPS协议入门
HTTP协议是互联网的基石,HTTPS则是其安全版本。HTTP基于TCP/IP协议,属于应用层协议,不涉及数据包传输细节,主要规定客户端与服务器的通信格式,默认端口为80。
138 25
HTTP与HTTPS协议入门
代理协议解析:如何根据需求选择HTTP、HTTPS或SOCKS5?
本文详细介绍了HTTP、HTTPS和SOCKS5三种代理协议的特点、优缺点以及适用场景。通过对比和分析,可以根据具体需求选择最合适的代理协议。希望本文能帮助您更好地理解和应用代理协议,提高网络应用的安全性和性能。
219 17
HTTPS与HTTP:区别及安全性对比
HTTP和HTTPS是现代网络通信中的两种重要协议。HTTP为明文传输,简单但不安全;HTTPS基于HTTP并通过SSL/TLS加密,确保数据安全性和完整性,防止劫持和篡改。HTTPS还提供身份验证,保护用户隐私并防止中间人攻击。尽管HTTPS有额外的性能开销和配置成本,但在涉及敏感信息的场景中,如在线支付和用户登录,其安全性优势至关重要。搜索引擎也更青睐HTTPS网站,有助于提升SEO排名。综上,HTTPS已成为大多数网站的必然选择,以保障用户数据安全和合规性。
406 1
nginx安装部署ssl证书,同时支持http与https方式访问
为了使HTTP服务支持HTTPS访问,需生成并安装SSL证书,并确保Nginx支持SSL模块。首先,在`/usr/local/nginx`目录下生成RSA密钥、证书申请文件及自签名证书。接着,确认Nginx已安装SSL模块,若未安装则重新编译Nginx加入该模块。最后,编辑`nginx.conf`配置文件,启用并配置HTTPS服务器部分,指定证书路径和监听端口(如20000),保存后重启Nginx完成部署。
2473 8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
在运行一个group by的sql时,抛出以下错误信息: Task with the most failures(4):  -----Task ID:  task_201411191723_723592_m_000004URL:  http://DDS0204.
1051 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问