使用openssl在windows 10下本地xampp配置https開發環境

現在越來越多地開始使用https了，比如微信小程序開發，支付開發。在這種場景下，往往我們本地也需要https服務，同時借助一個外部https轉發跳板來完美實現開發環境。

下文總結下本地搭建https開發環境中趟過地坑。

安裝win64OpenSSL-1_1_0j后重新啟動；以管理員權限啟動powershell;

執行以下命令

set OPENSSL_CONF=c:\xampp\apache\conf\openssl.cnf

openssl req -config c:\xampp\apache\conf\openssl.cnf -new -out c:\xampp\apache\conf\server.csr -keyout c:\xampp\apache\conf\server.pem
openssl rsa -in c:\xampp\apache\conf\server.pem -out c:\xampp\apache\conf\server.key
openssl x509 -req -signkey c:\xampp\apache\conf\server.key -days 1024 -in c:\xampp\apache\conf\server.csr -out c:\xampp\apache\conf\server.crt

本方法屬於自簽名，可以實現簡單的https加密，但是由於現在安全機制更多會檢查ca機構的權威性從而決定是否信任，因此還是很多場景下無法使用。

在httpd-ssl.conf文件中

SSLCertificateFile "C:/xampp/apache/conf/server.crt"

SSLCertificateKeyFile "C:/xampp/apache/conf/server.key"

SSLCertificateChainFile "C:/xampp/apache/conf/chain.crt"

實際上，類似地使用xampp自帶過期的ssl證書的話，只需要在httpd_vhost中增加這幾行信息:

<VirtualHost *:443>
    ServerAdmin [e-mail]
    DocumentRoot "d:/devenv/xxxt/public/"
    ServerName homestead.localhost
    ServerAlias www.homestead.localhost
    ErrorLog "logs/homesteadlocalhost.com-error.log"
    CustomLog "logs/homesteadlocalhost.com-access.log" common
 SSLEngine on SSLCertificateFile "conf/ssl.crt/server.crt" SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

最后發現咱們還是最好申請一個免費的DV證書吧，否則很多app都會抱怨的。

通過阿里雲申請有信任鏈的靠譜證書:

申請成功后，可以按照對應的配置幫助一步步實施:

# 添加 SSL 協議支持協議，去掉不安全的協議
SSLProtocol all -SSLv2 -SSLv3
# 修改加密套件如下
SSLCipherSuite HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP:+MEDIUM
SSLHonorCipherOrder on
# 證書公鑰配置
SSLCertificateFile cert/a_public.crt
# 證書私鑰配置
SSLCertificateKeyFile cert/a.key
# 證書鏈配置，如果該屬性開頭有 '#'字符，請刪除掉
SSLCertificateChainFile cert/a_chain.crt

由於本地開發往往需要使用一個跳板，比如使用ngrok可以代理轉發對應的https流量，

我們也需要針對apache的virtual host做以下配置:

<VirtualHost *:443>
    ServerAdmin [e-mail]
    DocumentRoot "d:/devenv/xxxt/public/"
    ServerName yourdomain.com
    ServerAlias wx.yourdomain.com
    ErrorLog "logs/homesteadlocalhost.com-error.log"
    CustomLog "logs/homesteadlocalhost.com-access.log" common
    SSLEngine on
    SSLCertificateFile "conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "conf/ssl.key/server.key"
    SSLCertificateChainFile "conf/chain.crt"
</VirtualHost>

這樣配置以后，你在瀏覽器上輸入https://wx.yourdomain.com就將能夠完美解決證書不合法的問題。

 

 

https://cloud.tencent.com/product/ssl

https://myssl.com/

上面這兩個連接可以用於檢驗證書的有效性。特別是myssl.com比較專業，其使用ghost寫的blog信息也比較專業

如果沒有合法的證書，則可能出現如下錯誤信息(以微信小程序開發時為例):

VM136:1 https://xxx.cn 對應的服務器證書無效。控制台輸入 showRequestInfo() 可以獲取更詳細信息。
console.error @ VM136:1
r @ appservice?t=1553137781422:1156
o @ appservice?t=1553137781422:1156
b.onreadystatechange @ appservice?t=1553137781422:1156
XMLHttpRequest.send (async)
h @ appservice?t=1553137781422:1156
createRequestTask @ appservice?t=1553137781422:1156
invoke @ appservice?t=1553137781422:1156
invoke @ WAService.js:1
X @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
ji @ WAService.js:1
i @ WAService.js:1
t @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
success @ main.js:131
function.e.(anonymous function) @ WAService.js:1
(anonymous) @ WAService.js:1
g @ WAService.js:1
We @ WAService.js:1
(anonymous) @ WAService.js:1
function.setTimeout @ appservice?t=1553137781422:1156
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
setTimeout (async)
setTimeout @ WAService.js:1
m @ appservice?t=1553137781422:1156
r.registerCallback.t @ appservice?t=1553137781422:1156
l.forEach.t @ appservice?t=1553137781422:1156
(anonymous) @ appservice?t=1553137781422:1156
s.onmessage @ appservice?t=1553137781422:1156
VM136:1 request:fail 對應的服務器證書無效。
console.error @ VM136:1
Xe @ WAService.js:1
(anonymous) @ WAService.js:1
Nt.emit @ WAService.js:1
Ui @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
e @ appservice?t=1553137781422:1156
(anonymous) @ appservice?t=1553137781422:1156
t.emit @ appservice?t=1553137781422:1156
callback @ appservice?t=1553137781422:1156
setTimeout @ appservice?t=1553137781422:1156
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
setTimeout (async)
setTimeout @ WAService.js:1
d @ appservice?t=1553137781422:1156
r @ appservice?t=1553137781422:1156
o @ appservice?t=1553137781422:1156
b.onreadystatechange @ appservice?t=1553137781422:1156
XMLHttpRequest.send (async)
h @ appservice?t=1553137781422:1156
createRequestTask @ appservice?t=1553137781422:1156
invoke @ appservice?t=1553137781422:1156
invoke @ WAService.js:1
X @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
ji @ WAService.js:1
i @ WAService.js:1
t @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
success @ main.js:131
function.e.(anonymous function) @ WAService.js:1
(anonymous) @ WAService.js:1
g @ WAService.js:1
We @ WAService.js:1
(anonymous) @ WAService.js:1
function.setTimeout @ appservice?t=1553137781422:1156
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
setTimeout (async)
setTimeout @ WAService.js:1
m @ appservice?t=1553137781422:1156
r.registerCallback.t @ appservice?t=1553137781422:1156
l.forEach.t @ appservice?t=1553137781422:1156
(anonymous) @ appservice?t=1553137781422:1156
s.onmessage @ appservice?t=1553137781422:1156
showRequestInfo()
appservice?t=1553137781422:1156 (index)isSecuryTLSsecurityStateisSecuryCertificatetlsprotocoloriginfullPathremoteAddressstatusCodehttps://servicewechat.comtrue"secure"true"TLS 1.2"https://xxx.cn true"insecure"false"TLS 1.2""https:""https://xxxx.cn""https://xxx.cn//codetoopenid""119.28.86.163:443"404Object
appservice?t=1553137781422:1156 (index)isSecuryTLSsecurityStateisSecuryCertificatetlsprotocoloriginfullPathremoteAddressstatusCodehttps://servicewechat.comtrue"secure"true"TLS 1.2"https://xxxcn true"insecure"false"TLS 1.2""https:""https://xxx.cn""https://xxx.cn//codetoopenid""119.28.86.163:443"404