acceptでPNGだけにすれば安全？ファイル選択のヒントと検証を分けよう

ファイル入力欄へaccept="image/png"を付けた。これでPNG以外は絶対に届かない、と考えてよいかな。選択画面の案内と、受け取るデータの検証は分ける必要があるよ。

このページでは、練習用のPNGとテキストを使う。作例はファイル名などをページ内へ表示するだけで、ファイルの中身を読み取ったり、サーバーへ送信したりしない。

acceptは、選びやすくするヒント

<input type="file" accept=".png,image/png">

acceptには、拡張子やメディアタイプなど、選択する種類の手掛かりを指定できる。PNGを選んでほしいときに、ブラウザの選択画面で候補を絞る助けになる。

ただし、MDNはacceptがファイル形式を検証するものではないと説明している。選択画面でほかの種類を表示できる場合などもあり、この属性だけを安全性の境界にしないようにしよう。

練習用ファイルで確かめる

小さなPNGを開く、練習用テキストを開くから、必要なものを自分の端末へ保存して試せる。実際の個人資料を選ぶ必要はないよ。

1. 作例で、PNGを案内する指定が有効になっていることを見る。
2. 練習用PNGを選び、ファイル名とブラウザが示す種類を確認する。
3. 指定を外して、練習用テキストも選んでみる。
4. 表示されるHTMLの入力条件の結果と、形式を検査した結果が別だと読む。
5. リセットで、選択していない状態へ戻す。

選択画面の見え方はOSやブラウザによって違う。練習のために、ほかのアプリの設定を変更する必要はないよ。

ブラウザの入力条件だけでは分からない

編集部ではブラウザのテスト操作で、PNGのaccept指定がある欄へテキストファイルも設定でき、入力条件の確認が通ることを確かめた。これはOSのファイル選択画面を手動で比較した結果ではない。

作例のcheckValidityは、HTMLの入力条件に関する確認。PNGのファイル構造を解析し、安全だと判定した意味ではないんだ。

名前と種類も、そのまま信じない

ファイル名が.pngで終わることや、ブラウザが示すメディアタイプだけで、中身が本当に想定形式かは確定しない。拡張子の変更は、画像への変換とは違うよ。

実際の受信機能では、形式に加えて容量、件数、保存方法なども設計する。画面の指定を追加しただけで、サーバー側の条件を省略しないようにしよう。

ファイルの種類は拡張子と形式、容量の制限は413エラーへ。

参照した公式資料

• MDN：accept attribute

確認日：2026年10月26日。