upload-lab 的第一關設計了一個簡單的文件上傳表單，前端通過JavaScript 進行文件擴展名驗證。只有特定類型的文件（如 .jpg, .png 等）可以通過驗證并上傳。我們的目標是繞過前端驗證，上傳一個包含惡意代碼的文件。 下圖是第一關的源碼：

前端驗證上傳文件類型

了解前端驗證

首先，打開第一關的頁面，查看文件上傳表單的 HTML 代碼和 JavaScript 代碼。通常可以通過瀏覽器的開發者工具F12來查看頁面源代碼和調試 JavaScript。

查看源碼

可以看到，checkFile 函數在表單提交時會檢查文件的擴展名。如果擴展名不在允許的范圍內，文件上傳會被阻止。

繞過前端驗證

要繞過前端驗證，可以通過以下幾種方法：

• 禁用 JavaScript：在瀏覽器中禁用 JavaScript，然后重新加載頁面并上傳文件。這種方法簡單直接，但在實際場景中并不總是可行。
• 修改 HTML 代碼：使用瀏覽器的開發者工具修改頁面代碼，去掉或修改驗證函數。例如，將notallow="return checkFile()"改為 notallow="return true"。
• 直接發送請求：使用工具如 BurpSuite 或 Postman 直接向服務器發送文件上傳請求，繞過前端驗證。

實踐繞過驗證

我們選擇使用開發者工具修改HTML代碼。具體步驟如下：

(1) 打開瀏覽器的開發者工具F12

(2) 找到并選中 <form> 標簽，修改 onsubmit 屬性為 return true,或者，直接把這個onsubmit 函數調用刪除。下圖是把onsubmit修改為return true。

刪除前端文件校驗

(3) 選擇要上傳的文件，例如，一個名為 shell.php 的惡意文件，內容如下：

<?php phpinfo(); ?>

(4) 提交表單，上傳成功如下圖所示：

webshell上傳成功

上傳成功后，通過瀏覽器的返回結果得到webshell的存儲位置，訪問webshell，如下圖：

展示PHPinfo信息

詳細的展示了當前PHP的所有信息。這樣就把webshell上傳成功了。

總結

通過上述步驟，我們成功繞過了 upload-lab 第一關的前端驗證，上傳了一個包含惡意代碼的文件。這展示了前端驗證的不可靠性，強調了在實際開發中必須在服務器端實施嚴格的文件類型和內容檢查。