ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

Bubbleのちょっと怖い話②API編~API Workflow、API Connectorの注意点~

こんにちは!今回は、セキュリティ等の観点からBubbleで気を付けたいことをご紹介する「Bubbleのちょっと怖い話」シリーズの第二弾です。今回は外部サービスとの連携や機能の拡張に便利なAPI WorkflowとAPI Connectorを取り上げます。

API Workflow、API ConnectorはBubbleで構築したアプリの幅を広げるために重要な存在ですよね。ですが、それぞれあまり知られていない注意点があるので、今回はそれらを中心にご紹介します。

1. API Workflow

まずはAPI Workflowのセキュリティの注意点をご紹介します。

1.1. API Workflowの概要

Bubbleでアプリを開発していると、「Backend Workflow」と「API Workflow」という2つの言葉に出くわすことと思います。この2つの違いをまずは整理しておきましょう。

  • API Workflow…アプリ内のスケジュール設定や外部アプリからの呼び出しで実行できる、Bubbleの組み込みAPI。全てがサーバーサイドで実行され、アプリを閉じていても実行できます。アプリエディタ > Backend Workflowタブで作成します。
  • Backend Workflow…Bubbleでは過去にBackend WorkflowのことをAPI Workflowと呼んでいた時期もあり、少しややこしい印象があるかもしれませんが、Backend Workflowとは、アプリエディタ > Backend Workflowタブで作成できる様々なWorkflowを指します。API Workflow、Recurring Events、Custom Events、Database Triggerなどがあります。

API Workflowを含めBackend Workflowを作成するには、まずエディタ > Setings > APIタブで「Enable Workflow API and backend workflows」をチェックして有効化する必要があります。

有効化するとページ一覧でBackend Workflowタブが表示されるのでクリックして開きます。

今回紹介するAPI Workflowは、Backend WorkflowタブのClick here to add a backend workflow > 「New API workflow」をクリックして作成します。

1.2. API Workflow作成時のセキュリティポイント

API Workflowを作成する際に気を付けるべき設定項目は3点あります。

1つ目は「Expose as a public API workflow」です。チェックするとこのBubbleエディタの外部からのAPIの呼び出しを許可することになります。別のBubbleアプリや外部サービスから呼び出したい場合にチェックします。作成したAPI Workflowをこのアプリ内でしか使わない場合はチェックする必要はありません。

2つ目は「This workflow can be run without authentication」です。チェックすると、このWorkflowを認証なしで実行できるようになります。通常は管理者APIトークンを介して実行できるように作成しますが、特にそのような設定をしていない場合誰でも認証されることなく実行できるようになります。実行時にユーザーのログインやトークンが必要な場合はこちらのチェックを外します。認証に失敗したらAPIを終了します。

3つ目は「Ignore privacy rules when running the workflow」です。チェックすると、Data Typeごとに設定したPrivacyルールを無視して実行し、誰でもデータ取り扱えることになります。設定したPrivacyルールを適用して実行したい場合はチェックを外します。

1.3. API Workflowエンドポイントが閲覧できるページ:/meta

API Workflow作成時とは別で、API Workflowをアプリに実装するにあたって注意するべきことがあります。作成したAPI Workflowの情報はアプリの/metaというページで閲覧できるということです。

Bubbleで作成したアプリは全てhttps://BUBBLEAPPNAME.bubbleapps.io/api/1.1/metaというページを持っています。このページでは、アプリのAPI Workflowのうち、「Expose as a public API workflow」をチェックしたものの情報が閲覧できます。下記は一例ですが、各API Workflowのエンドポイント名、パラメータ、認証の有無などの設定内容が閲覧できますね。

特に注意すべき点はauth_necessaryです。ここでは、「This workflow can be run without authentication」の設定有無が確認できます。API Workflow「meta_test」で「This workflow can be run without authentication」をチェックした通り"auth_unecessary": trueとなっており、認証不要と設定したことがバレバレです。

/metaページでAPI Workflowの情報が確認できること、"auth_unecessary": trueが認証不要だということが分かる人は、そのAPIを外部から自由に呼び出せてしまいます。

ちなみに、/metaページではAPI Workflowの他にもData typeやアプリの基本情報(アプリ名、ファビコンの格納先など)などが閲覧できます。

1.4. PostmanでAPI Workflowを呼び出してみる

実際に、外部サービスからAPI Workflowを呼び出せるのか検証してみましょう。今回は、APIの開発・テストを行うためのプラットフォームPostmanを使ってBubbleのWorklfow APIを呼び出してみます。

まず、検証用にBubbleでAPI Workflowを作成します。ポイントは、先ほど紹介したセキュリティ項目の「Expose as a public API workflow」と「This workflow can be run without authentication」をチェックすることです(今回は検証用で認証なしで実行するため)。さらに、取得した結果からData typeにデータを作成するActionを作成します。

では、Postmanで呼び出す設定をします。下記を参考に設定してください。

  • メソッド…POST
  • エンドポイント…https://BUBBLEAPPNAME.bubbleapps.io/version-test/api/1.1/wf/meta_test
  • Body…(1)Key: name/Value: テストデータ、(2)Key: no/Value: 100

設定できたら「Send」ボタンをクリックします。

すると、Result部分に"status": "success"が表示されます。APIが正常に実行できたようです。

次に、BubbleでActionに設定した通りデータが保存されているかData typeを確認します。

Postmanで設定した通りのnameとnoで保存されています。これで、「Expose as a public API workflow」がチェックされているAPI Workflowは外部から呼び出すことができることが確認できました。

もし、ユーザー認証を使用したい場合は、Backend workflow で「Log the user in」アクションを実行してトークンを発行することができます。詳しくは以下の記事も併せてご参考ください。

blog.nocodelab.jp

2. API Connector

次に、API Connetorのセキュリティの注意点についてご紹介します。

2.1. API Connector概要

API ConnetorはBubbleの純正プラグインで、外部サービスやアプリにリクエストを送信するものです。接続できるアプリケーションに制限はほぼありません。接続したい外部サービスのAPIドキュメントを参照してAPI callを設定します。パラメータには動的値を設定することもできます。

2.2. API Connectorのセキュリティポイント

API Connectorを使用するうえでのセキュリティポイントとして、特に重要な点をご紹介します。

1つ目は、Parameterの公開設定です。API callで使うパラメータは、「Private」項目で公開と非公開の設定ができます。チェックするとパラメータの値を保護でき、チェックしない(Public)と外部から丸見えになります。

2つ目は、全てのAPI callは公開されているという点です。privateに設定したパラメータの値は公開されませんが、APIエンドポイントやInitializeの内容(リクエストの中身・結果)は公開状態になります。機密情報を使ってInitializeをする場合は特に注意が必要です。

2.3. 開発ツールでAPI Connectorの公開状態を確認してみる

実際に、開発ツールを使ってAPI Connectorの情報がどのように公開されているのかを確認します。

まずは検証用のアプリを作成し、PluginsタブでAPI Connectorをインストールします。検証用に下記の通りAPI callを作成します。今回は、郵便番号検索APIを使用して、入力された郵便番号から住所を取得するAPI callを作成しました。なお、2つ目のパラメータtestは検証用に作成したものなので、APIの実行には不要です。

作成できたら「Initialize」をクリックします。

ここまで出来たらアプリをPreview表示して、開発ツールを起動(Fnキー+F12キー)します。Console(コンソール)タブを開き、console.log(app)と入力してEnterキーをクリックします。

下部に出力内容がトグル付きで表示されるので、トグルをクリックします。

さらにsettings: > client_safe: > apiconnector2:のトグルをクリックして内容を表示します。apiconnector2:配下に、API Connectorに関する情報が出力されます。

下記のように、作成したAPIの認証設定とAPI Nameが出力されています。1行目のAPIが先ほど作成したAPIです。

1行目のトグルをどんどん開いて、設定がどのように反映されているか確認します。下記がAPI Connectorについて出力される情報の全貌です。特にチェックしていただきたいのが①と②の部分です。

①の部分を確認すると、API callのパラメータが表示されています。zipcodeとtest(比較用で作成)を比較すると分かるように、Private設定をPrivateに設定したパラメータ名は表示されていません。Privateに設定していなパラメータについては、Initializeで使用したデータ(test data)がここに出力されています。ちなみに、Initialize後に値の入力欄を空欄にしておくとここでは出力されません。

②の部分では、Initializeでパラメータに設定した値と応答内容が出力されています。出力内容全文は下記の通りです。Initializeの応答と、最後の部分ではInitializeのリクエストデータが確認できますね。

APIの内容によってはInitilalizeでパラメータの値に個人情報や機密情報を使用することもあるので、ここで出力されてしまうということは念のため認識しておいてくださいね。ちなみに、ここでは最新のInitializeの内容・応答が出力されるので、公開したくない情報はリリース前にサンプルデータで上書きして閲覧できないようにしておくのがおすすめです。

3. まとめ

今回は、Bubbleのちょっと怖い話としてAPI WorkflowとAPI Connectorのセキュリティ上の注意点をご紹介しました。

API Workflowについては、セキュリティ項目は必要なときのみ有効化するということを覚えておいてください。API Connetorについては、InitialaizeなどのPrivate設定にしていない/できない基本的な情報は開発ツールで閲覧可能だということに気を付けてくださいね。

4. 参考

  • Bubbleのちょっと怖い話シリーズ

blog.nocodelab.jp

  • 関連ドキュメント

manual.bubble.io

manual.bubble.io