摘要：的網站仍然使用有漏洞庫上周發布了開源社區安全現狀報告，發現隨著開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。與應用安全是流行的服務端框架，本文即是介紹如何使用以及其他的框架來增強應用的安全性。

前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID ： frontshow），及時獲取前端每周清單。

國內國外，前端最新動態

PWA 是否能帶來新一輪大前端技術洗牌？: 本文是 Brilliant Open Web 團隊成員，百度資深前端工程師彭星分享的對于 PWA 與大前端技術的看法。本文回顧了 Web 在移動時代遭遇的兩大枷鎖：用戶體驗枷鎖與用戶留存枷鎖，討論了 PWA 成為解開枷鎖鑰匙的可行性，分析了其是否能真正彌補 Web 的劣勢。

77% 的網站仍然使用有漏洞 JavaScript 庫: 上周 Snyk 發布了開源社區安全現狀報告，發現隨著開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴大。本文則是從 Web 安全的角度對于數據進行了深度分析，發現統計的超過 433000 站點中， 77% 使用了至少一個包含已知漏洞的前端 JavaScript 庫；更多詳細的數據描述請查看原文。

步步為營，掌握基礎技能

基于 CSS Grid 的常見響應式布局: CSS Grid 允許我們在二維坐標系上編排元素，在主流桌面瀏覽器逐步完善對其的支持之后，CSS Grid 也開始登陸到移動端瀏覽器；本文即是介紹如何利用 CSS Grid 實現常見的響應式布局。本文依次介紹了圖文混排布局、整頁圖片畫廊、卡片布局、Holy Grail 布局等等；更多 CSS Grid 相關資料查看這里。

2018 年值得使用的 React 組件庫: 工欲善其事，必先利其器；作者根據自身的實踐經驗與 GitHub、Stack Overflow 等社區的活躍程度，在本文中為我們推薦了十余個值得一試的 React 組件庫，以提高應用開發的效率。作者在文中討論的組件庫包括了 React Material UI、React-Bootstrap 、 React toolbox、React Belle 、 React Grommet、React Components by Khan Academy 、 Material Components Web、Ant Design React 、 Semantic UI React、Onsen UI 、 React Virtualized 等；更多 React 相關資料參考這里。

基于 Rust 編寫高效安全的 Node.js 原生模塊: RisingStack 一直致力于提升 Node.js 的運行效率；不過去年面臨了一個窘境：已然達到 Node.js 本身的瓶頸。為了突破天花板，RisingStack 決定將關鍵計算模塊以原生方式實現；而經過技術選型比較之后，他們決定使用 Rust，而不是 C++ 來編寫原生模塊。本文首先分析了 Node.js 服務端速度的瓶頸，然后展示了如何用 Rust FFI 與 Rust Neon 實現簡單的 URL 分析模塊，最后對比了這二者以及 Node.js 實現方案之間的性能；更多 Node.js 學習參考深入淺出 Node.js 全棧架構。

使用 Angular 與 Vue.js 實現相同的功能并比較: Angular 與 Vue.js 都是優秀的 Web 組件框架，二者在某些語法風格上也有異曲同工之妙，本系列即是通過利用這兩個框架編寫相同的，簡單而易擴展的應用，來仔細地對比二者。本系列包括了四篇博文，首先從項目文件結構的角度對比了二者；然后細致地對于學習資料、組件語法中相似的代碼等內容進行了分析，最后還討論了如何使用 TypeScript 開發 Vue.js 應用。更多 AngularJS 與 Vue.js 學習資料可以參考這里。

立足實踐，提示實際水平

如何顯著提升 React 應用的性能: 應用性能優化是老生常談的問題，隨著我們應用業務需求不斷地變化，性能問題也是綿延不絕；本文是又一篇優秀的討論 React 應用性能優化的文章。本文依次討論了不恰當的 shouldComponentUpdate 以及對于 PureComponent 的誤用反而會造成逆優化、如何快速修改 DOM 元素、如何避免過于頻繁地事件觸發與回調執行。更多 React 資料可以閱讀 React 與前端工程化實踐。

Helmet 與 Express 應用安全: Express 是流行的 Node.js 服務端框架，本文即是介紹如何使用 Helmet 以及其他的框架來增強 Express 應用的安全性。本文詳細介紹了 HTTP 響應頭中的 X-DNS-Prefetch-Control、X-Frame-Options 、 Strict-Transport-Security、X-Download-Options 、 X-Content-Type-Options、X-XSS-Protection 等域的含義與作用；更多 Node.js 學習參考深入淺出 Node.js 全棧架構。

或許類屬性中的箭頭函數并不如你所料: Arrow Function 箭頭函數是 ES6 的重要語法特性之一，其能優化我們代碼的可讀性，還能自動綁定當前的 this 對象。不過本文作者表示，當我們在類屬性中使用箭頭函數時，卻往往會不符合直覺的判斷；類屬性式的箭頭函數會被轉換為構造函數中創建，因此并不能被子類繼承，并且這種模式的性能表現也差于綁定函數模式。更多 JS 學習可以參閱現代 JS 語法基礎與工程實踐。

深度思考，升華開發智慧

我是如何 7 分鐘之內黑進 40 個網站的: 本文作者詳細介紹了對于某個包含漏洞的網站滲透提權的過程，是一篇不錯的安全實踐教程。作者依次使用了 Nmap 進行嗅探踩點，使用 gobuster 進行路徑枚舉，構造虛擬郵箱地址并且上傳 WebShell；然后從 cgi-admin/pages 獲取明文數據庫密碼并且成功地獲取全部數據庫權限。 更多 Web 安全相關知識可以閱讀現代 Web 開發工程化實踐。

Atom 中的遠程代碼執行: 本文作者針對 Atom 1.21.1 版本中，因為 Markdown 解析漏洞導致的遠程代碼執行（RCE ），進行了深度分析，也是不錯的了解常見的 Web 安全問題對桌面應用的影響的文章。本文首先介紹了 Atom 如何通過 CSP 來限制 XSS，然后分析了 Atom 是如何解析 Markdown 文件，如何針對這種解析機制構造 local DOM XSS Payload，以及如何執行本地任意代碼并且加載執行遠程代碼；更多 Web 安全相關知識可以閱讀現代 Web 開發工程化實踐。

使用 Node.js 與 OpenCV 實現人臉識別: 近年來人工智能與深度學習的概念火熱，相關的理論技術也在工程項目中得到了廣泛的應用，每周清單之前也推薦過如何用 JavaScript 來實現機器學習算法；本文則是循序漸進地介紹如何使用 Node.js 來構建簡單的人臉識別應用。本文從數據集準備開始入手，然后討論了如何訓練識別器、如何進行模型檢驗等內容；更多 Node.js 學習參考深入淺出 Node.js 全棧架構。

樂于分享，共推前端發展

node-prune: node-prune 是簡單的用來移除 ./node_modules 中不必要文件的工具，譬如 MarkDown、TypeScript 源代碼文件等；從而盡可能地減少 node_modules 中文件的體積，以加快應用部署的速度。

react-i18next: react-i18next 是便捷易用的 React 國際化輔助庫，其能幫助我們快速實現應用地國際化改造。

bundle-buddy-webpack-plugin: Bundle Buddy 是著名的能夠發現多個 JavaScript Chunks/Splits 中重復冗余源代碼的工具，從而方便我們選取合適的代碼分割參數，來最終提升頁面加載的性能。bundle-buddy-webpack-plugin 則是基于 Bundle Buddy 封裝的 Webpack Plugin，方便我們集成到現有的開發流程中。

aws-amplify: AWS Amplify 是面向 Web 前端與移動端開發者的，用于構建云端應用的工具庫；其由 AWS 開源，目前僅支持 Amazon Web Services，但是其設計的初衷是提供插件化的、能夠適用于多種云端或者自定義服務端的工具。Amplify 提供了聲明式的接口，能夠幫助開發者迅速添加使用情況收集、權限校驗等功能。

那個逃離北京的程序員說：我想工作到 70 歲: 本文是二叉樹出品的《眾生相》十集人物紀錄片的第三集，講述了綽號老神仙的 Linux 內核開發者 , 吳峰光博士 “ 逃離北京 ” 之旅；這個帶有夢幻色彩的詞是如此代價高昂，以至于對不少人而言成為一種奢侈的選擇。而踏上這條 “ 逃離 ” 之路的實踐者們，是否真的收獲了他們想要的東西？本文并未談及具體的技術，而是從生存、生活等等角度談談技術人員的道路選擇。

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號后回復 “ 加群 ”。投稿請發郵件到 editors@cn.infoq.com，注明 “ 前端之巔投稿 ”。