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

前端驗證上傳文件類型

了解前端驗證

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

查看源碼

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

繞過前端驗證

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

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

實踐繞過驗證

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

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

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

刪除前端文件校驗

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

<?php phpinfo(); ?>

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

webshell上傳成功

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

展示PHPinfo信息

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

總結

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