【随笔记】在HTTPS下加载HTTP的资源

ゞ浴缸里的玫瑰 2023-01-22 02:58 10阅读 0赞

## 【随笔记】在HTTPS下加载HTTP的资源 ##

> 水滴石穿，遇到即是缘分。  
> 首先现在HTTPS加密的网站内，不在支持加载HTTP类型的资源。但是很多时候我们可以保证自身的网站是HTTPS加密的，当有异系统对接时，无法保证这件事，现在浏览器侧有拒绝这种行为，非常的难做、难实现。

### 代理策略 ###

> 通过Nginx进行代理中转，这个策略是相对网上很多方式中，最简单的，最稳妥的。

例子：https://ip的网站去加载一个http地址的1.mp4文件，我们需要怎么做？

*  将1.MP4文件地址进行代理，发布出一个HTTP的网络地址

server {
            listen       9878;
            server_name  127.0.0.1;
    		
    		
    		location / {
                root   demo;
                location ~ \.mp4$ {
                  mp4;
               }
            }
    
    		
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

> 这里还是通过Nginx的能力，将1.mp4发布出一个http的网络地址；如果你不是媒体资源，是数据资源也同样通用。

*  自身https网站的Nginx需要增加代理映射，将https路径代理http地址

server {
            listen       9875 ssl;
            server_name  127.0.0.1;
    		ssl_certificate     httpsConfig/server.crt;
    		ssl_certificate_key httpsConfig/server.key;
    		ssl_session_cache    shared:SSL:1m;
    		ssl_session_timeout  5m;
    		ssl_ciphers  HIGH:!aNULL:!MD5;
    		ssl_prefer_server_ciphers  on;
    		
    		location / {
                root   demo;
                index  index.html dataIndex.html index1.html;
            }
    		location ~* .(mp4)$ {
            
            proxy_connect_timeout 60;
            proxy_read_timeout    60;
            proxy_send_timeout    60;        
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header Cookie $http_cookie;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:9878;
     
             if (-f $request_filename) {
               expires max;
               break;
    			}
    		}
    	}

> 当https://ip:9875这个地址内部访问1.mp4这个资源，会自动代理到127.0.0.1:9878这个地址上（就是上面步骤中发布的http视频地址）；

*  我们看一下html中是如何调用这个资源的

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="css/toastr.min.css" />
        <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
        <link type="text/css" rel="stylesheet" href="css/layout.css" />
        <link type="text/css" rel="stylesheet" href="css/theme.css" />
    </head>
    
    <body>
        <video src="https://127.0.0.1:9875/1.mp4" muted="muted" autoplay="autoplay"></video>
    </body>
    
    </html>

> 简单明了，完美解决https中使用http资源的问题；重点是这种方式合规安全可靠。