javascript - FormData を介して BLOB を使用してドキュメントをアップロードしているときに、醜い要求ペイロードが発生しました

Question

FormData に BLOB を次のように追加しています。

const formData = new FormData();
formData.append('xyz', blob);

この BLOB をアップロードしているときに、次のような醜いペイロードが表示されました (この醜いデータは長すぎてここに表示できません)。

Content-Disposition: form-data; name="xyz"; filename="xyz.png"
Content-Type: image/png

PNG


IHDRà5ÑÜä IDATx^\½i\i¥g¾/A23««» ÂHh©×ZÔ=ÐHúÿ¿@ôQ½Õ$cñݯð<ÇÞ %öp²2Ép¿÷]l9vìØì¿ÿoÿvº\¯õ°¨ût¯óý\÷ºÖz»ªé~©UÝk5j9¿×v³ªÏ_¾Ôùr­Ù|UëÕ¶f³y]n׺MתùTóÅTÓt«ÛíR󥶫}}Ø.....

------WebKitFormBoundary1wDstGejHPb3PhBI

サーバーがこのファイルのアップロードをブロックしているため、HTTP 403 Forbiddenエラーが発生します。AWS WAFを使用してサーバー側で適用されるいくつかのルールがあるため。これらのルールは、re:SQL インジェクション、XSS などです。

これらのルールは、この醜いペイロードのためにリクエストをブロックしていると思います.基本的なファイルオブジェクト(BLOBではない)を追加すると、403エラーは発生しません! ファイル オブジェクトで適切に動作し、このエラーは BLOB アップロードでのみ発生します。

あなたの考えと予防法を教えてください！