作者：戊子
什麼是前端安全生産？
而最近⼗年來，随着前端專業化分⼯的誕⽣、前端專業技術的發展，前端研發在整個互聯⽹ Web 應⽤研發⼯程鍊路上扮演着越來越重要的⻆⾊，前端安全⽣産的責任也随之放⼤，在前端應⽤開發、釋出、線上運⾏的不同階段，如何讓前端⼯程師産出的代碼更加靠譜，不帶着問題釋出，即便線上上發現前端故障後也能及時⽌⾎？這便是“前端安全⽣産”需要解決的問題。
今天我們所讨論的“前端安全⽣産”不同于傳統的“前端安全”這個領域，前端安全關注前端領域的線上安全攻防問題，⽽“前端安全⽣産”的定義顯然更⼤，“前端安全⽣産”專注于前端研發全鍊路的⾼品質傳遞，當然，也包含不要帶着“前端安全”問題去傳遞。
讨論到這⾥，我們也有了“前端安全⽣産”的⼀個基本定義。“前端安全⽣産”專注于前端研發全鍊路的⾼品質傳遞，在前端應⽤開發、釋出、線上運⾏三個關鍵階段，通過⼀系列的⾃動化流程機制，控制前端代碼⻛險，保障線上業務運⾏穩定，⽤機制保護⼈，不給前端同學引發線上故障的犯錯機會，最終規避損失或者降低損失。
前端安全生産大圖
「善除害者察其本，善理疾者絕其源」，回顧過去曆史上的重⼤故障，以及盤點過去的故障清單，我們發現絕⼤部分故障都是由變更引起的，前端安全⽣産也不例外，也是從觸發故障的源頭變更流程開始切⼊。在前端版本變更前、變更中、變更後，我們通過⼀系列的措施去提升前端代碼品質、控制釋出⻛險、及時發現問題。這其中的關鍵過程包含：
- 前端版本變更前：靜态代碼掃描、⾃定義⼯程規範校驗、單元測試 ；
- 前端版本變更中：UI回歸測試、疊代變更⻛險評估、灰階監控報告；
- 前端版本變更後：1 分鐘發現問題、5 分鐘定位問題、10 分鐘修複問題。
從上圖可以發現，前端安全⽣産并⾮⼀個全新的領域，更多的是組合現有的分散在不同系統的能⼒，包括前端⼯程體系、前端 CI/CD 系統、前端測試系統、前端監控系統，讓我們更體系化保障前端研發全鍊路的⾼品質傳遞。
前端安全體系的建設
三個發展階段
整個前端安全⽣産體系的建設在我們部⻔内部⼤緻分為三個階段，⽽直到第三個階段，我們才真正意義上完成了整個體系的 1.0 建設。這三個階段分别是：單點安全⽣産保障、多煙囪獨⽴安全⽣産保障、體系化的前端安全⽣産保障。
單點安全生産保障階段：線上前端監控
2015 年 8 ⽉，我們啟動了前端監控系統 retcode 的建設，通過線上實時監控⻚⾯通路速度、JS Error、API 成功率核⼼的三闆斧能⼒，為前端應⽤的運⾏态穩定性保駕護航。2016 年底， retcode 成⻓為阿⾥集團内部使⽤最⼴泛的前端監控産品，這個階段内，我們核⼼還是依靠線上前端監控的單點能⼒去保障前端的安全⽣産。為了持續修煉前端監控産品的核⼼能⼒，在 2017 年中我們啟動了 retcode 的上雲計劃，進⼊前端安全⽣産建設的第⼆個階段。
多煙囪獨立安全⽣産保障階段：雲化前端監控+其他保障
2017 年 9 ⽉，retcode 更新為阿⾥雲 ARMS 前端監控，開啟全⽹公測。在直⾯⾏業競争對⼿的同時，我們的多項核⼼能⼒得到極⼤提升，這其中包括⾯向全球化業務的國際極緻性能、JS Error 出錯時⽤戶⾏為回溯、API 接⼝快照以及打通前後端的全鍊路追蹤等等，前端監控平台也經曆了從“錯誤資料展示”到“專家級問題診斷”的更新，整個平台每天處理的⽇志條數也超過了百億級别。
這個階段内，除了前端監控平台在阿⾥雲上的産品能⼒更新助⼒前端安全⽣産，在我們部⻔内部，也開始借助⼀系列其他的能⼒來保障前端安全⽣産，如靜态代碼掃描、TDD、UI ⾃動化回歸等，這些可以保障前端安全⽣産的單點能⼒越來越多，但是⼤多是獨⽴煙囪服務模式，各個保障流程節點之間并未完全打通。
在阿⾥集團内部，也缺乏⼀套集團層⾯體系化的前端灰階釋出流程，表現在前端釋出與後端上線存在流程割裂、後端灰階釋出時前端⽆感、整個應⽤灰階階段⼤多是⼈⾁前端驗證或者驗證缺失。
體系化的前端安全⽣産保障階段：前端安全⽣産從0到1
為了解決前端安全⽣産各個保障節點的孤島問題，同時結合集團後端正在⼤⼒推進安全⽣産的時機，前端安全⽣産的體系化建設也應運⽽⽣。目前我們部⻔整個前端安全⽣産體系剛剛完成從 0 到 1，正在電商核⼼的基礎交易鍊路、⼤促穩定性保障、業務穩定性基線⽇常治理等項⽬中落地。
舉⼀個實際的場景例⼦，阿⾥曆年雙 11 穩定性保障依賴的最核⼼能⼒之⼀便是全鍊路壓測和驗收。我們都知道全鍊路壓測重點關注 API 級别的穩定性，在全鍊路壓測過程中 API 上的各種異常表現，并不能展現到前端 UI 層⾯上，這個時候前端同學并不清楚後端 API 異常和降級後，前端 UI 層⾯的表現是否符合預期。借助前端 UI ⾃動化回歸測試，我們将交易核⼼鍊路上的核⼼功能全部增加了測試⽤例，在後端開啟全鍊路壓測時候，前端同時開啟回歸測試，便形成了前端的全鍊路壓測和驗收。進⽽，我們會借助前端安全⽣産體系打造的前端變更時卡⼝能⼒，在每次前端⽇常變更時⾃動觸發前端回歸測試，降低核⼼交易鍊路上每次前端版本變更的⻛險。
核心能力
通過前⾯的介紹我們已經可以了解到，建構⼀個完整的前端安全⽣産體系需要三項核⼼能⼒。
變更發生前 CI 卡口能力
靜态代碼掃描、⾃定義⼯程規範校驗、單元測試通過率&覆寫率均是通過插件能⼒安裝到 CI 卡⼝上，這⾥可以根據實際業務場景下的痛點問題擴充更多的插件能⼒，在前端同學每次代碼送出後都能及時給予回報， ⽽不⽤将問題拖到測試或者預發甚⾄是線上環境。
變更過程中的灰階卡口能力
UI 回歸測試、前端疊代變更⻛險評估、灰階監控報告也是作為插件能⼒安裝到了灰階釋出卡⼝上，這⾥同樣也是可以根據實際業務場景下的痛點問題擴充更多的插件能⼒，在前端同學每次版本釋出前都能及時給予回報，遇到異常問題時直接中斷釋出過程。
根據安全⼯程學上的海恩法則“每⼀起嚴重事故的背後，必然有 29 次輕微事故和 300 起未遂先兆以及 1000 起事故隐患”，我們在變更發⽣前的 CI 卡⼝、變更過程中的灰階卡⼝都是為了杜絕⼀切可能引發線上故障的潛在因素，不帶着有問題的版本上線。
變更完成後的線上實時監控能力
線上實時監控是最後⼀個⾮常重要的能⼒，⼀個強⼤的監控系統能夠幫忙我們 1 分鐘發現問題和 5 分鐘定位問題根因，為我們 10 分鐘快速修複問題也就是快速復原提供決策依據。根據安全⼯程學上的瑞⼠奶酪模型，“故障的發⽣是各種防禦⾏為失效的累計效應”。在變更發⽣前 CI 卡⼝能⼒和變更過程中的灰階卡⼝能⼒全部都失效後，線上監控是我們的最後⼀道防線，能夠幫我們有效的扼制故障範圍進⼀步擴⼤，降低損失。
（圖檔來源網絡）
除了上⾯提到的技術⼿段，安全⽣産的⾏為準則和⽂化同樣必不可少，如制定變更紅線規約、安全⽣産專題分享等等。細⼼的讀者可能已經發現，GMTC深圳2019 的專題“前端測試”在今年已經更新為“前端安全⽣産”，也是想傳遞⼀個信号，我們正在經曆從過去被動的由測試同學主導的前端測試⾛向前端同學⼈⼈有責的主動前端安全⽣産保障時代，⽽過去的測試同學也更新為了測試研發同學，正在給我們的前端安全⽣産體系提供強⼤的插件能⼒。
三個最強擴充
基于CI卡口、灰階卡口、線上監控三項核心能力，本年度我們重點打造了三個最強擴充能力，主要涉及前端疊代變更⻛險評估、前端灰階監控報告以及 5 分鐘快速定位問題。
前端疊代變更⻛險評估
在回歸測試階段，我們需要明确知道本次前端版本疊代所造成的影響點，以供開發同學⾃測或者是測試同學重點回歸相應部分，⽆論是⼈⾁測試，還是⾃動化回歸，到很依賴這個關鍵資訊。另外⼀種常⻅的場景是，前端代碼本身沒做任何改動，但是由于依賴的⼆⽅/三⽅包⾃動更新，導緻某些場景出現⽆法預料的問題。這些都是因為前端疊代影響點⾃⾏評估不全⾯可能觸發故障的典型場景。為了解決前端疊代中⽆法準确給出回歸點的問題，我們提供了疊代影響點評估⼯具，重點提供以下能⼒：
- 開發同學明确本次疊代相對于上⼀次疊代的顯示&隐式變更；
- 開發同學明确哪些項⽬⽂件将會受到所有這些變更的影響，并且能夠看到具體的影響路徑；
- 開發/測試同學能夠看到更加全⾯、有理有據的回歸功能點。
前端灰階監控報告
前端灰階監控的核⼼⽬的是讓前端灰階釋出的結果有據可依。在灰階釋出期間，監控會重點關注前端灰階環境和線上環境對⽐後⻚⾯通路速度變化、JS 錯誤率變化、新出現的 JS 異常以及 API 成功率變化，⾃動⽣成灰階監控報告，同時也會通過灰階流量⻚⾯覆寫率、API 覆寫率來判定是否需要延⻓灰階時⻓或加⼤灰階流量⽐例。
應⽤全鍊路的 5 分鐘快速定位問題
通過前端⽣成 traceId 并透傳到後端業務調⽤鍊路的⽅式，打通應⽤從前端到後端全鍊路問題追蹤，從前端發現的 API 錯誤問題，可以通過 traceId 關聯直達後端監控系統，⼤幅減少涉及到應⽤全鍊路的問題定位時間，⾄此前端同學發現 API 相關問題後不再“甩鍋”到後端，⽽是給後端同學提供診斷問題的有效線索。
展望未來
當互聯⽹已成為⼀個國家重要的基礎設施，傳統⾏業正身處企業數字化轉型浪潮之中，互聯⽹安全⽣産必将越來越重要，⽽置身其中的前端安全⽣産也肯定會越來越受⼤家重視。從筆者的⻆度看到的前端安全⽣産未來将會由如下⼏個衍變趨勢。
- 前後端關聯的應用研發全鍊路安全生産；
- 借力 Cloud IDE 普及後自動內建的前端安全生産能力受益；
- 前端安全生産自動化免測版本比例提升帶來的效率提升和成本下降；
- 從提供錯誤資訊到更智能的專家級診斷、主動風險預警、故障自動恢複。
還是那句話，前端安全⽣産并⾮⼀個全新的領域，讓我們⽤更體系化的系統，去控制⻛險并保障業務穩定， 同時讓每個⼈都更加重視前端安全⽣産，⽤機制保護⼈，不給前端同學引發線上故障的犯錯機會，最終規避損失，讓每個前端程式員都能愉快地釋出！
關注「Alibaba F2E」
把握阿裡巴巴前端新動向