一、概念解析

1.1 什么是接口加密

如今這個(gè)時(shí)代，數(shù)據(jù)已經(jīng)變得越來越重要，網(wǎng)頁和APP是主流的數(shù)據(jù)載體。而如果獲取數(shù)據(jù)的接口沒有設(shè)置任何的保護(hù)措施，那么數(shù)據(jù)的安全性將面臨極大的威脅。不僅可能造成數(shù)據(jù)的輕易竊取和篡改，還可能導(dǎo)致一些重要功能的接口被惡意調(diào)用，引發(fā)DDoS、條件競(jìng)爭(zhēng)等攻擊效果。這是我們絕對(duì)不能忽視的問題！

?? 數(shù)據(jù)泄露風(fēng)險(xiǎn)：未經(jīng)保護(hù)的數(shù)據(jù)接口很容易遭到黑客的攻擊，從而導(dǎo)致數(shù)據(jù)泄露。一旦敏感信息落入錯(cuò)誤的手中，后果將不堪設(shè)想。為了避免這種情況發(fā)生，我們需要采取一系列的安全措施，確保數(shù)據(jù)在傳輸和存儲(chǔ)過程中始終得到有效的保護(hù)。

?? DDoS攻擊威脅：若沒有對(duì)關(guān)鍵接口進(jìn)行良好的保護(hù)措施，惡意攻擊者可以利用這些弱點(diǎn)進(jìn)行分布式拒絕服務(wù)（DDoS）攻擊。這種攻擊會(huì)使服務(wù)器超負(fù)荷運(yùn)行，導(dǎo)致網(wǎng)頁和APP無法正常訪問，進(jìn)而嚴(yán)重影響用戶體驗(yàn)和業(yè)務(wù)運(yùn)營。因此，我們必須采取相應(yīng)的安全防護(hù)，避免成為攻擊目標(biāo)。

?? 條件競(jìng)爭(zhēng)漏洞：缺乏接口保護(hù)可能還會(huì)引發(fā)條件競(jìng)爭(zhēng)漏洞。攻擊者可以通過同時(shí)發(fā)送多個(gè)請(qǐng)求并利用系統(tǒng)的漏洞，以最快速度爭(zhēng)奪資源，導(dǎo)致系統(tǒng)無法正常工作。這對(duì)于一些操作頻繁或需要保持一致性的功能尤為重要，我們必須及時(shí)識(shí)別和修復(fù)這些漏洞。

為了提高數(shù)據(jù)安全，保護(hù)網(wǎng)頁和APP的正常運(yùn)行，我們需要重視接口安全問題，采取以下措施：
1?? 設(shè)置合適的身份驗(yàn)證和權(quán)限控制，確保只有合法用戶才能訪問接口。
?? 加密傳輸數(shù)據(jù)，防止數(shù)據(jù)在傳輸過程中被竊取或篡改。
?? 使用API密鑰或令牌進(jìn)行接口訪問授權(quán)，限制非法請(qǐng)求的發(fā)生。
? 對(duì)接口進(jìn)行監(jiān)控和日志記錄，及時(shí)發(fā)現(xiàn)異常行為并做出應(yīng)對(duì)。
??? 定期進(jìn)行安全評(píng)估和漏洞掃描，修補(bǔ)潛在的漏洞。
?? 更新接口和庫文件，確保軟件和組件的安全性。

只有在保護(hù)好數(shù)據(jù)接口的情況下，我們才能有效地防御數(shù)據(jù)泄露和各種攻擊，保障用戶和企業(yè)的利益。讓我們一起行動(dòng)起來，加強(qiáng)接口安全防護(hù)，構(gòu)建更加安全可靠的網(wǎng)絡(luò)環(huán)境！

一些營銷活動(dòng)類的Web頁面，領(lǐng)紅包、領(lǐng)券、投票、抽獎(jiǎng)等活動(dòng)方式很常見。此類活動(dòng)對(duì)于普通用戶來說應(yīng)該是“拼手氣”，而對(duì)于非正常用戶來說，可以通過直接刷活動(dòng)API接口的這種“作弊”方式來提升“手氣”。這樣對(duì)普通用戶來說就很不公平。

所以對(duì)重要接口都會(huì)采用加密驗(yàn)簽的方式進(jìn)行保護(hù)，而驗(yàn)簽的加密邏輯大多數(shù)都通過JS代碼實(shí)現(xiàn)，所以保護(hù)JS代碼不被攻擊者竊取尤為重要。

1.2 為什么要保護(hù)JS代碼

為什么要保護(hù)JS代碼？這是我們?cè)陂_發(fā)和維護(hù)網(wǎng)頁時(shí)必須考慮的重要問題。毋庸置疑，JavaScript是一種運(yùn)行于客戶端的語言，這意味著它的代碼將直接暴露給用戶的瀏覽器。而且，JavaScript代碼是公開透明的，任何人都可以輕松地讀取、分析、復(fù)制、盜用甚至篡改這些代碼。這使得JavaScript代碼成為網(wǎng)絡(luò)安全的一個(gè)薄弱環(huán)節(jié)。

?? 客戶端運(yùn)行：與其他編程語言不同，JavaScript代碼是在用戶的瀏覽器中運(yùn)行的。這就意味著，用戶可以直接訪問和查看JavaScript代碼。如果沒有適當(dāng)?shù)谋Ｗo(hù)措施，惡意用戶甚至可以修改代碼，對(duì)網(wǎng)頁進(jìn)行篡改或執(zhí)行惡意操作。

?? 公開透明：JavaScript代碼是公開可見的，任何人都可以通過查看源代碼來了解其實(shí)現(xiàn)細(xì)節(jié)和邏輯。這方便了開發(fā)者之間的學(xué)習(xí)和交流，但同時(shí)也給攻擊者提供了可能性，他們可以分析代碼并找到其中的漏洞或弱點(diǎn)，進(jìn)而進(jìn)行攻擊。

由于這兩個(gè)原因，致使JavaScript代碼是不安全的，任何人都可以讀、分析、復(fù)制、盜用甚至篡改。

1.3 應(yīng)用場(chǎng)景

在保護(hù)JS代碼的過程中，有許多特定的防護(hù)措施可以提高攻擊成本，使攻擊者難以獲取敏感信息或篡改網(wǎng)頁內(nèi)容。

?? 數(shù)據(jù)加密：一些網(wǎng)站會(huì)使用JavaScript對(duì)數(shù)據(jù)進(jìn)行加密，確保數(shù)據(jù)的安全性和隱私性。在爬取網(wǎng)頁時(shí)，攻擊者需要解密JavaScript代碼才能獲取到數(shù)據(jù)。通過使用加密算法和密鑰管理來實(shí)現(xiàn)數(shù)據(jù)加密，有效提高了攻擊成本。

?? 參數(shù)加密：某些網(wǎng)站的URL會(huì)包含一些長串的加密參數(shù)，攻擊者必須了解這些參數(shù)是如何構(gòu)造的才能正確訪問URL。這樣的防護(hù)措施增加了攻擊者了解和竊取數(shù)據(jù)的難度，提高了攻擊成本。

?? 代碼壓縮：翻看網(wǎng)站的JavaScript源代碼時(shí)，可能會(huì)遇到許多壓縮或看不懂的字符。JavaScript文件名被編碼，代碼內(nèi)容被壓縮成幾行，變量被修改為單個(gè)字符或十六進(jìn)制字符等。這樣的處理使得攻擊者難以識(shí)別和理解其中的接口加密邏輯，進(jìn)一步增加了攻擊成本。

通過采取這些特定的防護(hù)措施，我們可以提高攻擊者獲取敏感信息、爬取數(shù)據(jù)或篡改網(wǎng)頁內(nèi)容所需的成本。這將更有效地保護(hù)網(wǎng)站和用戶的安全。

1.4 涉及的技術(shù)

這些場(chǎng)景中所提到的保護(hù)措施都是網(wǎng)站為了防止數(shù)據(jù)被輕易抓取而采取的技術(shù)手段。下面是這些技術(shù)的詳細(xì)解釋：

1?? 接口加密技術(shù)：通過接口加密，網(wǎng)站可以對(duì)傳輸?shù)臄?shù)據(jù)進(jìn)行加密處理，確保數(shù)據(jù)在傳輸過程中不被竊取或篡改。常見的接口加密技術(shù)包括使用HTTPS協(xié)議來建立安全的通信通道，以及使用加密算法對(duì)數(shù)據(jù)進(jìn)行加密和解密。

2?? JavaScript壓縮、混淆和加密技術(shù)：為了保護(hù)JavaScript代碼不被輕易分析和篡改，網(wǎng)站常采用JavaScript壓縮、混淆和加密等技術(shù)。代碼壓縮可以減小文件大小，提高加載速度；代碼混淆可以將代碼變得難以理解，增加攻擊者分析的難度；代碼加密可以對(duì)敏感的部分進(jìn)行加密，提高防護(hù)效果。

二、技術(shù)原理

2.1 接口加密技術(shù)

數(shù)據(jù)和功能一般是通過服務(wù)器提供的接口來實(shí)現(xiàn)，為了提升接口的安全性，客戶端會(huì)和服務(wù)端約定一種接口檢驗(yàn)方式，通常是各種加密和編碼算法，如Base64、Hex、MD5、AES、DES、RSA等。

常用的數(shù)據(jù)接口都會(huì)攜帶一個(gè)sign參數(shù)用于權(quán)限管控：

① 客戶端和服務(wù)端約定一種接口校驗(yàn)邏輯，客戶端在每次請(qǐng)求服務(wù)端接口的時(shí)候附帶一個(gè)sign參數(shù)。
② sign參數(shù)的邏輯自定義，可以由當(dāng)前時(shí)間戳信息、設(shè)備ID、日期、雙方約定好的秘鑰經(jīng)過一些加密算法構(gòu)造而成。
③ 客戶端根據(jù)約定的加密算法構(gòu)造sign，每次請(qǐng)求服務(wù)器的時(shí)候附帶上sign數(shù)。
④ 服務(wù)端根據(jù)約定的加密算法和請(qǐng)求的數(shù)據(jù)對(duì)sign進(jìn)行校驗(yàn)，如果檢驗(yàn)通過，才返回?cái)?shù)據(jù)，否則拒絕響應(yīng)。

這就是一個(gè)比較簡單的接口參數(shù)加密的實(shí)現(xiàn)，如果有人想要調(diào)用這個(gè)接口的話，必須要破解sign的生成邏輯，否則是無法正常調(diào)用接口的。

當(dāng)然上面的實(shí)現(xiàn)思路比較簡單，還可以增加一些時(shí)間戳信息和訪問頻次來增加時(shí)效性判斷，或使用非對(duì)稱加密提高加密的復(fù)雜程度。

實(shí)現(xiàn)接口參數(shù)加密需要用到一些加密算法，客戶端和服務(wù)器都有對(duì)應(yīng)的SDK來實(shí)現(xiàn)這些加密算法，如JavaScript的crypto-js、Python的hashlib、Crypto等等。如果是網(wǎng)頁且客戶端的加密邏輯是用JavaScript來實(shí)現(xiàn)的話，其源代碼對(duì)用戶是完全可見的，所以我們需要用壓縮、混淆、加密的方式來對(duì)JavaScript代碼進(jìn)行一定程度的保護(hù)。

2.2 什么是壓縮

壓縮是指去除JavaScript代碼中不必要的空格、換行等內(nèi)容，使源碼變得更加緊湊，從而降低代碼的可讀性，并且可以提高網(wǎng)站的加載速度。

一般而言，壓縮JavaScript代碼可以采用去除空格、換行和注釋等方式來減小代碼的體積。通過這種方式，源碼可以被壓縮成幾行內(nèi)容，從而減少了加載時(shí)需要下載和解析的數(shù)據(jù)量，加快了網(wǎng)頁的加載速度。

然而，僅僅進(jìn)行空格、換行的壓縮對(duì)于防護(hù)作用很小。這種壓縮方式只是降低了代碼的直接可讀性，使用IDE、在線工具或Chrome等工具，可以很容易地將代碼還原成易讀的形式。

因此，如果想要提高代碼的防護(hù)效果，僅僅進(jìn)行壓縮是不夠的。需要結(jié)合JavaScript混淆和加密技術(shù)來增加代碼的復(fù)雜度和難以理解性，從而提高防護(hù)的效果。

總結(jié)起來，JavaScript壓縮技術(shù)雖然能夠減小代碼體積和提升加載速度，但其防護(hù)作用并不強(qiáng)大，若要提高防護(hù)效果，還需要采用JavaScript混淆和加密技術(shù)。

2.3 什么是混淆

變量混淆、字符串混淆、屬性加密、控制流平坦化、調(diào)試保護(hù)和多態(tài)變異是一種理想且實(shí)用的JavaScript保護(hù)方案，可以使代碼變得難以閱讀和分析，同時(shí)不影響代碼的原有功能。

?? 變量混淆：將變量名、方法名、常量名隨機(jī)變?yōu)闊o意義的亂碼字符串，降低代碼可讀性。例如，將變量名轉(zhuǎn)換為單個(gè)字符或十六進(jìn)制字符串，使其更難被理解和解析。

?? 字符串混淆：將字符串集中放置，并進(jìn)行MD5或Base64編碼存儲(chǔ)，使代碼中不出現(xiàn)明文字符串。這樣做可以避免使用全局搜索字符串的方式來定位到代碼的入口點(diǎn)，增加代碼的安全性。

?? 屬性加密：對(duì)JavaScript對(duì)象的屬性進(jìn)行加密轉(zhuǎn)化，隱藏代碼之間的調(diào)用關(guān)系，使key-value的映射關(guān)系變得混淆。通過屬性加密，攻擊者難以追蹤代碼的調(diào)用路徑，提高了代碼的安全性。

?? 控制流平坦化：打亂函數(shù)原有的代碼執(zhí)行流程和函數(shù)調(diào)用關(guān)系，使代碼邏輯變得混亂無序。通過控制流平坦化，攻擊者難以理清代碼的執(zhí)行順序和流程，從而增加了閱讀和分析代碼的難度。

??? 調(diào)試保護(hù)：在代碼中加入一些強(qiáng)制調(diào)試debug語句，如無限debug、定時(shí)debug、debug關(guān)鍵字等。這樣，在調(diào)試模式下，代碼會(huì)出現(xiàn)異常或無法順利執(zhí)行，增加了攻擊者對(duì)代碼的調(diào)試難度。

?? 多態(tài)變異：每次JavaScript代碼被調(diào)用時(shí)，代碼自身會(huì)立即發(fā)生變異，變成與之前完全不同的代碼。通過多態(tài)變異，使代碼變化莫測(cè)，避免被動(dòng)態(tài)分析和調(diào)試。

綜合運(yùn)用上述保護(hù)手段，可以大幅提高JavaScript代碼的安全性，使攻擊者難以閱讀和分析代碼，同時(shí)確保代碼的原有功能不受影響。

2.4 什么是加密

JavaScript加密是對(duì)JavaScript混淆技術(shù)防護(hù)的進(jìn)一步升級(jí)，基本思路是將一些核心邏輯用C/C++語言來編寫，并通過JavaScript調(diào)用執(zhí)行，從而起到二進(jìn)制級(jí)別的防護(hù)作用，加密的方式主要有Emscripten和WebAssembly等。

1.Emscripten

Emscripten編譯器可以將C/C++代碼編譯成asm.js的JavaScript變體，再由JavaScript調(diào)用執(zhí)行，因此某些JavaScript的核心功能可以使用C/C++語言實(shí)現(xiàn)。

2.WebAssembly

WebAssembly也能將C/C++代碼轉(zhuǎn)成JavaScript引擎可以運(yùn)行的代碼，但轉(zhuǎn)出來的代碼是二進(jìn)制字節(jié)碼，而asm.js是文本，因此運(yùn)行速度更快、體積更小，得到的字節(jié)碼具有和JavaScript相同的功能，在語法上完全脫離JavaScript，同時(shí)具有沙盒化的執(zhí)行環(huán)境，利用WebAssembly技術(shù)，可以將一些核心的功能用C/C++語言實(shí)現(xiàn)，形成瀏覽器字節(jié)碼的形式，然后在JavaScript中通過類似如下的方式調(diào)用：

這種加密方式更加安全，想要逆向或破解需要逆向WebAssembly，難度極大。

2.5 工具介紹

2.5.1 壓縮混淆工具

• Uglifyjs（開源）：用NodeJS編寫的JavaScript壓縮工具，是目前最流行的JS壓縮工具，JQuery就是使用此工具壓縮，UglifyJS壓縮率高，壓縮選項(xiàng)多，并且具有優(yōu)化代碼，格式化代碼功能。

• jshaman：jshaman是一個(gè)商業(yè)級(jí)工具，看了很多社區(qū)的評(píng)論，這個(gè)目前是最好的，可以在線免費(fèi)使用，也可以購買商業(yè)版。

• jsfuck：開源的js混淆工具，原理比較簡單，通過特定的字符串加上下標(biāo)定位字符，再由這些字符替換源代碼，從而實(shí)現(xiàn)混淆。

• YUI Compressor：業(yè)界巨頭yahoo提供的一個(gè)前端壓縮工具，通過java庫編譯css或js文件進(jìn)行壓縮

2.5.2 反混淆工具

• jsbeautifier：jsbeautifier是一個(gè)為前端開發(fā)人員制作的Chrome擴(kuò)展，能夠直接查看經(jīng)過壓縮的Javascript代碼。

• UnuglifyJS：壓縮工具uglify對(duì)應(yīng)的解混淆工具。

• jspacker：用PHP編寫的壓縮工具，可以混淆代碼保護(hù)知識(shí)產(chǎn)權(quán)，產(chǎn)生的代碼兼容IE、FireFox等常用瀏覽器，國內(nèi)大部分在線工具網(wǎng)站都采用這種算法壓縮。

三、前端安全對(duì)抗

3.1 前端調(diào)試手法

3.1.1 Elements

Elements 面板會(huì)顯示目前網(wǎng)頁中的 DOM、CSS 狀態(tài)，且可以修改頁面上的 DOM 和 CSS，即時(shí)看到結(jié)果，省去了在編輯器修改、儲(chǔ)存、瀏覽器查看結(jié)果的流程。

有時(shí)候一些dom節(jié)點(diǎn)會(huì)嵌套很深，導(dǎo)致我們很難利用Element面板html代碼來找到對(duì)應(yīng)的節(jié)點(diǎn)。inspect(dom元素)可以讓我們快速跳轉(zhuǎn)到對(duì)應(yīng)的dom節(jié)點(diǎn)的html代碼上。

3.1.2 Console

Console對(duì)象提供了瀏覽器控制臺(tái)調(diào)試的接口，Console是一個(gè)對(duì)象，上面有很多方便的方法。

• console.log( )：最常用的語句，可以將變量輸出到瀏覽器的控制臺(tái)中，方便開發(fā)者調(diào)用JS代碼

• console.table( )：可用于打印obj/arr成表格

• console.trace( )：可用于debugger堆棧調(diào)試，方便查看代碼的執(zhí)行邏輯，看一些庫的源碼

• console.count( )：打印標(biāo)簽被執(zhí)行了幾次，預(yù)設(shè)值是default，可用在快速計(jì)數(shù)

• console.countReset( )：用來重置，可用在計(jì)算單次行為的觸發(fā)的計(jì)數(shù)

• console.group( )/console.groupEnd( )：

為了方便一眼看到自己的log，可以用console.group自定義message group標(biāo)簽，還可以多層嵌套，并用console.groupEnd來關(guān)閉Group。

3.1.3 JS斷點(diǎn)調(diào)試

JS斷點(diǎn)調(diào)試，即在瀏覽器開發(fā)者工具中為JS代碼添加斷點(diǎn)，讓JS執(zhí)行到某一特定位置停住，方便開發(fā)者對(duì)該處代碼段進(jìn)行分析與邏輯處理。

Sources面板

① 普通斷點(diǎn)（breakpoint）

給一段代碼添加斷點(diǎn)的流程是：“F12（Ctrl + Shift + I）打開開發(fā)工具”->“點(diǎn)擊Sources菜單”->"左側(cè)樹中找到相應(yīng)文件"→"點(diǎn)擊行號(hào)列"即完成在當(dāng)前行添加/刪除斷點(diǎn)操作。當(dāng)斷點(diǎn)添加完畢后，刷新頁面JS執(zhí)行到斷點(diǎn)位置停住，在Sources界面會(huì)看到當(dāng)前作用域中所有變量和值。

• 恢復(fù)（Resume）： 恢復(fù)按鈕(第一個(gè)按鈕)，繼續(xù)執(zhí)行，快捷鍵 F8，繼續(xù)執(zhí)行，如果沒有其他的斷點(diǎn)，那么程序就會(huì)繼續(xù)執(zhí)行，并且調(diào)試器不會(huì)再控制程序。

• 跨步（Step over）：運(yùn)行下一條指令，但不會(huì)進(jìn)入到一個(gè)函數(shù)中，快捷鍵 F10。

• 步入（Step into）：快捷鍵 F11，和“下一步（Step）”類似，但在異步函數(shù)調(diào)用情況下表現(xiàn)不同，步入會(huì)進(jìn)入到代碼中并等待異步函數(shù)執(zhí)行。

• 步出（Step out）：繼續(xù)執(zhí)行到當(dāng)前函數(shù)的末尾，快捷鍵 Shift+F11，繼續(xù)執(zhí)行代碼并停止在當(dāng)前函數(shù)的最后一行，當(dāng)我們使用偶然地進(jìn)入到一個(gè)嵌套調(diào)用，但是我們又對(duì)這個(gè)函數(shù)不感興趣時(shí)，我們想要盡可能的繼續(xù)執(zhí)行到最后的時(shí)候是非常方便的。

• 下一步（Step）：運(yùn)行下一條語句，快捷鍵 F9，一次接一次地點(diǎn)擊此按鈕，整個(gè)腳本的所有語句會(huì)被逐個(gè)執(zhí)行，下一步命令會(huì)忽略異步行為。

啟用/禁用所有的斷點(diǎn)：這個(gè)按鈕不會(huì)影響程序的執(zhí)行。只是一個(gè)批量操作斷點(diǎn)的開/關(guān)。

• 察看（Watch）：顯示任意表達(dá)式的當(dāng)前值

• 調(diào)用棧（Call Stack）：顯示嵌套的調(diào)用鏈

• 作用域（Scope）：顯示當(dāng)前的變量

• Local：顯示當(dāng)前函數(shù)中的變量

• Global：顯示全局變量

② 條件斷點(diǎn)（Conditional breakpoint）

給斷點(diǎn)添加條件，只有符合條件時(shí)，才會(huì)觸發(fā)斷點(diǎn)，條件斷點(diǎn)的顏色是橙色。

③ 日志斷點(diǎn)（logpoint）

當(dāng)代碼執(zhí)行到這里時(shí)，會(huì)在控制臺(tái)輸出你的表達(dá)式，不會(huì)暫停代碼執(zhí)行，日志斷點(diǎn)式粉紅色。

debugger命令

通過在代碼中添加"debugger;"語句，當(dāng)代碼執(zhí)行到該語句的時(shí)候就會(huì)自動(dòng)斷點(diǎn)，之后的操作和在Sources面板添加斷點(diǎn)調(diào)試，唯一的區(qū)別在于調(diào)試完后需要?jiǎng)h除該語句。

在開發(fā)中偶爾會(huì)遇到異步加載html片段（包含內(nèi)嵌JS代碼）的情況，而這部分JS代碼在Sources樹中無法找到，因此無法直接在開發(fā)工具中直接添加斷點(diǎn)，那么如果想給異步加載的腳本添加斷點(diǎn)，此時(shí)"debugger;"就發(fā)揮作用了。

3.2 反調(diào)試手段

3.2.1 禁用開發(fā)者工具

監(jiān)聽是否打開開發(fā)者工具，若打開，則直接調(diào)用JavaScript的window.close( )方法關(guān)閉網(wǎng)頁

① 監(jiān)聽F12按鍵、監(jiān)聽Ctrl+Shift+I（Windows系統(tǒng)）組合鍵、監(jiān)聽右鍵菜單，監(jiān)聽Ctrl+s禁止保存至本地，避免被Overrides。

<script>
 
    //監(jiān)聽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";
        }
 
    };
 
    //監(jiān)聽右鍵菜單
    document.oncontextmenu = function () {
        window.close();
        window.location = "about:blank";
    };
</script>

② 監(jiān)聽窗口大小變化

<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>
 
    //控制臺(tái)打開的時(shí)候回調(diào)方法
    function consoleOpenCallback(){
        window.close();
        window.location = "about:blank";
        return "";
    }
 
    //立即運(yùn)行函數(shù)，用來檢測(cè)控制臺(tái)是否打開
    !function () {
        // 創(chuàng)建一個(gè)對(duì)象
        let foo = /./;
        // 將其打印到控制臺(tái)上，實(shí)際上是一個(gè)指針
        console.log(foo);
        // 要在第一次打印完之后再重寫toString方法
        foo.toString = consoleOpenCallback;
    }()
</script>

3.2.2 無限debugger反調(diào)試

① 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 破解反調(diào)試手段

3.3.1 禁用開發(fā)者工具

針對(duì)判斷是否打開開發(fā)者工具的破解方式很簡單，只需兩步就可以搞定。

① 將開發(fā)者工具以獨(dú)立窗口形式打開

② 打開開發(fā)者工具后再打開網(wǎng)址

3.3.2 無限debugger

針對(duì)無限debugger反調(diào)試，有以下破解方法

① 直接使用dubbger指令的，可以在Chrome找到對(duì)應(yīng)行（格式化后），右鍵行號(hào)，選擇Never pause here即可。

② 使用了constructor構(gòu)造debugger的，只需在console中輸入以下代碼后，點(diǎn)擊F8（Resume script execution）回復(fù)js代碼執(zhí)行即可（直接點(diǎn)擊小的藍(lán)色放行按鈕即可）。

Function.prototype.constructor=function(){}

③ 使用了Function構(gòu)造debugger的，只需在console中輸入以下代碼。

Function = function () {}

3.4 總結(jié)

JavaScript混淆加密是一種有效的代碼保護(hù)手段，可以使代碼變得更難被反編譯和分析，提高代碼的安全性。通過對(duì)代碼進(jìn)行變量混淆、字符串混淆、屬性加密、控制流平坦化、調(diào)試保護(hù)和多態(tài)變異等操作，可以增加代碼的復(fù)雜性和難以理解性，降低攻擊者入侵的成功率。

然而，需要注意的是，JavaScript混淆加密并不能完全保護(hù)代碼不被反編譯和分析。如果攻擊者具備足夠的時(shí)間和資源，仍然可以花費(fèi)精力來理解和分析代碼，并找到其中的漏洞。在技術(shù)發(fā)展的道路上，攻防雙方一直在不斷較量，沒有絕對(duì)的安全性可言。因此，我們能做的是盡量拖延被破解的時(shí)間，提高攻擊者攻破代碼的難度。

為了進(jìn)一步保護(hù)代碼的安全，建議避免在前端代碼中嵌入敏感信息或業(yè)務(wù)邏輯，將關(guān)鍵性的處理和數(shù)據(jù)操作移至后端進(jìn)行，采取合理的權(quán)限驗(yàn)證和加密傳輸?shù)却胧C合應(yīng)用多層次的安全策略來提高系統(tǒng)的整體安全性。

標(biāo)簽：JavaScript混淆，代碼保護(hù)，安全性，反編譯，分析，攻擊者，漏洞，拖延破解時(shí)間，敏感信息，業(yè)務(wù)邏輯，權(quán)限驗(yàn)證，加密傳輸，安全策略文章來源地址http://www.zghlxwxcb.cn/news/detail-811332.html

到了這里，關(guān)于【安全策略】前端 JS 安全對(duì)抗&瀏覽器調(diào)試方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！