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问题的更多相关文章

  1. 解决nginx反向代理webservice的soap:address location问题

    原文:https://blog.csdn.net/mn960mn/article/details/50716768 一:首先来发布一个web service package com.ws.servic ...

  2. 解决nginx反向代理缓存不起作用的问题

    昨天尝试用nginx搭建nuget镜像服务器,镜像服务器需要两个功能:1)反向代理:2)内容缓存. 用nginx做反向代理,配置非常简单,只需在/etc/nginx/nginx.conf中添加一个包含 ...

  3. 解决Nginx反向代理不会自动对特殊字符进行编码的问题 如gitblit中的~波浪线

    问题起因是利用Nginx做反向代理的时候,需要访问如下链接http://192.168.14.141/iserver/services/3D-0524hd/rest/realspace/datas/0 ...

  4. nginx反向代理的配置优化

    作者:守住每一天 blog:liuyu.blog.51cto.combbs:bbs.linuxtone.orgmsn:liuyubj520#hotmail.comemail:liuyu105#gmai ...

  5. nginx反向代理docker registry报”blob upload unknown"解决办法

    问题症状:keepalived+nginx反向代理后端docker registry群集时,使用docker客户机向registry push镜像时出现 "blob upload unkno ...

  6. IIS tomcat共用80端口解决一个IP多个域名:使用Nginx反向代理方式使两者兼容

    环境: windows server 2003,IIS6服务器,Tomcat7服务器 域名有几个: 以下是使用IIS的域名: http://www.formuch.com/ http://www.fo ...

  7. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  8. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  9. Nginx反向代理解决iframe跨域问题

    前言 这几天有个需求:做个表单页面,要求后台人员能自定义发布表单,用户来填写表单.我一想,这不麦克表单有现成的吗,拿来就用!发布表单后,可以选择使用iframe方式嵌入网站,一切顺利. 当时的网站是h ...

随机推荐

  1. Linux内核--链表结构(二)

    Linux内核链表定义了一系列用于链表遍历的宏,本章详细描述. 一.container_of和offsetof 首先介绍两个很好用的宏container_of和offsetof.offsetof宏用于 ...

  2. uniapp-app 打开小程序

    plus.share.getServices(                            res => {                                let sw ...

  3. Vuecli版本调整

    1.当前版本号查看 1.Windows+R打开命令提示符2.输入cmd3.vue --version或者vue -V(大写V) 2.版本操作 安装指定版本 情况一:目前处于3.0及以上 版本查看和卸载 ...

  4. Source Generator实战

    前言 最近刷B站的时候浏览到了老杨的关于Source Generator的简介视频.其实当初.Net 6刚发布时候看到过微软介绍这个东西,但并没有在意.因为粗看觉得这东西限制蛮多的,毕竟C#是强类型语 ...

  5. vite初使用随记

    vite的安装 按照官网文档来看,并不难. 先检查自己电脑node的版本与npm的版本/yarn的版本 可以直接用yarn安装,yarn create vite 这是最原始的安装,即类似于安装vue- ...

  6. 关于Jupyter Notebook无法自动补全(Autocompletion),报错TypeError: __init__() got an unexpected keyword argument 'column' 的解决方案

    关于Jupyter Notebook无法自动补全(Autocompletion),报错TypeError: __init__() got an unexpected keyword argument ...

  7. 【阿里巴巴Java开发手册1.7.0(嵩山版)】编程规约&MySQL 数据库规约

    阿里巴巴Java开发手册1.7.0(嵩山版) 一.编程规约 (一)命名风格 所有命名不得以下划线和$开始和结束. 所有命名不得以拼音或拼音英文混合. 类名使用UpperCamelCase风格. 方法名 ...

  8. opencv如何在jupyter notebook中显示图片

    方法一: from matplotlib import pyplot as plt import numpy as np import cv2 img = cv2.imread('img.jpg') ...

  9. [笔记] 有向无环图 DAG

    最小链覆盖 (最长反链) 最小链覆盖 \(=n-\) 最大匹配. 考虑首先每个点自成一条链,此时恰好有 \(n\) 条链,最终答案一定是合并(首尾相接)若干条链形成的. 将两点匹配的含义其实就是将链合 ...

  10. Next.js 在 Serverless 中从踩坑到破茧重生

    作者 杨苏博,偏后端的全栈开发,目前负责腾云扣钉的 Cloud Studio 产品.在团队中负责接技术架构设计与 Review.Cloud Studio 编辑器内核设计与开发.部分核心插件设计与开发: ...