前端技術週刊 2019-02-26：前端代碼保護

2019-02-26 前端代碼保護

前端快爆

• Vue 2.6 正式發佈，帶來了全新的 Slots（插槽）語法、異步錯誤處理、動態指令參數、編譯警告位置信息、顯式建立響應式對象、SSR 數據預抓取、可直接在瀏覽器中引入的 ES Modules 構建文件等特性，這一切都將更好的接軌將來的 3.0 版本。🔗

真的學不動了，小右哥求放過。

• Chrome 瀏覽器即將引入一個名爲「Focus Mode」的新功能，該模式下會讓你更加專一於網頁內容的瀏覽，禁用一些無關打擾，好比關閉網頁通知等。目前默認禁用，須要經過 「chrome://flags/#focus-mode」開啓。🔗

點評：瀏覽器不少個，谷歌老大哥，上網不規範，親人兩行淚（什麼破詞， 一點都不圓潤，盤它！）

• Ionic React Beta 版發佈，Ionic 是一個用於構建跨平臺 Hybrid 移動應用程序的框架，如今開始提供 React 方式構建，目前大概已有 70 多個組件。🔗

這年頭寫個框架不支持 React 和 Vue 都很差意思拿出來。

• Node.js 11.10.0 發佈，主要帶來了 npm 6.7.0、response.writeHead 如今返回 response、新增 repl.setupHistory、引入客戶端 「session」 事件等特性。🔗
• npm 企業版正式發佈，主打安全性，目前主要有如下功能：可託管在 Kubernetes 集羣中的專用單租戶、提供公司專用的 companyname.npme.io URL、支持行業標準的 SSO 身份驗證、基於角色的訪問控制、在團隊之間和團隊之間共享包、可定製的協做和無縫 CI/CD 系統集成工做流程、經過「npm audit」告知用戶已發現的漏洞。🔗
  

點評：cnpm 笑而不語。

• 微軟發力，爲 Chromium 的字幕添加 Windows 系統樣式支持。🔗

點評：我軟巨硬。

優秀 Demo

• CSS cubic-bezier() 動畫
• 
• ThreeJS 實現的鐘擺效果
  
  

專題：前端代碼保護

本期爲 @葉兮 爲咱們帶來的前端代碼保護相關的文章。

• 介紹

  • 可信前端之路：代碼保護：介紹了前端代碼保護的意義以及手段。瀏覽器特性致使前端單純的加密和解密強度並不高，容易被攔截。基於混淆的代碼保護強度更高，但也只是增長破解的難度。

• 代碼混淆

  • 使用 Esprima 進行代碼混淆：生成 AST，設計自定義規則從而實現代碼混淆 & Esprima 在線版。
  • JointJS。

• 虛擬機保護器：不是單純在瀏覽器運行混淆後的代碼，而是將源代碼混淆後，用解釋器對 bytecode 進行解釋執行。每個保護器的編譯工具和解釋器都是根據隨機生成的編碼從新生成。是目前在應用的性能開銷最大，也是強度最高的一類代碼混淆器。

  • LLVM 編譯器防禦
  • 小型虛擬機保護並逆向分析

• 調試保護

  • 防開發者調試：一個判斷瀏覽器是否開啓控制檯的完美解決方案，開啓則阻塞JS執行。

• 綜合工具與逆向

  • Obfuscator:經過一系列基礎的混淆將源代碼轉換爲不可讀內容，支持反美化、反調試、域名保護等。
  • 前端工程師如何反擊爬蟲 & 自定義字體混淆信息的自動化破解：前者是反擊爬蟲的綜述，後者是使用 OCR 進行的相應破解。
  • JSNice、JSBeautifier。僅對基礎的混淆起做用。支持轉換變量名，去掉無用代碼注入等。對於虛擬機保護器和調試保護無用。
  • 對 Google ReCaptcha 進行的逆向嘗試：Botguard 有兩部分，一部分是 UA 採集模塊，另外一部分是虛擬機解釋執行保護。
  • VMProtect & VMAttack：前者是 Windows 系統上的代碼保護工具，後者是針對 VMProtect 的僞源碼還原，動靜態分析。
  • 
    

---

本期編輯：@壹絲，審覈：@承虎，專題供稿：@葉兮
題圖來源：http://www.aspectestateagents.com.au/10-ways-to-protect-your-home-from-storm-damage/