作者：京東零售  張夢雨

雲技術和我們的生活息息相關，日常生活中存取的網頁，刷的短視訊，用的雲盤等都是雲端計算提供的服務。那在雲端計算時代，前端可以做什麼呢？

一、雲技術與前端

在前端發展初期，前端只需完成靜態頁面和互動的開發即可，然後將原始檔給後端部署；之後前後端分離，有了工程化的概念，前端需要自己去完成構建、打包、整合、部署，部署方式有通過CI/CD工具進行命令工具部署、Docker映象部署、平臺化部署等。隨著nodejs、跨端技術的快速發展，進入大前端時代，前端工程師也可以做全棧開發，需要了解學習的端和技術越來越多。

前後端分離後，各種前端框架層出不窮，百花齊放，隨著三大框架的盛行以及前端工程化的成熟，各端分工更加明確，此時，雲端計算在前端領域起到了很重要的作用，主要是可以在雲裡拿一些資源來支撐業務開發，比如各種工程化工具、開源庫等，實現程式碼的共用，提高了開發效率。

二、前端開源庫

相信作為前端大家都使用過Vue、React等耳熟能詳的JavaScript框架，使用vue-cli、create-react-app等腳手架工具能快速的生成一個可獨立執行的Vue、React專案。因為它是可以獨立執行的，所以需要依賴NodeJS，NodeJS是一個基於Chrome V8引擎的JavaScript執行環境，它可以使JavaScript執行在伺服器端。說到NodeJS，不得不提NPM。

NPM，全稱Node Package Manager，是一個NodeJS包管理和分發工具，即包管理器，管理第三方依賴。它以多種方式自動處理專案依賴關係，提供了命令列工具，可以安裝、解除安裝、更新三方包，設定專案設定，執行指令碼等等。目前主流的包管理工具有npm、yarn、pnpm等。npm是 2010 年釋出的nodejs依賴管理工具，yarn是 Facebook 於 2016 年 釋出的替代npm的包管理工具，pnpm是 2017 年釋出的一款替代npm包管理工具，具有速度快、節省磁碟空間的特點。

NPM是JavaScript執行時環境Node.js的預設包管理器。採用npm命令下載三方包，下載的包會在node_modules資料夾中，可進行按需引入，實現了程式碼共用。目前Github提供了很多開源NPM包，雖然用起來很方便，但是怎麼保證包的安全性是一個一直在探討的問題。

前段時間，npm開源庫作者以反戰為名，在node-ipc庫中新增惡意程式碼，程式碼先是針對俄羅斯和白俄羅斯使用者IP，嘗試覆蓋當前目錄、父目錄和根目錄的所有檔案，後改成了往桌面上寫個
WITH-LOVE-FROM-AMERICA.txt 的宣言檔案。這個事件受到了開源圈強烈的譴責，造成了很不好的影響。該供應鏈投毒事件同時也暴漏了JS/node/npm生態的脆弱。該事件也對我們起了警示作用，怎麼避免開源庫的安全隱患顯得尤為重要。

三、開源庫使用安全指南

1. 避免下載未知或不可信的包

在進行開源庫的選型時，需要檢查開源許可證，關注stars、 forks、 commit frequency、contributors 等相關指標，檢視包的安全策略。

2. npm ci 代替 npm install

npm ci和npm install的區別主要在於執行npm ci命令時，專案必須要有package-lock.json檔案，如果package-lock.json中的依賴與package.json中的依賴不匹配時，則將退出並顯示錯誤，該命令不會更改

package-lock.json和package.json。因此，當我們進行CI（持續整合）/CD（持續部署）或生產釋出時，儘量使用npm ci，它會嚴格按照package-lock.json檔案中指定的包版本進行安裝，防止由於版本問題產生問題。

3. 安裝和使用npm包時，忽略執行指令碼，最小化攻擊面

當使用的包有新版本更新時，不要盲目升級，在升級之前檢視下版本的更改紀錄檔、發行說明和程式碼，關注其他人的使用體驗。在安裝軟體包時，確保新增–ignore-scripts 字尾以禁止第三方軟體包執行任何指令碼。考慮將 ignore-scripts 新增到.npmrc 專案檔案或全域性 npm 設定中。

4. 及時升級過時的依賴項

盲目升級包版本不可取，但是當包版本過時不去升級也會帶來一系列問題。npm outdated命令可以檢視哪些包已經過期了。其中黃色的依賴包對應package.json中指定的版本，紅色的依賴包表示有可用的更新。

5. 使用安全工具來掃描npm包

大家拿到專案之後執行npm install，之後將專案執行起來，幾乎沒人關注安裝了什麼。安全問題不容忽視，接下來介紹的幾個掃描工具能快速幫你識別專案中的依賴有哪些漏洞。比較常用的掃描工具有npm audit、yarn audit、snyk等。

（1）npm audit

是npm的官方檢查工具，npm6 新增的一個命令，漏洞資料來自於GitHub Advisory Database，npm audit 對第三方包的掃描依賴於 package.json 和 package-lock.json 檔案，如果沒有這兩個檔案會報錯。

注意：京東源不支援，需要切換其他源

nrm ls
nrm use npm 切換源

npm audit 生成安全報告
High/Low/Moderate/Critical：安全漏洞等級
Package：存在漏洞的包名稱
Dependency of: 當前工程直接依賴的包名稱
Path: 漏洞完整依賴路徑
More info: 漏洞詳情

npm audit fix 安全漏洞修復
自動修復風險庫，原理是升級依賴庫，將庫升級到已修復了該風險的版本號

npm audit fix --force 強制修復漏洞
對於非相容性的依賴包升級需要執行該命令，謹慎操作，可能會導致專案不能執行。

npm audit --json 列印出一個詳細的json格式的安全報告，裡面有漏洞的詳情和修復策略
actions：包含所有漏洞的修復策略
"update"更新版本號 
"install"修復直接依賴 
"install major"強制升級依賴，跨越主版本 
"review"不可自動修復，需要人工review

advisories： 包含所有漏洞的詳情
"cves"：CVE漏洞編號
"severity"：漏洞等級
"vulnerable_versions"：受影響的版本
"patched_versions"：已修復的版本

（2）yarn audit

yarn audit無法自動修復，需要執行yarn upgrade手動更新版本號

（3）synk

Snyk 是一家美國的網路安全公司，它維護自己的開源漏洞資料庫，包含多語言，多個包管理工具的漏洞。

Snyk cli是一個開發者優先的，自動發現依賴包的安全漏洞的工具，幫助開發者們在開發階段就能查詢、修復和監測程式碼的脆弱性。

安裝： npm install -g snyk
授權： snyk auth

掃描：snyk test 

6. 及時披露發現的漏洞

如果找到任何漏洞或安全問題，及時報告給npm社群並更新相關的npm包。

四、自建程式碼庫使用安全指南

1. 不要把敏感資訊提交到NPM庫中

npm包釋出時會根據.gitignore 、.npmignore、package.json檔案中的"file"屬性決定要忽略掉那些檔案和要包括哪些檔案。.gitignore和.npmignore檔案兩者之間並不是疊加關係，而是替代關係。.npmignore檔案的優先順序更高，會替掉.gitignore檔案的作用，建議使用.gitignore。提交時切記將敏感資訊登記在.gitignore中。最優的方案是使用package.json檔案中的"file"屬性來控制要包含的檔案，雖然比較麻煩，但是是最安全的做法。

2. 重要資料進行加密傳輸

五、常見的漏洞資料庫

1. CVE

CVE是通用漏洞披露(Common Vulnerabilities and Exposures) 的簡稱，是一個記錄常見漏洞的資料庫。CVE對每一個漏洞都會有一個專屬的編號，格式為CVE-YYYY-NNNNN。YYYY為漏洞披露年份，NNNNN為流水編號。

2. CNNVD

CNNVD是中國國家資訊保安漏洞庫，於2009年10月18日正式成立。

3. NVD

NVD是美國國家漏洞資料庫，建立於2000年。

以上為雲端計算時代，前端如何保證開原始碼安全性的一些個人見解和看法，歡迎大家一起交流學習~