考拉昇級https經驗

1、爲何要升級https

1. 保護用戶數據傳輸過程當中的安全。
2. 運營商網絡劫持問題愈來愈嚴重，各類廣告插入、強制跳App下載等手段嚴重影響用戶體驗，若是有違法內容或者用戶被騙，還會牽連到考拉。
3. Apple要求iOS平臺App在2017.1.1開始強制啓用https，不然不容許上架App Store；啓用https的應用若是要在各平臺都正常，需應用內部webview打開的站點也所有啓用https。
4. 隨着web標準的更新，愈來愈多的新特性（好比Service Worker等）要求站點開啓HTTPS才能使用；

2、目標

• 調整考拉前端代碼，使其可同時支持https，http訪問；
• 與平常開發同步進行，不影響平常開發；
• 穩步啓用https，http雙協議支持，最大限度避免https上線致使的問題；

3、前端作了哪些調整

升級範圍爲考拉前臺全部站點，包括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，使其同時支持雙協議； 可是此調整不能在業務高峯期作，不然可能影響線上支付；

4、升級過程

這裏僅僅列出主要的步驟，細節還比較多：

1. 前端修改雙協議支持後的代碼上線，並讓cdn支持https
2. 公司內網雙協議打開進行內部小範圍試用
3. 線上雙協議打開，可是不開啓https強制跳轉
4. 線上功能級別灰度啓用https，讓用戶能夠從一些頁面開始使用https
5. 所有放開

5、後續其它能夠作的

1. 上線h2, 已經在作了，很快開始內部測試
2. 域名收斂
3. 其它優化等

by 漁樵