enctype="multipart/form-data"の罠！ファイルアップロード時のセキュリティ対策

2024-04-02

HTMLフォームでファイルアップロードを実現するenctype="multipart/form-data"

Webフォームでファイルをアップロードするには、<form>要素にenctype属性をmultipart/form-dataに設定する必要があります。これは、ブラウザに送信するデータの種類を指定するために使用されます。

enctype属性は、form要素内のデータのエンコード方式を指定します。

application/x-www-form-urlencoded: テキストデータのみを送信する場合
multipart/form-data: テキストデータとバイナリデータ（ファイル）を送信する場合
text/plain: テキストデータのみを送信する場合（デフォルト）

multipart/form-dataは、テキストデータとバイナリデータを混合して送信する際に使用されます。これは、ファイルアップロードなどのケースで必要となります。

multipart/form-dataでは、送信するデータは境界文字列と呼ばれる特殊な文字列で区切られます。境界文字列は、"--"とランダムな文字列の組み合わせで構成されます。

例

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="text" name="name" value="John Doe">
  <input type="file" name="file">
  <input type="submit" value="送信">
</form>

上記の例では、nameとfileという2つのフィールドを送信しています。nameフィールドはテキストデータ、fileフィールドはバイナリデータです。

送信されるデータ

上記の例の場合、送信されるデータは以下のようになります。

--boundary
Content-Disposition: form-data; name="name"

John Doe
--boundary
Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain

This is a test file.
--boundary--

enctype="multipart/form-data"は、Webフォームでファイルアップロードを実現するために必要な属性です。この属性を指定することで、ブラウザはテキストデータとバイナリデータを混合して送信することができます。

補足

enctype属性は、form要素だけでなく、input要素にも使用できます。
multipart/form-dataは、ファイルアップロード以外にも、複数のテキストデータをまとめて送信する場合にも使用できます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ファイルアップロード</title>
</head>
<body>
  <h1>ファイルアップロード</h1>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="送信">
  </form>
</body>
</html>

upload.php

<?php

// アップロードされたファイルの処理

$file_name = $_FILES['file']['name'];
$file_tmp_name = $_FILES['file']['tmp_name'];

// ファイルを保存
move_uploaded_file($file_tmp_name, 'uploads/' . $file_name);

// アップロード成功メッセージを表示
echo 'ファイルがアップロードされました。';

?>