7月安卓手機性能榜：紅魔8S Pro再奪榜首
7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
如今這個時代，數據已經變得越來越重要，網頁和APP是主流的數據載體，如果獲取數據的接口沒有設置任何的保護措施的話，數據就會被輕易地竊取或篡改。
除了數據泄露外，一些重要功能的接口如果沒有做好保護措施也會被惡意調用造成DDoS、條件競爭等攻擊效果，比如如下幾個場景：
一些營銷活動類的Web頁面，領紅包、領券、投票、抽獎等活動方式很常見。此類活動對于普通用戶來說應該是“拼手氣”，而對于非正常用戶來說，可以通過直接刷活動API接口的這種“作弊”方式來提升“手氣”。這樣對普通用戶來說就很不公平。
所以對重要接口都會采用加密驗簽的方式進行保護，而驗簽的加密邏輯大多數都通過JS代碼實現，所以保護JS代碼不被攻擊者竊取尤為重要。
由于這兩個原因，致使JavaScript代碼是不安全的，任何人都可以讀、分析、復制、盜用甚至篡改。
以下場景就通過特定的防護措施提高了攻擊成本：
這些場景都是網站為了保護數據不被輕易抓取采取的措施，運用的技術主要有：
數據和功能一般是通過服務器提供的接口來實現，為了提升接口的安全性，客戶端會和服務端約定一種接口檢驗方式，通常是各種加密和編碼算法，如Base64、Hex、MD5、AES、DES、RSA等。
常用的數據接口都會攜帶一個sign參數用于權限管控：
① 客戶端和服務端約定一種接口校驗邏輯，客戶端在每次請求服務端接口的時候附帶一個sign參數。
② sign參數的邏輯自定義，可以由當前時間戳信息、設備ID、日期、雙方約定好的秘鑰經過一些加密算法構造而成。
③ 客戶端根據約定的加密算法構造sign，每次請求服務器的時候附帶上sign數。
④ 服務端根據約定的加密算法和請求的數據對sign進行校驗，如果檢驗通過，才返回數據，否則拒絕響應。
這就是一個比較簡單的接口參數加密的實現，如果有人想要調用這個接口的話，必須要破解sign的生成邏輯，否則是無法正常調用接口的。
當然上面的實現思路比較簡單，還可以增加一些時間戳信息和訪問頻次來增加時效性判斷，或使用非對稱加密提高加密的復雜程度。
實現接口參數加密需要用到一些加密算法，客戶端和服務器都有對應的SDK來實現這些加密算法，如JavaScript的crypto-js、Python的hashlib、Crypto等等。如果是網頁且客戶端的加密邏輯是用JavaScript來實現的話，其源代碼對用戶是完全可見的，所以我們需要用壓縮、混淆、加密的方式來對JavaScript代碼進行一定程度的保護。
去除JavaScript代碼中不必要的空格、換行等內容，使源碼都壓縮為幾行內容，降低代碼可讀性，同時可提高網站的加載速度。
如果僅僅是去除空格換行這樣的壓縮方式，幾乎沒有任何防護作用，這種壓縮方式僅僅是降低了代碼的直接可讀性，可以用IDE、在線工具或Chrome輕松將JavaScript代碼變得易讀。
所以JavaScript壓縮技術只能在很小的程度上起到防護作用，想提高防護的效果還得依靠JavaScript混淆和加密技術。
使用變量混淆、字符串混淆、屬性加密、控制流平坦化、調試保護、多態變異等手段，使代碼變得難以閱讀和分析，同時不影響代碼原有功能，是一種理想且實用的JS保護方案。
JavaScript加密是對JavaScript混淆技術防護的進一步升級，基本思路是將一些核心邏輯用C/C++語言來編寫，并通過JavaScript調用執行，從而起到二進制級別的防護作用，加密的方式主要有Emscripten和WebAssembly等。
1. Emscripten
Emscripten編譯器可以將C/C++代碼編譯成asm.js的JavaScript變體，再由JavaScript調用執行，因此某些JavaScript的核心功能可以使用C/C++語言實現。
2.WebAssembly
WebAssembly也能將C/C++代碼轉成JavaScript引擎可以運行的代碼，但轉出來的代碼是二進制字節碼，而asm.js是文本，因此運行速度更快、體積更小，得到的字節碼具有和JavaScript相同的功能，在語法上完全脫離JavaScript，同時具有沙盒化的執行環境，利用WebAssembly技術，可以將一些核心的功能用C/C++語言實現，形成瀏覽器字節碼的形式，然后在JavaScript中通過類似如下的方式調用：
這種加密方式更加安全，想要逆向或破解需要逆向WebAssembly，難度極大。
2.5.1 壓縮混淆工具
2.5.2 反混淆工具
3.1.1 Elements
Elements 面板會顯示目前網頁中的 DOM、CSS 狀態，且可以修改頁面上的 DOM 和 CSS，即時看到結果，省去了在編輯器修改、儲存、瀏覽器查看結果的流程。
有時候一些dom節點會嵌套很深，導致我們很難利用Element面板html代碼來找到對應的節點。inspect(dom元素)可以讓我們快速跳轉到對應的dom節點的html代碼上。
3.1.2 Console
Console對象提供了瀏覽器控制臺調試的接口，Console是一個對象，上面有很多方便的方法。
3.1.3 JS斷點調試
JS斷點調試，即在瀏覽器開發者工具中為JS代碼添加斷點，讓JS執行到某一特定位置停住，方便開發者對該處代碼段進行分析與邏輯處理。
Sources面板
① 普通斷點（breakpoint）
給一段代碼添加斷點的流程是："F12（Ctrl + Shift + I）打開開發工具"->"點擊Sources菜單"->"左側樹中找到相應文件"→"點擊行號列"即完成在當前行添加/刪除斷點操作。當斷點添加完畢后，刷新頁面JS執行到斷點位置停住，在Sources界面會看到當前作用域中所有變量和值。
啟用/禁用所有的斷點：這個按鈕不會影響程序的執行。只是一個批量操作斷點的開/關。
② 條件斷點（Conditional breakpoint）
給斷點添加條件，只有符合條件時，才會觸發斷點，條件斷點的顏色是橙色。
③ 日志斷點（logpoint）
當代碼執行到這里時，會在控制臺輸出你的表達式，不會暫停代碼執行，日志斷點式粉紅色。
debugger命令
通過在代碼中添加"debugger;"語句，當代碼執行到該語句的時候就會自動斷點，之后的操作和在Sources面板添加斷點調試，唯一的區別在于調試完后需要刪除該語句。
在開發中偶爾會遇到異步加載html片段（包含內嵌JS代碼）的情況，而這部分JS代碼在Sources樹中無法找到，因此無法直接在開發工具中直接添加斷點，那么如果想給異步加載的腳本添加斷點，此時"debugger;"就發揮作用了。
3.2.1 禁用開發者工具
監聽是否打開開發者工具，若打開，則直接調用JavaScript的window.close( )方法關閉網頁
① 監聽F12按鍵、監聽Ctrl+Shift+I（Windows系統）組合鍵、監聽右鍵菜單，監聽Ctrl+s禁止保存至本地，避免被Overrides。
<script> //監聽F12、Ctrl+Shift+i、Ctrl+s document.onkeydown = function (event) { if (event.key === "F12") { window.close(); window.location = "about:blank"; } else if (event.ctrlKey && event.shiftKey && event.key === "I") {//此處I必須大寫 window.close(); window.location = "about:blank"; } else if (event.ctrlKey && event.key === "s") {//此處s必須小寫 event.preventDefault(); window.close(); window.location = "about:blank"; } }; //監聽右鍵菜單 document.oncontextmenu = function () { window.close(); window.location = "about:blank"; };</script>② 監聽窗口大小變化
<script> var h = window.innerHeight, w = window.innerWidth; window.onresize = function () { if (h !== window.innerHeight || w !== window.innerWidth) { window.close(); window.location = "about:blank"; } }</script>③ 利用Console.log
<script> //控制臺打開的時候回調方法 function consoleOpenCallback(){ window.close(); window.location = "about:blank"; return ""; } //立即運行函數，用來檢測控制臺是否打開 !function () { // 創建一個對象 let foo = /./; // 將其打印到控制臺上，實際上是一個指針 console.log(foo); // 要在第一次打印完之后再重寫toString方法 foo.toString = consoleOpenCallback; }()</script>3.2.2 無限debugger反調試
① constructor
<script> function consoleOpenCallback() { window.close(); window.location = "about:blank"; } setInterval(function () { const before = new Date(); (function(){}).constructor("debugger")(); // debugger; const after = new Date(); const cost = after.getTime() - before.getTime(); if (cost > 100) { consoleOpenCallback(); } }, 1000);</script>② Function
<script> setInterval(function () { const before = new Date(); (function (a) { return (function (a) { return (Function('Function(arguments[0]+"' + a + '")()')) })(a) })('bugger')('de'); // Function('debugger')(); // debugger; const after = new Date(); const cost = after.getTime() - before.getTime(); if (cost > 100) { consoleOpenCallback2(); } }, 1000);</script>有大佬寫了一個庫專門用來判斷是否打開了開發者工具，可供參考使用：點擊查看>>
3.3 反反調試手段
3.3.1 禁用開發者工具
針對判斷是否打開開發者工具的破解方式很簡單，只需兩步就可以搞定。
① 將開發者工具以獨立窗口形式打開
② 打開開發者工具后再打開網址
3.3.2 無限debugger
針對無限debugger反調試，有以下破解方法
① 直接使用dubbger指令的，可以在Chrome找到對應行（格式化后），右鍵行號，選擇Never pause here即可。
② 使用了constructor構造debugger的，只需在console中輸入以下代碼后，點擊F8（Resume script execution）回復js代碼執行即可（直接點擊小的藍色放行按鈕即可）。
Function.prototype.cnotallow=function(){}③ 使用了Function構造debugger的，只需在console中輸入以下代碼。
Function = function () {}JavaScript混淆加密使得代碼更難以被反編譯和分析，從而提高了代碼的安全性，攻擊者需要花費更多的時間和精力才能理解和分析代碼，從而降低了攻擊者入侵的成功率，但它并不能完全保護代碼不被反編譯和分析，如果攻擊者有足夠的時間和資源，他們仍然可以理解代碼并找到其中的漏洞，道高一尺，魔高一丈，任何客戶端加密混淆都會被破解，只要用心都能解決，我們能做的就是拖延被破解的時間，所以盡量避免在前端代碼中嵌入敏感信息或業務邏輯。
本文鏈接：http://www.www897cc.com/showinfo-26-51262-0.html前端 JS 安全對抗原理與實踐
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號