https页面嵌入http资源解决办法（小白文）

weixin_48030265

已于 2023-11-10 16:54:59 修改

阅读量2.7k

点赞数

文章标签： http https nginx

于 2023-11-10 16:47:25 首次发布

本文链接：https://blog.csdn.net/weixin_48030265/article/details/134335799

版权

问题：

内部系统基于https但是加载的外部资源是http，当前浏览器安全策略禁止在https中嵌入http资源，找了很多资源，网上分析有四种方式：

1、把http转成https（原来觉得这个方法不靠谱，最后还是回到这条路上）

2、response的header增加参数

3、页面Meta添加参数

4、iframe

经过测试发现，混合页面下面浏览器会自动把不安全协议强制转为安全协议，所以问题依然未解决。同时也找到网上总结的chrome安全规则：

没办法的时候回到第一条路，通过nginx将http资源包装成https来尝试解决这个问题。

基于centos7.6搭建nginx及配置实现的过程：

A、上传nginx按照包到服务器/usr/local

B、解压nginx：tar -xzvf nginx-1.21.0.tar.gz

C、安装nginx依赖

        yum install -y gcc-c++
        yum install -y pcre pcre-devel
        yum install -y zlib zlib-devel
        yum install -y openssl openssl-devel

D、编译nginx，带上SSL模块：

./configure --with-http_ssl_module

make & make install

E、自签证书

a、建立证书路径，这里是：/usr/local/ssl

b、使用openssl生成私钥（密码都是定义为123456，后面会用到）：openssl genrsa -des3 -out server.key 1024

查看私钥内容：cat server.key

c、使用openssl根据私钥生成公钥：openssl req -new -key server.key -out server.csr

查看公钥内容：openssl req -text -in server.csr -noout

d、使用openssl基于server.key私钥生成server.key.unsecure的解密私钥：openssl rsa -in server.key -out server.key.unsecure

e、openssl签署证书：

签名方法1：方法1需要输入密码，私钥密码为123456
#使用私钥和公钥生成server.crt签名证书，-days为365天 -in指定公钥，-signkey指定私钥，生成的前面证书为server.crt
openssl  x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
签名方法2：
#使用解密私钥和公钥生成server.crt签名证书，-days为365天 -in指定公钥，-signkey指定解密后的私钥，生成的前面证书为server.crt
openssl x509 -req -days 365 -in server.csr -signkey server.key.unsecure -out server.crt
#查看证书
openssl -text -in server.crt -noout

F、配置nginx conf：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
		listen       443 ssl;
        server_name  111.231.168.62;

        ssl_certificate      '/usr/local/ssl/server.crt';
        ssl_certificate_key  '/usr/local/ssl/server.key.unsecure';

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
	
		location ~ .*\.(gif|jpg|jpeg|png)$ {
			expires 1h;  
			root /usr/local/img;
			proxy_store on;  
			proxy_store_access user:rw group:rw all:rw;  
			proxy_temp_path         /usr/local/img;  
			proxy_redirect          off;  
    
			proxy_set_header        Host 127.0.0.1;  
			proxy_set_header        X-Real-IP $remote_addr;  
			proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;  
			client_max_body_size    10m;  
			client_body_buffer_size 1280k;  
			proxy_connect_timeout   900;  
			proxy_send_timeout      900;  
			proxy_read_timeout      900;  
			proxy_buffer_size       40k;  
			proxy_buffers           40 320k;  
			proxy_busy_buffers_size 640k;  
			proxy_temp_file_write_size 640k; 
		}

        location / {
            root   html;
            index  index.html index.htm;
        }
		
		location /hls {
            root   html;
            index  index.html index.htm;
			
			proxy_pass http://220.161.87.62:8800;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
        }
}

G、启动nginx：/usr/local/nginx/sbin/nginx

H、H5西瓜视频播放器页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>播放器</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
      body {display:flex;}
      #mse {flex:auto;}
    </style>
    <script type="text/javascript">
      window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
    </script>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js" charset="utf-8"></script>
    <script src="//unpkg.byted-static.com/xgplayer-hls/2.5.2/dist/index.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      let player = new HlsPlayer({
          id: 'mse',
          url: 'https://111.231.168.62/hls/1/index.m3u8',
          autoplay: true,
          playsinline: true,
          height: window.innerHeight,
          width: window.innerWidth
      });
    </script>
  </body>
</html>

这里的url是经过https服务代理后的URL，而不是原始的http地址（http://220.161.87.62:8800/hls/1/index.m3u8）这里地址是网上随便找的，用来测试

I、运行

weixin_48030265

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
https页面嵌入http资源解决办法（小白文）

d、使用openssl基于server.key私钥生成server.key.unsecure的解密私钥：openssl rsa -in server.key -out server.key.unsecure。b、使用openssl生成私钥（密码都是定义为123456，后面会用到）：openssl genrsa -des3 -out server.key 1024。c、使用openssl根据私钥生成公钥：openssl req -new -key server.key -out server.csr。
复制链接

扫一扫