离谱的操作:https项目中嵌入http项目

414 阅读1分钟

公司要求:本地https的协议不能动,外部http的协议改不了,但是必须要实现https的项目中,嵌入一个http协议的iframe项目。目前实现方式,是基于修改nginx配置的方式处理;

各位道友,如有更合适的方法,互相交流学习下;

配置概述

本文档详细介绍了 default.confnginx_proxy.conf 两个Nginx配置文件的功能、结构及使用方法。这两个配置文件共同实现了HTTPS测试环境的搭建,并提供了内置HTTP的iframe代理功能。

文件说明

文件名主要功能
default.conf配置HTTPS 443端口,处理本地应用访问
nginx_proxy.conf配置HTTPS 444端口,处理外部网站代理访问

配置详解

1. default.conf

default.conf 主要用于配置HTTPS 443端口,处理本地应用的访问请求。

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    return 301 https://$host:443$request_uri;
}

server {
    listen  443 ssl;
    ...
    location /xxx {
        proxy_pass http://127.0.0.1:8380/xxx;
    }
    ...
}

2. nginx_proxy.conf

nginx_proxy.conf 主要用于配置HTTPS 444端口,处理外部网站的代理访问,并解决HTTP iframe在HTTPS页面中的混合内容问题。

server {
    listen       81;
    listen  [::]:81;
    server_name  localhost;
    return 301 https://$host:444$request_uri;
}

server {
    listen  444 ssl;
    location / {
      proxy_pass http://www.baidu.com:8018;
      
      ...
      # 关键优化:使用正则匹配,确保完整替换http链接
      sub_filter_types *;  # 覆盖
      sub_filter 'http://www.baidu.com:8091/pecker/application/image/' 'https://$host:444/pecker-icon/pecker/application/image/';
      ...
  }

  # 对应图片的代理路径(需和上面替换的路径一致)
  location /pecker-icon/ {
      proxy_pass http://www.baidu.com:8091/;  # 末尾的斜杠必须保留
      proxy_set_header Host www.baidu.com:8091;  # 强制传递原始Host(关键!)
      proxy_set_header X-Forwarded-Proto $scheme;
  }    
}

代理分为两个的原因是放入一个代理中,原始代理会影响到iframe中js,css的获取