前言

在 Day 04 中，我們看到了直接將 Flag 拆碎放在 JavaScript 原始碼中的荒謬情況。然而，有些網站開發者稍微聰明一點點：他們不會把明碼放著，而是會將輸入的密碼進行 Base64 編碼、雜湊（Hash）或是簡單的數學運算後再做比對。

今天我們要透過 PicoCTF 的 login 題目，示範當前端試圖用簡單的 JS 加密來保護密碼時，攻擊者如何還原加密邏輯，甚至直接在 DevTools Console 中執行逆向腳本一秒拿 Flag！

本日目標

透過 PicoCTF 實戰，掌握以下核心技能：

1. 掌握常見的前端加密與編碼手法（如 btoa() / Base64）。
   
2. 學會運用 DevTools Console（控制台）即時除錯（Debug）與呼叫前端 JS 函式以繞過驗證。

實戰題目：PicoCTF - login

• 題目分類： Web Exploitation
• 題目敘述： 網頁提供了一個看似正規的登入表單，輸入錯誤的帳密會提示登入失敗。
  

1. 解題思維

1. 打開頁面後先嘗試隨意輸入帳號密碼並點擊 Submit，觀察網頁是否有發出網路請求（Network Request）。
   
   
2. 若沒有發出請求，說明驗證邏輯依然在前端。開啟 F12 找到負責處理登入事件的 .js 檔案。
3. 分析 JavaScript 中的加密邏輯，並透過逆向解密取得真正的 Flag。

2. 實戰步驟

步驟一：尋找關鍵 JavaScript 程式碼

1. 在網頁任意空白處點擊右鍵，選擇 「檢視網頁原始碼」（或按快捷鍵 Ctrl + U）。
2. 在 <script> 標籤內直接找到了處理表單監聽與驗證的完整邏輯：
   
3. 找到網頁載入的腳本檔（如 index.js），找到表單監聽器與驗證邏輯：
   

步驟二：解密與還原（Console 實戰）

觀察程式碼，可以發現網頁把我們輸入的密碼經由btoa()處理並去除等號（=）後，與這串 Base64 字串比對：

cGljb0NURnt1M3J2M3JfNTNydj3JN3XUzcnYzc181M3J2M3JfNTNydjNyfQ

由於Base64只是編碼而非不可逆加密，且Base64長度需為 4 的倍數，我們補上填補符號==後按 F12 切換到DevTools的Console（主控台），使用atob()函式進行解碼：
atob("cGljb0NURnt1M3J2M3JfNTNydj3JN3XUzcnYzc181M3J2M3JfNTNydjNyfQ==")

按下 Enter 後，主控台便會直接印出解碼後的字串！
Flag:picoCTF{53rv3r_53rv3r_53rv3r_53rv3r_53rv3r}