生成数字证书和密钥
配置openssl.cnf(Mac OS用户打开/usr/local/etc/openssl目录,Windows用户请先下载openssl)
- 打开openssl.cnf文件(用记事本或vs code以免保存时修改编码)
- 取消以下行的注释(删除以“#”开头的行):
#req_extensions = v3_req#The extensions to add to a certificate request (添加一个证书请求)
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
- 在 “[ v3_req ]” 区域添加下行
subjectAltName = @alt_names
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
- 添加[ alt_names ] 区域(配置要使用该证书的客户端域名)
[ alt_names ]
DNS.1 = <yourDomain>
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
- 取消以下行的注释:# copy_extensions = copy(告知CA配置允许使用自签名证书)
copy_extensions = copy
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
genrsa命令: 生成密钥对cert.key
生成的密钥对长度是2048bit, 包含公钥和私钥,公钥发送给对方加密,私钥留着自己解密
openssl genrsa -out cert.key 2048
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
req命令:使用密钥对cert.key + openssl.cnf配置信息生成证书签名请求cert.csr
openssl req -new -sha256 -key cert.key -out cert.csr -config openssl.cnf
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
-sha256表示使用sha256算法生成摘要然后计算签名 -out表示输出CSR文件 -config表示扩展配置文件
新建alt-names.txt文件
[ alt_names ]
DNS.1 = mydomain.com
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
x509命令:使用密钥对cert.key + 证书签名请求cert.csr + alt-names.txt配置,生成数字证书cert.crt
openssl x509 -req -sha256 -days 365 -in cert.csr -signkey cert.key -out cert.crt -extfile alt-names.txt
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
-days参数表示证书的有效期 -in表示CSR文件 -signkey表示密钥对的公钥 -extfile表示引用一个扩展文件 包含一些重要的扩展信息,其中最重要的就是alt_names扩展 -out表示输出的证书文件
使cert.crt受浏览器信任(浏览器不再报不安全提示)
双击cert.crt-进入钥匙串访问-选择添加到系统-并标记此证书为始终信任-点击关闭时输入账户密码完成操作
配置nginx.conf
server {
listen 443 ssl; # 服务器监听443端口并启用SSL协议
server_name mydomain.com;
ssl_certificate cert.crt; # 数字证书路径
ssl_certificate_key cert.key; # 密钥对路径
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5; # 支持的密码套件列表
ssl_prefer_server_ciphers on;
......
}
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
重启nginx/浏览器/电脑
FAQ
解决本地大量sockjs-node相关请求报错
- 报错原因: 此请求是由webpack devserver内部代码发起的,url根据webpack配置默认生成为https://127.0.0.1:8080, 但该站点缺少可信任的CA证书,导致浏览器拦截了这个请求。
- 解决办法:使用配置了可信任CA证书的域名访问,通过nginx代理到ip
// Webpack
devServer{
// 告知runtime获取最新代码的路径
sockHost: "mydomain.com",
sockPort: 443
}
// Nginx
location /sockjs-node {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass https://127.0.0.1:8080;
}
//JS中文网 – 前端进阶资源分享 https://www.javascriptc.com/ 趣聊CSS系列
作者:ABCDE
链接:https://juejin.im/post/6878297030926532622
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com