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

阿里巴巴淘系技术团队官网博客 阿里巴巴淘系技术团队官网博客     2022-11-13     343

关键词:

本文将以阿里云证书配置和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项目等,线下有零售、共享业务等,业务多种多样,有挑战有机会,欢迎您的加入。

✿  拓展阅读

作者|陈超(揽辰)

编辑|橙子君

组件化解耦|浅析arouter路由发现原理与简单实践(代码片段)

组件化解耦|浅析ARouter路由查找原理与简单实践前言项目地址/资源项目概览路由动态注册与生成核心思路与技术要点APT处理注解路由初始化Gradle插件实现目标类查找插入代码实现一个简单的路由发现框架模块组成ZRouter-annotationZRo... 查看详情

vue浅析与实践

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~作者:曾柏羲 导语入职接到的第一个需求是实现一个关于K歌实体售卖的ERP系统,管理系统过去做过不少,这次打算换个姿势,基于时下正热但早已不新鲜的Vue2.0技... 查看详情

docker容器的原理与实践(下)(代码片段)

...访问网易云社区,了解更多网易技术产品运营经验。Docker原理分析Docker架构镜像原理镜像是一个只读的容器模板,含有启动docker容器所需的文件系统结构及内容Docker以镜像和在镜像基础上构建的容器为基础,以容器开发、测试、... 查看详情

flutter原理与实践(代码片段)

转载自美团技术博客: https://tech.meituan.com/2018/08/09/waimai-flutter-practice.htmlFlutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个... 查看详情

flutter原理与实践(代码片段)

转载自美团技术博客: https://tech.meituan.com/2018/08/09/waimai-flutter-practice.htmlFlutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个... 查看详情

flutter原理与实践(代码片段)

转载自美团技术博客: https://tech.meituan.com/2018/08/09/waimai-flutter-practice.htmlFlutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个... 查看详情

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

参考技术A近几年,微服务架构逐渐发展成熟,从最初的星星之火到现在大规模的落地和实践,几乎已经成为分布式环境下的首选架构。然而软件开发没有银弹,基于微服务构建的应用系统在享受其优势的同时,痛点也越加明显... 查看详情

浅析easyswoole源码di原理与实现(代码片段)

依赖注入  简介:DependencyInjection依赖注入  EasySwoole实现了简单版的IOC,使用IOC容器可以很方便的存储/获取资源,实现解耦。  使用依赖注入,最重要的一点好处就是有效的分离了对象和它所需要的外部资源,使得它们松... 查看详情

https原理浅析

HTTPS(HypertextTransferProtocolSecure)协议用于提供安全的超文本传输服务.其本质上是SSL/TLS层上的HTTP协议,即所谓的"HTTPoverSSL/TLS".越来越多的WEB应用需要在网络上传输交易支付等敏感信息,使用明文通信HTTP协议显然无法满足对安全性的要... 查看详情

谷歌cartographer学习-原理阐述与源码解析

最近终于写完了毕业论文。想仔细研究下Cartographer。无奈自己学识有限,先看下网上大牛的解析,作一个汇总。一、泡泡机器人原创专栏-cartographer理论及实践浅析 http://mp.weixin.qq.com/s/LdbFp-Zvkr02-_25ILb16g二、【SLAM】(一)GoogleC... 查看详情

浅析结构化方法与面向对象方法应用

...步求精为基点,以一系列经过实践的考验被认为是正确的原理和技术为支撑,以数据流图,数据字典,结构化语言,判定表,判定树等图形表达为主要手段,强调开发方法的结构合理性和系统的结构合理性的软件分析方法。结构... 查看详情

浅析kubernetes的工作原理

转至 https://www.cnblogs.com/163yun/p/9518901.html 先放一张Kubernetes的架构图:    整体来看,是一个老大,多个干活的这种结构,基本上所有的分布式系统都是这样,但是里面的组件名称就纷繁复杂,下面将一一解... 查看详情

stm32驱动开发--串口原理与开发实践

STM32驱动开发(一)–串口原理与开发实践  参考:野火嵌入式《STM32库开发实战指南》、韦东山《STM32MP157M4用户手册》一、简介  在工业现场目前用的最多的对外通信就是串口(UART)通信和CAN通信。两种... 查看详情

flutter开发入门实践

...nbsp;前言:  Flutter是Google推出的跨平台解决方案,  开发语言:Dart    优势:  劣势:   学习推荐:  官方网站:https://flutter.io/  书籍:《Flutter技术入门与实战》  社区:https://flutterchina.club/    ... 查看详情

[转帖]git数据存储的原理浅析(代码片段)

Git数据存储的原理浅析https://segmentfault.com/a/1190000016320008  写作背景进来在闲暇的时间里在看一些关系P2P网络的拓扑发现的内容,重点关注了MarkleTree的知识点,在一篇文章里(https://www.sdnlab.com/20095....),发现了了一句话... 查看详情

20155218《网络对抗》exp2后门原理与实践(代码片段)

20155218《网络对抗》Exp2后门原理与实践常用后门工具实践1.Windows获得LinuxShell:在Windows下,先使用ipconfig指令查看本机IP,使用ncat.exe程序监听本机的5218端口,在Kali环境下,使用nc指令的-e选项反向连接Windows主机的5218端口,Windows下成功... 查看详情

结构化方法与面向对象方法浅析

结构化方法与面向对象方法浅析 在目前的软件开发领域,结构化方法和面向对象方法是两种比较流行的方法。在过去两年多时间里,我们也对这两种方法进行了学习和实践,下面谈一谈自己对这两种方法的理解。 结构化... 查看详情

sparkcoretaskscheduler源代码与任务提交原理浅析2

引言上一节《TaskScheduler源代码与任务提交原理浅析1》介绍了TaskScheduler的创建过程,在这一节中,我将承接《Stage生成和Stage源代码浅析》中的submitMissingTasks函数继续介绍task的创建和分发工作。DAGScheduler中的submitMissingTasks函数假... 查看详情