ホームページ >ウェブフロントエンド >jsチュートリアル >ファイルをアップロードする前にブラウザが MIME タイプを確実にチェックするにはどうすればよいですか?

ファイルをアップロードする前にブラウザが MIME タイプを確実にチェックするにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-02 04:12:14222ブラウズ

How Can Browsers Reliably Check MIME Types Before File Upload?

ブラウザ側の MIME チェックの仕組みとそれが難しい理由

JavaScript はアップロード前にファイルの MIME タイプを決定できますが、それらを検証しますセキュリティのためにサーバー側にあります。

ステップ 1: 使用しますFileReader API

ファイル情報を取得するには:

var files = document.getElementsByTagName('input')[0].files;
console.log(files[0].type);

ステップ 2: MIME タイプを抽出する

方法 1: を使用するBlob (ファイルによって騙される可能性があります)拡張子)

console.log(files[0].type);

方法 2: ヘッダー検査 (より信頼性の高い)

var fileReader = new FileReader();
fileReader.onloadend = function(e) {
  var header = (new Uint8Array(e.target.result)).subarray(0, 4).toString(16);
  switch (header) {
    case "89504e47":
      type = "image/png";
      break;
    case "47494638":
      type = "image/gif";
      break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      type = "image/jpeg";
      break;
    default:
      type = "unknown";
      break;
  }
};
fileReader.readAsArrayBuffer(files[0]);

注:

  • ファイル拡張子は偽装される可能性があるため、ヘッダー検査はさらに重要です信頼性があります。
  • マジック ナンバーはファイルの種類によって異なる場合があります。
  • セキュリティのためには、サーバー側の検証が依然として不可欠です。

以上がファイルをアップロードする前にブラウザが MIME タイプを確実にチェックするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。