ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端开发本地调试HTTPS浏览器信任问题解决

2021-05-13 14:56:15  阅读:126  来源: 互联网

标签:www https 浏览器 HTTPS 证书 openssl 生成 key 前端开发


1. 引言

刚入Qunar,最常困扰的问题就是HTTPS本地调试的浏览器信任问题,Failed to load resource: net::ERR_INSECURE_RESPONSE, 同样有同学有类似的问题,知乎地址https://www.zhihu.com/question/28248041/answer/63230300 ,看到这张图是不是很熟悉?

图片

恰巧我碰上并顺路回答,但后面发现答案也不完全对。我们会不断地进行浏览器的信任(烦-透-人),单单这一个问题,单单在知乎上的浏览量已经是12000+,问题比较普遍,尤其是对于咱们的小驼们来说;那么到底有没有一劳永逸的办法呢?是有的,本文只是一个实际案例,其他任何类似的问题都可以通过修改自签名证书生成命令中相应的参数得到解决。 

图片

图片

2. 解决过程

  1. 生成自签名证书

  2. 将自签名证书添加到浏览器信任

  3. 使用新的证书启动fekit 或者 ykit 本地 server

2.1 OpenSSL 介绍

    1.OpenSSL是一个开源项目

    2.OpenSSL是一个健壮的、商业级别的、全功能的针对TLS(Transport Layer Security)和SSL(Secure Sockets Layer)的工具集

    3.OpenSSL也是一个通用的密码学的类库,实现了各种加解密算法

2.2 生成自签名证书

生成自签名证书的过程比正式的签发证书过程要简单,因为证书请求和证书签发者是同一个(这才叫自签名),所以这个生成证书请求文件和签发的过程可以一步到位,-x509 这个选项就是干这事的。

2.3 生成简单单个主域的自签名证书

出现上述浏览器信任问题的根源是Wiki中的解决办法给的证书基本已经过期,浏览器不再信任,当然最直接的解决办法就是重新搞一个有效的证书。 安装openssl的过程就不用啰嗦了,依次执行如下命令生成证书:

openssl genrsa -des3 -out testenc.key 2048
openssl rsa -in testenc.key -out test.key
openssl req -new -x509 -days 3650 -key test.key -out test.crt

最后一条命令依次填入的信息如下:

CN
beijing
beijing
qunar
dujia
*.qunarzz.com
test@qunar.com
2.4 生成带 SubjectAltName 扩展的证书

上面的证书在一段时间是有效的,但随着Chrome浏览器的升级,这个证书也不好使了。上面的浏览器信任问题再次出现,但这次的提示信息不一样了,missing_subjectAltName。 继续解决这个问题,重新生成带 SubjectAltName 扩展的证书。

openssl genrsa -des3 -out qunarzz-dev-enc.key 2048
openssl rsa -in qunarzz-dev-enc.key -out qunarzz-dev.key
openssl req -new -sha256  \
    -x509 \
    -days 10000 \
    -key qunarzz-dev.key \
    -subj "/C=CN/ST=BeiJing/L=Beijing/O=QUNAR/OU=FE/CN=qunarzz.com" \
    -extensions SAN \
    -config <(cat ./openssl.cnf \
        <(printf "[SAN]\nsubjectAltName=DNS.1:qunarzz.com,DNS.2:q.qunarzz.com,DNS.3:*.qunarzz.com")) \
    -out qunarzz-dev.crt

2.5 添加证书信任

打开Mac的钥匙串访问 App,通过文件->导入项目,导入上面的证书,并在证书属性里面选择始终信任即可

2.6 启动Server

fekit server -s /path/to/crt
ykit server -s /path/to/crt

3. 扩展总结

咱们现有的业务都是fekit 和 ykit 共存的状态,同时fekit的项目也比ykit的项目多,同一个页面比如度假首页本地调试也需要同时启动fekitykit相关的工程,这里一个更好的方式是本地安装一个nginx,同时反向代理本地的fekit server 和ykit server,并将证书配置到nginx上面,整个世界也就安静下来了。


标签:www,https,浏览器,HTTPS,证书,openssl,生成,key,前端开发
来源: https://blog.51cto.com/u_15127643/2773428

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有