一、為什麼要升級https
- 保護使用者資料傳輸過程中的安全。
- 運營商網路劫持問題越來越嚴重，各種廣告插入、強制跳App下載等手段嚴重影響使用者體驗，如果有違法內容或者使用者被騙，還會牽連到考拉。
- Apple要求iOS平臺App在2017.1.1開始強制啟用https，否則不允許上架App Store；啟用https的應用如果要在各平臺都正常，需應用內部webview開啟的站點也全部啟用https。
- 隨著web標準的更新，越來越多的新特性（比如Service Worker等）要求站點開啟HTTPS才能使用；
二、目標
- 調整考拉前端程式碼，使其可同時支援https，http訪問；
- 與日常開發同步進行，不影響日常開發；
- 穩步啟用https，http雙協議支援，最大限度避免https上線導致的問題；
三、前端做了哪些調整
升級範圍為考拉前臺所有站點，包括wap、web等工程，歷史程式碼量大；主要是將原寫死http協議的地方改造成相對協議，使其可同時相容http及https服務；
1. 頁面內資源協議修改
頁面資源包括幾部分： 靜態資源（js，css，ui圖片，視訊等等），動態內容修改
- 靜態資源
- js: 調整js內部的http資源引用為相對協議，但是傳遞給外部應用的資料則根據 location.protocol 自動補全為當前頁面使用的協議； 其次調整頁面對js的引用，使js資源引用為相對協議；
- css：調整mcss中圖片等資源引用URL為相對協議；調整頁面對css的引用為相對協議；
- 打包調整： 調整打包工具配置，使其輸出靜態資源為相對協議；
- 圖片： 調整js、ftl中的圖片縮略函式，區別是否為考拉和nos的圖片，判斷是否支援https做相應縮略處理，防止外部圖片不支援https而顯示不出來；全工程查詢並替換硬編碼圖片標籤src屬性；
- 外部庫調整： 比如NEJ的一些模組或者工具，在URL改為相對協議是，認為其不是一個絕對地址，按相對協議解析會報錯，會導致資源載入問題； 比如檔案上傳功能，在fallback到flash方案時，flash資訊都是寫死為http，也做了調整;
- 動態內容
後端給資料，前端顯示型別的內容：- 圖文詳情：用正則匹配圖文詳情裡面的img，video標籤，並替換http協議為相對協；
- 頁面內部插值輸出：調整js、ftl縮圖過濾器，為未使用過濾器的圖片等資源增加過濾器，自動進行相對協議處理；
- 頁面跳轉
由於部分運營配置的頁面，都是直接配置了http連結，使用者點選頁面的連結很容易跳回到http，不能長期在https下使用，於是我們在頁面的a標籤點選時自動根據當前頁面協議，調整a標籤的href屬性的協議為當前協議，來支援正常跳轉。
2. CSP規則調整
原CSP規則限制了頁面內部載入的資源，協議必須一直，但是https上線初期緩和內容難以避免，所以在CSP中增加了規則，允許瀏覽器載入混合內容（僅限圖片、視訊）；
3. 外部關聯調整
- 微信支付： 調整微信支付後臺登記的安全域名資訊，增加https url，使其同時支援雙協議； 但是此調整不能在業務高峰期做，否則可能影響線上支付；
四、升級過程
這裡僅僅列出主要的步驟，細節還比較多：
- 前端修改雙協議支援後的程式碼上線，並讓cdn支援https
- 公司內網雙協議開啟進行內部小範圍試用
- 線上雙協議開啟，但是不開啟https強制跳轉
- 線上功能級別灰度啟用https，讓使用者可以從一些頁面開始使用https
- 全部放開
五、後續其它可以做的
- 上線h2, 已經在做了，很快開始內部測試
- 域名收斂
- 其它優化等
by 漁樵