前提
フロントエンド: React
バックエンド: FastAPI
Webサーバー: nginx
インフラ: AWS EC2でホスティング
機能概要:
ユーザーがCSVファイルをアップロードし、バックエンドで必要な処理を実行します。
結論
- SSL化していないとサイトへのファイルのアップロードがRESULT_CODE_KILLED_BAD_MESSAGE エラーでできない(できるブラウザもあるが、メインどころはできない)
- WEBサイト・サービスはSSL化しましょう
発生した事象
数日前までドラッグ&ドロップが普通にできていましたが、2024年11月13日頃からドラッグ&ドロップをした際にエラーが発生するようになりました。
エラー内容は、RESULT_CODE_KILLED_BAD_MESSAGEと表示されていました。
これはブラウザで発生しているエラーでバックエンドにリクエスト自体が飛んでいませんでした。
原因を調べる
何が起きているのかよく分からず、試行錯誤しました。
Chrome, Edge, safariで同様の事象が確認されましたが、Braveブラウザではこの問題は出ませんでした。
ローカルでサーバーを起動して、ローカルサーバーを起動した際はChrome, Edge, safariでドラッグ&ドロップでのアップロードができました。
こちらの設定などを何も変えず、ブラウザで挙動が変わることを確認できたのでブラウザの設定の何かだろうと思いました。特に、ローカルで動かした時には動いたのでよく分かりません。
そんな時に、ブラウザで「保護されていない通信」という文字が目に止まり、SSL化してないことが原因なんじゃね？と思いました。
SSL化してみた
今回はホスティングをEC2でやっているので、Route53でドメインの取得と証明書の発行をしました。
そしてALBでSSL化をしてみました。
問題解決!!
SSLを2日くらいかけてやってみたら、解決しました。
おそらくSSL化されていないサイトの場合、ブラウザがセキュリティでファイルのアップロードをブロックしていたのだと思います。
結論
やっぱり今の時代SSL化してないと、ローカルでは動いても
本番環境ではブラウザがブロックしてしまうことがあるようです。
今回SSL化の手順もある程度勉強できたので、これからはWEBに公開するときはSSL化しようと思いました。