Web安全與防護(hù) （微課版） 課件 06-1 項(xiàng)目六 任務(wù)一 構(gòu)造簡(jiǎn)單的文件上傳

項(xiàng)目六

安全的文件上傳Web安全與防護(hù)本任務(wù)要點(diǎn)學(xué)習(xí)目標(biāo)什么是文件上傳實(shí)現(xiàn)簡(jiǎn)單的文件上傳文件上傳的原理理解文件上傳的基本概念和用途。掌握文件上傳的基本實(shí)現(xiàn)步驟。了解防護(hù)文件上傳的安全風(fēng)險(xiǎn)任務(wù)一

什么是文件上傳目錄CONTENTS01/什么是文件上傳02/簡(jiǎn)單的文件上傳03/文件上傳的類(lèi)型04/文件上傳的數(shù)據(jù)存儲(chǔ)05/文件上傳的三階段什么是文件上傳01圖片上傳文檔上傳音頻上傳視頻上傳其他類(lèi)型文件上傳是指將本地的文件通過(guò)網(wǎng)絡(luò)傳輸?shù)椒?wù)器或其他設(shè)備的過(guò)程。通俗的說(shuō)就是將你的電腦或手機(jī)上的文件，比如圖片、文檔、音樂(lè)等，通過(guò)網(wǎng)絡(luò)發(fā)送給服務(wù)器或其他設(shè)備，這樣就可以在其他地方訪(fǎng)問(wèn)或下載這些文件。舉個(gè)例子，如果你想把你的照片分享給朋友，你可以用微信或QQ等軟件上傳照片，然后發(fā)送給對(duì)方，對(duì)方就可以看到你的照片了。文件上傳有不同的類(lèi)型，主要取決于你上傳的文件是什么格式和大小。簡(jiǎn)單的文件上傳02demonstration/study_upload01.php在實(shí)現(xiàn)文件上傳的第一步是創(chuàng)建文件上傳頁(yè)，該頁(yè)面允許用戶(hù)上傳不同類(lèi)型的文件。創(chuàng)建上傳頁(yè)面：首先創(chuàng)建一個(gè)頁(yè)面，允許用戶(hù)上傳文件。判斷請(qǐng)求方法：使用if語(yǔ)句檢查請(qǐng)求方法是否為POST。獲取文件信息：文件名：獲取上傳的文件名，存入$fileName。臨時(shí)路徑：獲取臨時(shí)文件路徑，存入$fileTmpName。文件大小和類(lèi)型：分別存入$fileSize和$filetype設(shè)置上傳目錄：指定文件保存的目錄為“uploads/”，賦值給$targetDir。構(gòu)造完整路徑：將目錄和文件名結(jié)合，形成$targetFilePath。移動(dòng)文件：使用move_uploaded_file將文件移至目標(biāo)路徑成功：輸出“文件上傳成功”。失敗：輸出“上傳文件失敗”。簡(jiǎn)單的文件上傳02代碼的第二部分是一個(gè)HTML表單，用于讓用戶(hù)選擇要上傳的文件，并提交到服務(wù)器。屬性說(shuō)明action指定表單提交的目標(biāo)頁(yè)面，這里是uploader.php，即本頁(yè)面。method指定表單提交的方法，這里是POST。enctype指定表單數(shù)據(jù)的編碼類(lèi)型，這里是multipart/form-data，必須設(shè)置為這個(gè)值才能上傳文件。inputtype=“file”用于讓用戶(hù)選擇要上傳的文件，name屬性指定了文件數(shù)據(jù)的鍵名，這里是fileToUpload。inputtype=“submit”用于讓用戶(hù)提交表單，val

ue屬性指定了按鈕上顯示的文字，這里是“上傳文件”。由此就構(gòu)成了一個(gè)簡(jiǎn)單的文件上傳，然而這段代碼的文件上傳漏洞是沒(méi)有對(duì)上傳文件的類(lèi)型和內(nèi)容進(jìn)行任何驗(yàn)證，這可能導(dǎo)致惡意用戶(hù)上傳可執(zhí)行的代碼文件，例如PHP、ASP或JSP等，然后通過(guò)訪(fǎng)問(wèn)這些文件來(lái)執(zhí)行任意的命令或代碼，從而對(duì)服務(wù)器造成破壞或泄露敏感信息。文件上傳的類(lèi)型03文件上傳是前端不能直接操作本地文件，必須要用戶(hù)來(lái)觸發(fā)，一般有以下3種觸發(fā)方式（1）通過(guò)文件選擇按鈕選擇本地文件（2）通過(guò)拖拽的方式把文件拖進(jìn)來(lái)（3）在編輯框里復(fù)制粘貼文件上傳的數(shù)據(jù)存儲(chǔ)04

文件上傳數(shù)據(jù)的存儲(chǔ)是指請(qǐng)求端和接收端如何交換和保存文件數(shù)據(jù)的過(guò)程。一般來(lái)說(shuō)，請(qǐng)求端提供了一個(gè)表單，用戶(hù)可以選擇要上傳的文件，然后提交請(qǐng)求。請(qǐng)求端會(huì)將文件數(shù)據(jù)和其他表單信息編碼并上傳至接收端，接收端將上傳的內(nèi)容進(jìn)行解碼，提取出HTML表單中的信息，將文件數(shù)據(jù)存入指定的位置。文件上傳的三階段051）前端準(zhǔn)備階段：前端準(zhǔn)備階段是指在請(qǐng)求端中，用戶(hù)選擇要上傳的文件，然后進(jìn)行格式化和預(yù)處理。在這個(gè)階段中，前端需要獲取用戶(hù)選擇的文件，通常可以通過(guò)input標(biāo)簽和type屬性設(shè)置為File來(lái)實(shí)現(xiàn)。用戶(hù)選擇文件后，前端需要將文件轉(zhuǎn)換為Blob或者File對(duì)象，F(xiàn)ile對(duì)象會(huì)包含文件的一些元信息，比如文件名、大小、類(lèi)型等。在上傳之前，前端可能還需要對(duì)文件進(jìn)行壓縮、加密、格式轉(zhuǎn)換等操作，以便于上傳。最后，前端需要將文件數(shù)據(jù)封裝成multipart/form-data的類(lèi)型，并發(fā)送HTTP請(qǐng)求到接收端。文件上傳的三階段052）請(qǐng)求發(fā)送階段：請(qǐng)求發(fā)送階段是指前端將文件數(shù)據(jù)封裝成HTTP請(qǐng)求，然后發(fā)送給后端的過(guò)程。在這個(gè)階段中，前端需要按照multipart/form-data規(guī)范將文件數(shù)據(jù)封裝成請(qǐng)求體，并設(shè)置相應(yīng)的請(qǐng)求頭信息，如Content-Type、Content-Disposition等。其中，Content-Type用于指定請(qǐng)求體的類(lèi)型為multipart/form-data，boundary用于分割請(qǐng)求體的不同部分；Content-Disposition用于指定每個(gè)部分的類(lèi)型，名稱(chēng)和文件名等元信息。在發(fā)送請(qǐng)求時(shí)，前端可以使用XMLHttpRequest對(duì)象或FetchAPI來(lái)發(fā)送HTTP請(qǐng)求。文件上傳的三階段05

3）后端處理階段：后端處理階段是指接收端接收到請(qǐng)求后，對(duì)請(qǐng)求進(jìn)行解析和處理的過(guò)程。在這個(gè)階段中，接收端需要按照multipart/form-data規(guī)范解析請(qǐng)求體，并解析每個(gè)部分的元數(shù)據(jù)和數(shù)據(jù)。對(duì)于文件上傳，后端需要將上傳的文件保存到服務(wù)器上，通常可以使用Node.js的fs模塊或第三方庫(kù)如multer等來(lái)實(shí)現(xiàn)。在文件上傳過(guò)程中，后端需要進(jìn)行文件大小、類(lèi)型、格式等的校驗(yàn)，以避免上傳非法文件或造成服務(wù)器負(fù)擔(dān)過(guò)重的情況。最后，后端需要返回相應(yīng)的響應(yīng)結(jié)果給前端，以告知上傳是否成功。課堂實(shí)踐一、任務(wù)名稱(chēng)：文件上傳功能實(shí)現(xiàn)二、任務(wù)內(nèi)容：使用PHP代碼編寫(xiě)一個(gè)簡(jiǎn)單的文件上傳功能，嘗試對(duì)各種類(lèi)型的文件進(jìn)行上傳，分析文件上傳功能的原理三、工具需求：PHP開(kāi)發(fā)環(huán)境四、任務(wù)要求：完成實(shí)踐練習(xí)后，由老師檢查完成情況。課堂思考一、什么是文件上傳？二、文件上傳中，為什么需要進(jìn)行格式轉(zhuǎn)換或預(yù)處理？三、思考一個(gè)簡(jiǎn)單的文件上傳的PHP代碼的工作原理。四、文件上傳的三階段分別是什么？每個(gè)階段主要完成哪些任務(wù)？課