本地安排上HTTPS的最佳途徑~

2020-09-24 08:18:19

拋棄http的API們

這年頭沒有https都沒法開發軟體了,web標準上近幾年的api們清一色地要求https,否則就罷工!它們包括但不限於:

  • Notification:系統通知

  • Geolocation:地理資訊

  • Storage:儲存/快取

  • PWA:漸進式Web應用

  • Payment Request:支付

  • Clipboard:剪貼簿

  • ServiceWorker:守護執行緒

  • MediaDevices:媒體裝置

  • Crypto:密碼學工具

  • Generic Sensor:感測器

  • Bluetooth:藍芽介面

  • Authentication:認證

  • WebXR:虛擬現實

  • Presentation:螢幕共用

https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts

資訊來源

這些api都不能在http下正常使用,尤其以chrome的要求最為嚴格,必須保證入口檔案和非同步資源都是https時才能使用以上的API,否則會出現下面的提示。

可是開發時,本地部署https並沒有那麼容易,想讓瀏覽器承認網站的安全性沒有想象中那麼簡單,尤其是存取本地伺服器的時候,chrome總是出現紅色的感嘆號,多年來嘗試過以下的方法都失敗了:

  • 用假證書自然不行

  • 給localhost或ip地址頒發自簽名證書被系統拒絕了

  • 修改hosts檔案並安裝證書,瀏覽器不認(chromium有自帶的證書管理器)

  • 調chrome的偏好設定(chrome://flags/)倒是可以但非常麻煩

有沒有既簡單又穩當,符合一般人思維習慣的辦法呢,網上總是沒有明確的答案,直到前幾天玩VisualSVN Server的時候終於發現了標準的做法。


本地伺服器的4種地址


IP地址
域名
本地
127.0.0.1
localhost
網路網路卡IP
主機名

通過以上4種地址都可以存取本地伺服器,有的機器還可以通過0.0.0.0來存取,這種地址不被廣泛接受,更多的是作為匹配所有ip的保留地址。每臺電腦自帶的dns服務都會把localhost解析到127.0.0.1,然後指向本機,就是說,127.0.0.1對應的域名是localhost。

如果電腦聯網的話,還可以通過網路卡ip來存取本地,比如192.168.0.1,那它對應的域名是什麼呢?不用查dns快取,只要開啟你的電腦名片就能看到了,比如Windows電腦在【控制面板/系統和安全/系統】中可以檢視名片:

(我不是來秀記憶體的)

其中的計算機名就是你的主機域名,能夠解析成你的網路卡ip,以我的電腦為例,隨便開一個http服務,瀏覽器中可以直接存取 http://desktop-oakgfsr/ 了。

如何上https呢?自然不能用假證書了,但也沒必要花錢去找CA頒發真證書。等等,既不用真證書也不用假證書???誤會了,我們用真證書,只不過是用openssl自簽名的證書,方便起見,我們不用openssl做實驗了,在網上隨便找一個線上ssl證書生成器就好了。

按照要求輸入域名以後,生成器很快就幫你製作好證書和私鑰:

  • desktop-oakgfsr.cert:自簽名證書

  • desktop-oakgfsr.key:證書的私鑰


安裝自簽名證書

如果你對https的原理不是很明白的話,推薦看這篇文章:《HTTPS與P=NP問題卍解》,裡面把https原理嚼碎了送到你嘴裡。接下來要讓作業系統或瀏覽器信任這個證書:雙擊開啟證書,點選安裝。

證書匯入位置選擇【受信任的根證書頒發機構】即可。

開啟【管理使用者證書】就能看到剛安裝的證書了:

當然也可以選擇在這裡匯入證書,效果是一樣的。最後我們用這個證書和剛剛的私鑰開一個本地web伺服器,監聽443埠,瀏覽器存取 https://desktop-oakgfsr/ ,就成功了。

如果發現在chrome上沒有立刻生效,可能需要重新啟動瀏覽器,甚至重新登入Google賬號才行。自此,一眾Web最新API都能使用啦。

<完>