nginx配置https请求转发到http出现Mixed Contend问题

问题描述

nginx配置https请求转发到http后，部分网站访问出现空白页，感觉像是js、css没有正常加载。通过F12，发现很多js文件出现Mixed Content，状态是已屏蔽，协议都是http的。

HTTPS网页中加载HTTP资源被称之为Mixed Content（混合内容），为了安全，浏览器默认做了屏蔽，致使页面出现问题。

解决方法

而通过 upgrade-insecure-requests 这个 CSP 指令，可以让浏览器帮忙做这个转换。启用这个策略后，有两个变化：

1. 页面所有 HTTP 资源，会被替换为 HTTPS 地址再发起请求；
2. 页面所有站内链接，点击后会被替换为 HTTPS 地址再跳转；

(另外一个https相关的SCP指令选项是：block-all-mixed-content。启用这个选项之后，所有的非https资源都被禁止加载）参考：解决nginx反向代理Mixed Content和Blockable问题 - MlxgzZ - 博客园 (cnblogs.com)

实际配置

比如如果有使用nginx做代理，可以在转发请求的时候添加一个Content-Security-Policy的头，并将这个头的值设置为upgrade-insecure-requests，来将http请求转为https。在nginx的location块中添加 add_header Content-Security-Policy upgrade-insecure-requests;

location / { 
     proxy_pass http://X.X.X.X;
     proxy_set_header X-Real-IP $remote_addr;
     add_header Content-Security-Policy upgrade-insecure-requests;
  }