解决nginx反向代理Mixed Content和Blockable问题

nginx配置https反向代理,按F12发现js等文件出现Mixed Content,Optionally-blockable 和 Blockable

HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容),不同浏览器对 Mixed Content 有不一样的处理规则。

现代浏览器(Chrome、Firefox、Safari、Microsoft Edge),基本上都遵守了 W3C 的 Mixed Content 规范,将 Mixed Content 分为 Optionally-blockable 和 Blockable 两类:

Optionally-blockable 类 Mixed Content 包含那些危险较小,即使被中间人篡改也无大碍的资源。现代浏览器默认会加载这类资源,同时会在控制台打印警告信息。这类资源包括:

通过 <img> 标签加载的图片(包括 SVG 图片);
通过 <video> / <audio> 和 <source> 标签加载的视频或音频;
预读的(Prefetched)资源;
除此之外所有的 Mixed Content 都是 Blockable,浏览器必须禁止加载这类资源。所以现代浏览器中,对于 HTTPS 页面中的 JavaScript、CSS 等 HTTP 资源,一律不加载,直接在控制台打印错误信息

 

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

    页面所有 HTTP 资源,会被替换为 HTTPS 地址再发起请求;
    页面所有站内链接,点击后会被替换为 HTTPS 地址再跳转;
(另外一个https相关的SCP指令选项是:block-all-mixed-content。启用这个选项之后,所有的非https资源都被禁止加载)

实际配置

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

关键配置:
    add_header Content-Security-Policy upgrade-insecure-requests;

 

server {
  listen 80;
  server_name www.abc.com;
  return 301 https://www.abc.com$request_uri;

#  location / {
#    rewrite ^/(.*)$ /cba/$1 last;
# }

#  location ~* ^/cba/.*$ {
#    proxy_pass http://172.18.123.21:88;
#  }
}

server {
        listen       80;
        server_name abc.com;
        return 301 https://www.hotriz.com$request_uri;
}
server {
    listen 443;
    server_name abc.com;
    return 301 https://www.abc.com$request_uri;
    ssl_certificate /etc/nginx/ssl/www.abc.com.crt;
    ssl_certificate_key /etc/nginx/ssl/www.abc.com.key;
}

server {
    listen 443 default_server ssl;
    server_name www.abc.com;
    ssl_certificate /etc/nginx/ssl/www.abc.com.crt;
    ssl_certificate_key /etc/nginx/ssl/www.abc.com.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
   	 rewrite ^/(.*)$ /cba/$1 last;
 }


    location ~* ^/cba/.*$ {    #域名:cba,配置后可以直接www.abc.com访问
  	 proxy_pass http://172.18.123.21:88;
   	 proxy_set_header X-Real-IP $remote_addr;

   	 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

   	 proxy_set_header Host $host;

   	 proxy_set_header Upgrade-Insecure-Requests 1;

   	 proxy_set_header X-Forwarded-Proto https;
	 add_header Content-Security-Policy upgrade-insecure-requests;
  }

}

  

 

 

解决nginx反向代理Mixed Content和Blockable问题

上一篇:教你如何使用nginx配置访问wgcloud


下一篇:windows下回车与换行符