修复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. 的问题

背景

• 由于需要使用摄像头拍照，需要将原来的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;
	}
	}
	server {
	listen 443 ssl;
	server_name yourdomain.com;
	ssl_certificate yourcrt.pem;
	ssl_certificate_key yourkey.pem;
	ssl_session_timeout 5m;
	location / {
	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”;
	}
	}

为什么HTTPS和HTTP不能混用？

1. 混合内容问题：当一个安全的 HTTPS 页面试图加载非安全的 HTTP 内容时，这种情况被称为“混合内容”。浏览器通常会阻止这种行为，因为它降低了整个页面的安全性。
2. 安全风险：HTTP 内容没有加密，易受中间人攻击。如果在 HTTPS 页面中加载 HTTP 内容，攻击者可能利用这个未加密的内容来攻击整个页面，比如通过注入恶意脚本。
3. 隐私和完整性：HTTPS 旨在保护用户数据的隐私和完整性。混合内容使得 HTTPS 页面的这些保障部分失效，因为嵌入的 HTTP 内容不受同样的保护。
4. 用户信任：用户可能信任一个安全的 HTTPS 页面，如果这个页面包含不安全的内容，这可能误导用户，使他们对整个页面的安全性有错误的理解。

如果实在要混用怎么办？