摘要：的網(wǎng)站仍然使用有漏洞庫上周發(fā)布了開源社區(qū)安全現(xiàn)狀報(bào)告，發(fā)現(xiàn)隨著開源社區(qū)的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴(kuò)大。與應(yīng)用安全是流行的服務(wù)端框架，本文即是介紹如何使用以及其他的框架來增強(qiáng)應(yīng)用的安全性。

前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID ： frontshow），及時(shí)獲取前端每周清單。

國內(nèi)國外，前端最新動(dòng)態(tài)

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

77% 的網(wǎng)站仍然使用有漏洞 JavaScript 庫: 上周 Snyk 發(fā)布了開源社區(qū)安全現(xiàn)狀報(bào)告，發(fā)現(xiàn)隨著開源社區(qū)的日漸活躍，開源代碼中包含的安全漏洞以及影響的范圍也在不斷擴(kuò)大。本文則是從 Web 安全的角度對(duì)于數(shù)據(jù)進(jìn)行了深度分析，發(fā)現(xiàn)統(tǒng)計(jì)的超過 433000 站點(diǎn)中， 77% 使用了至少一個(gè)包含已知漏洞的前端 JavaScript 庫；更多詳細(xì)的數(shù)據(jù)描述請(qǐng)查看原文。

步步為營，掌握基礎(chǔ)技能

基于 CSS Grid 的常見響應(yīng)式布局: CSS Grid 允許我們?cè)诙S坐標(biāo)系上編排元素，在主流桌面瀏覽器逐步完善對(duì)其的支持之后，CSS Grid 也開始登陸到移動(dòng)端瀏覽器；本文即是介紹如何利用 CSS Grid 實(shí)現(xiàn)常見的響應(yīng)式布局。本文依次介紹了圖文混排布局、整頁圖片畫廊、卡片布局、Holy Grail 布局等等；更多 CSS Grid 相關(guān)資料查看這里。

2018 年值得使用的 React 組件庫: 工欲善其事，必先利其器；作者根據(jù)自身的實(shí)踐經(jīng)驗(yàn)與 GitHub、Stack Overflow 等社區(qū)的活躍程度，在本文中為我們推薦了十余個(gè)值得一試的 React 組件庫，以提高應(yīng)用開發(fā)的效率。作者在文中討論的組件庫包括了 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 相關(guān)資料參考這里。

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

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

立足實(shí)踐，提示實(shí)際水平

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

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

或許類屬性中的箭頭函數(shù)并不如你所料: Arrow Function 箭頭函數(shù)是 ES6 的重要語法特性之一，其能優(yōu)化我們代碼的可讀性，還能自動(dòng)綁定當(dāng)前的 this 對(duì)象。不過本文作者表示，當(dāng)我們?cè)陬悓傩灾惺褂眉^函數(shù)時(shí)，卻往往會(huì)不符合直覺的判斷；類屬性式的箭頭函數(shù)會(huì)被轉(zhuǎn)換為構(gòu)造函數(shù)中創(chuàng)建，因此并不能被子類繼承，并且這種模式的性能表現(xiàn)也差于綁定函數(shù)模式。更多 JS 學(xué)習(xí)可以參閱現(xiàn)代 JS 語法基礎(chǔ)與工程實(shí)踐。

深度思考，升華開發(fā)智慧

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

Atom 中的遠(yuǎn)程代碼執(zhí)行: 本文作者針對(duì) Atom 1.21.1 版本中，因?yàn)?Markdown 解析漏洞導(dǎo)致的遠(yuǎn)程代碼執(zhí)行（RCE ），進(jìn)行了深度分析，也是不錯(cuò)的了解常見的 Web 安全問題對(duì)桌面應(yīng)用的影響的文章。本文首先介紹了 Atom 如何通過 CSP 來限制 XSS，然后分析了 Atom 是如何解析 Markdown 文件，如何針對(duì)這種解析機(jī)制構(gòu)造 local DOM XSS Payload，以及如何執(zhí)行本地任意代碼并且加載執(zhí)行遠(yuǎn)程代碼；更多 Web 安全相關(guān)知識(shí)可以閱讀現(xiàn)代 Web 開發(fā)工程化實(shí)踐。

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

樂于分享，共推前端發(fā)展

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

react-i18next: react-i18next 是便捷易用的 React 國際化輔助庫，其能幫助我們快速實(shí)現(xiàn)應(yīng)用地國際化改造。

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

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

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

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù) “ 加群 ”。投稿請(qǐng)發(fā)郵件到 editors@cn.infoq.com，注明 “ 前端之巔投稿 ”。