【Bubble】ファイルアップローダーの拡張子を制限しよう

拡張子を制限する理由

アップロードされるファイル形式が適切に制限されていない場合、画像ファイル以外のファイルがサーバーに設置されることにより、サイトの改竄やサーバーの乗っ取りといった攻撃が行われる危険性があります。

またサーバーの容量には上限があるので、関係のないファイルで容量を消費してしまうことになります。

本記事では、Bubbleでファイルアップローダーの拡張子を制限する方法について解説します。

拡張子制限の具体的な手順

1. 外観の用意

まずFile UploaderとAlertをグループの中に入れます。

2. set stateの作成

FileUploaderのset statesを以下のように設定します。

アラートでファイルタイプがpng,jpgでなかった場合、「ファイルタイプが許可されていません。アップロードできるファイルのタイプは：.png,.jpg」と表示します。

3. ワークフローの指定

FileUploaderの値が変更されたときの、ワークフローを設定します。

[^.]*$は、ファイル名の末尾にある拡張子を抽出するための正規表現です。

• 「^ 」は文字列の先頭を表します。
• 「. 」は、任意の1文字を表します。
• 「*」は、直前の文字が0回以上繰り返し出現することを表します。
• 「$ 」は文字列の末尾を表します。

次に、ストレージを削減するために、ファイルを削除します。

ファイルタイプが許可されていないことをユーザーに伝えるためのアラートを表示します。

4. 動作確認

それでは、異なる拡張子のファイルをアップロードして動作確認を行います。

print.pyファイルをアップロードします。

.pyファイルは、.png,.jpgファイルでないので、ファイルが削除されアラートが表示されます。

.jpgファイルをアップロードした場合は、アラートが表示されず、アップロードできています。