HTTPS的原理浅析与本地开发实践(下)

Posted 阿里巴巴淘系技术团队官网博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTTPS的原理浅析与本地开发实践(下)相关的知识,希望对你有一定的参考价值。

本文将以阿里云证书配置和OpenSSL自签证书配置两种方式来让你的网站从HTTP转换到HTTPS,为系列第二篇,第一篇:HTTPS的原理浅析与本地开发实践(上)。希望这两篇关于HTTPS的浅析能够对你的日常研发过程有所帮助。

使用CA机构签发的证书配置http

—— 以阿里云免费SSL证书申请过程为例



一般给末端用户签发证书的CA机构属于二级机构(代理机构),这些机构需要根证书机构的认证。在向CA代理机构申请证书时,都需要填写证书签名请求(CSR)文件,这个文件主要描述的信息是当前申请人的基础信息、站点信息和公钥信息,然后向CA提交CSR,进而得到终端证书。

▐  生成CSR文件

方案一:使用OpenSSL工具生成CSR文件

openssl req -new -nodes -sha256 -newkey rsa:2048 -keyout [$Key_File] -out [$OpenSSL_CSR]
  1. -new:指定生成一个新的CSR文件。

  2. -nodes:指定密钥文件不被加密。

  3. -sha256:指定摘要算法。

  4. -newkey rsa:2048:指定密钥类型和长度。

  5. [$Key_File]:密钥文件名称。

  6. [$OpenSSL_CSR]:加密后文件的存放路径。

根据系统返回的提示,输入生成CSR文件所需的信息。以下是关于提示的说明:

  1. Organization Name:公司名称,可以是中文或英文。

  2. Organization Unit Name:部门名称,可以是中文或英文。

  3. Country Code:申请单位所属国家,只能是两个字母的国家码。例如,中国只能是CN。

  4. State or Province:州名或省份名称,可以是中文或英文。

  5. Locality:城市名称,可以是中文或英文。

  6. Common Name:申请SSL证书的具体网站域名。

  7. Email Address:可选择不输入。

  8. A challenge password:可选择不输入。

完成命令提示的输入后,当前目录下获取密钥文件和CSR文件

另外一种是自己在文本中编辑好config,作为参数应用之:

[ req ]
default_bits       = 2048
distinguished_name = req_distinguished_name
req_extensions     = req_ext
[ req_distinguished_name ]
countryName                 = Country Name (2 letter code)
stateOrProvinceName         = State or Province Name (full name)
localityName               = Locality Name (eg, city)
organizationName           = Organization Name (eg, company)
commonName                 = Common Name (e.g. server FQDN or YOUR name)
[ req_ext ]
subjectAltName = @alt_names
[alt_names]
DNS.1   = bestflare.com
DNS.2   = usefulread.com
DNS.3   = chandank.com

方案二、使用线上工具生成CSR

—— 在线生成地址:https://myssl.com/csr_create.html

▐  阿里云申请过程

进入阿里云官网数字证书管理栏目(https://www.aliyun.com/product/cas),开始【选购SSL证书】,找到【免费证书】栏目,开始创建新证书。

  1. 填写证书申请表单

    (当时的申请流程是按照www.ccdoit.com域名走的,但是后续配置时将该证书删除,所以最后用了ssl.ccdoit.com域名重新申请了,忘了截图......)

  2. 服务信息校验

    登录域名对应的服务器,并上传认证文件

    返回操作页面提供CA签发申请,等待审核

  3. 信息认证成功后,服务商会生成多种类型的证书

  4. 下载nginx版本证书,并登录服务器后台,配置Nginx即可;

  5. 查看访问结果

至此,基于阿里云免费数字证书配置Nginx私服的过程就这么多。下面会再介绍一种开发过程中经常用到的证书配置方式。



使用OpenSSL自签证书配置https

—— 本地开发使用

在日常的开发中,使用OpenSSL工具生成自签证书的方式来配置HTTPS协议是比较常用的一种方案,下面就开始对这个配置过程做一个详细的介绍。

OpenSSL工具一般会预装在系统中,如果系统中缺少该工具,请自行安装。

  1. 生成CSR文件(参考上文的CSR文件生成方式,或者直接修改下面的csr.config配置,核心是修改alt_names下的DNS配置)

    [req]
    default_bits = 2048
    distinguished_name = req_distinguished_name
    req_extensions = req_ext
    x509_extensions = v3_ca
    
    
      [req_distinguished_name]
    countryName = CN
    countryName_default = CN
    stateOrProvinceName = ZJ
    stateOrProvinceName_default = ZJ
    localityName = HZ
    localityName_default = HZ
    organizationName = FE
    organizationName_default = FE
    organizationalUnitName = IT
    organizationalUnitName_default = IT
    commonName = ccCrt
    commonName_default = ccCrt
    commonName_max = 64
    
    
      [req_ext]
    subjectAltName = @alt_names
    
    
    [v3_ca]
    subjectAltName = @alt_names
    
    
    [alt_names]
    DNS.1 = *.lanchen.com
    DNS.2 = *.lanchen.cn
  2. 使用OpenSSL命令行生成自签证书和私钥

    # 生成自签名证书
    openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout server.key -out server.crt -config csr.

    执生完成后,会得到证书文件(server.crt)和秘钥串(server.key)

  3. 然后将生成的server.crt证书添加到系统证书,并修改证书信任为【始终信任】

    证书简介

  4. 在本地的Nginx端,增加私钥和证书配置即可。

  5. 修改本地host,增加期望存储登录态域名映射

    127.0.0.1   demo.lanchen.com
    127.0.0.1   demo.lanchen.cn
  6. 访问host域名,查看证书状态(访问 https://demo.lanchen.com 也会使用到该证书)

  7. 本地服务带端口的Nginx配置方案

    到第6步为止,本地配置HTTPS协议的过程基本完成,但是在日常的开发工作中,Vite/Webpack Server启动时默认都会携带服务端口(3000),形如:

    如果直接通过配置的域名后加端口是行不通的,例如直接通过 https://demo.lanchen.cn:3000 是无法访问到该服务的,那如何在Nginx层解决端口配置的问题?答案是通过在nginx.conf中增加一个端口变量来拼接代理的实际路径。

    Nginx文件配置如下

    server 
      listen       443 ssl;
      server_name ~^(?<port>.+).lanchen.cn$;
    
    
      ssl_certificate      ssl-test/server.crt;
      ssl_certificate_key  ssl-test/server.key;
    
    
      ssl_session_cache    shared:SSL:1m;
      ssl_session_timeout  5m;
    
    
      ssl_ciphers  HIGH:!aNULL:!MD5;
      ssl_prefer_server_ciphers  on;
    
    
      location / 
        proxy_pass   http://127.0.0.1:$port;
      
    

    host中增加待访问的域名

    127.0.0.1   3000.lanchen.cn br

    结果验证


注意事项

  1. 如果生成的证书不指定DNS扩展会出现什么问题?

  2. 自签证书不添加信任会出现什么问题?

小结

本篇文章先通过阿里云提供的免费数字证书配置过程,完成了线上Nginx私服的HTTPS协议配置,然后又基于OpenSSL工具生成自签证书,解决本地开发环境依赖HTTPS协议的情况。相信基于第一篇关于HTTPS的理论介绍,你应该很容易就能理解本篇的配置过程。希望这两篇关于HTTPS的浅析能够对你的日常研发过程有所帮助。

团队介绍

我们是大淘宝-天猫校园前端团队,天猫校园业务旨在整合阿里巴巴生态业务赋能校园,协助高校商业、服务、后勤数字化升级,打造校园生活新方式。业务技术形态包含线上的官旗小程序、互动h5项目等,线下有零售、共享业务等,业务多种多样,有挑战有机会,欢迎您的加入。

✿  拓展阅读

作者|陈超(揽辰)

编辑|橙子君

以上是关于HTTPS的原理浅析与本地开发实践(下)的主要内容,如果未能解决你的问题,请参考以下文章

组件化解耦 | 浅析ARouter路由发现原理与简单实践

环境下用户态直接读写端口原理浅析

shell 本地接口自动化

Service Mesh 浅析:从概念、产品到实践

Vue 浅析与实践

浅析无服务器的微服务架构与实践