Nginx配置https兼容http

摘要:
现象如果https站点引用了一些http静态资源,图像可以正常加载,但js文件和css文件将无法加载,如下图所示:要解释这个问题,首先要理解MixedContent的概念:在https页面中加载的http资源称为MixedCntent,不同的浏览器对MixedC内容有不同的处理规则。启用此选项后,禁止加载所有非https资源。)例如,如果nginx用作代理,则可以在转发请求时添加Content Security Policy标头,并将标头值设置为升级安全请求以将http请求转换为https。

现象

如果一个https站点里面有引用一些http的静态资源,图片可以正常加载,但是js文件、css文件就会加载失败,如下图:

Nginx配置https兼容http第1张

原因

为了解释这个问题,首先要理解一下Mixed Content的概念:
HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容),不同浏览器对 Mixed Content 有不一样的处理规则。

忽略IE等远古浏览器,我们来看下现代浏览器:

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

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

  1. 通过 <img> 标签加载的图片(包括 SVG 图片);
  2. 通过 <video> / <audio> 和 <source> 标签加载的视频或音频;
  3. 预读的(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 443;
        server_name demo.thatscode.com;

        ....
        省略ssl 相关配置
        ....

        location / {

            ....
            省略其他proxy参数
            ....
            proxy_pass http://pool_demo;
            add_header Content-Security-Policy upgrade-insecure-requests;
        }
        access_log  /www/logs/demo.thatscode.com.log;
        error_log   /www/logs/demo.thatscode.com.error;
}

  

参考

https://imququ.com/post/sth-about-switch-to-https.html

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Upgrade-Insecure-Requests

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content?hl=zh-cn

免责声明:文章转载自《Nginx配置https兼容http》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇base64加密解密utilsjava 内存查看工具下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Nginx tomcat集群 转发后端口丢失

场景: 阿里云主机 docker 搭建nginx集群,访问项目端口丢失 配置如下: 丢失的可能原因: proxy_set_header Host设置不对,修改如下: proxy_set_header Host $http_host; proxy_set_header Host 可以设置有如下几种: proxy_set_header Host $prox...

使用openssl在windows 10下本地xampp配置https开发环境

现在越来越多地开始使用https了,比如微信小程序开发,支付开发。在这种场景下,往往我们本地也需要https服务,同时借助一个外部https转发跳板来完美实现开发环境。 下文总结下本地搭建https开发环境中趟过地坑。 安装win64OpenSSL-1_1_0j后重新启动;以管理员权限启动powershell; 执行以下命令 set OPENSSL_CON...

Https socket 代理

https直接与服务器通过ssLsocket连接可行 import java.io.InputStream;import java.io.OutputStream;import java.security.SecureRandom;import javax.net.ssl.SSLContext;import javax.net.ssl.SSLSocket;...

nginx负载均衡器处理session共享的几种方法(转)

1) 不使用session,换作cookie能把session改成cookie,就能避开session的一些弊端,在从前看的一本J2EE的书上,也指明在集群系统中不能用session,否则惹出祸端来就不好办。如果系统不复杂,就优先考虑能否将session去掉,改动起来非常麻烦的话,再用下面的办法。2) 应用服务器自行实现共享已知的,php可以用数据库或me...

2.4 Nginx服务器基础配置指令

2.4.1 nginx.conf文件的结构 2.4.2配置运行Nginx服务器用户(组) 2.4.3配置允许生成的worker process数 2.4.4 配置Nginx进程PID存放路径 2.4.5配置错误日志的存放路径 2.4.6 配置文件的引入 2.4.7 设置网络连接的序列化 2.4.8设置是否允许同时接收多个网络连接 2.4.9事件驱动模型选择...

Nginx Upstream模块源码分析(上)

Upstream模块是一个很重要的模块,很多其他模块都会使用它来完成对后端服务器的访问, 达到反向代理和负载均衡的效果。例如Fastcgi、Memcached、SessionSticky等。 如果自己实现这部分功能,采用传统的实现方式,很可能会阻塞Nginx降低其性能,因为Nginx是全异步非阻塞的。 所以要想不破坏其优美的架构,就得按照其规范实现很...