Tips

JavaScriptカスタマイズでAPIキーを安全に秘匿する方法

著者名：mura-(Alphasta)

目次

はじめに

固定リンクがコピーされました

kintoneでJavaScriptカスタマイズを行い、外部サービスと連携する際に、APIキーをコード内に直接埋め込むことはセキュリティ上の大きなリスクとなります。
APIキーが外部に露出すると、不正アクセスやデータ漏洩の危険性が高まります。
そこで、サンプルプラグインのAPIキー秘匿プラグインを利用し、APIキーを安全に秘匿する方法を紹介します。

動作イメージ

固定リンクがコピーされました

今回は秘匿したい情報が送信できているかを確認するのが目的なため、https://httpbin.orgというサービスを利用して確認します。
httpbin.orgはリクエストした内容をレスポンスとして返却してくれるため、どのような情報を送ったかを確認できます。

次のように、アプリのレコードに入力したデータと、プラグインに入力したデータがそれぞれ送信できていることを確認できます。

カスタマイズを適用するアプリ

固定リンクがコピーされました

アプリを検証のカスタマイズ用にひとつ用意し、次のように設定をしてください。

フィールド名 フィールドタイプ フィールドコード 備考
header 文字列（複数行） header
data 文字列（複数行） data
control スペースフィールド control 送信ボタン・クリアボタンを表示するために設置
result スペースフィールド result httpbin.orgからの受信内容を表示するために設置

サンプルコード

固定リンクがコピーされました

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

(() => {
  'use strict';
  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    const API_URL = 'https://httpbin.org/post';
    const PLUGIN_ID = 'PLUGIN_ID'; // プラグインの設定画面で表示されるプラグインID

    const resultElement = kintone.app.record.getSpaceElement('result');
    const controlElement = kintone.app.record.getSpaceElement('control');
    const sendButton = document.createElement('button');
    sendButton.innerText = 'send';
    sendButton.onclick = async () => {
      const record = kintone.app.record.get().record;
      const header = record.header.value;
      const data = record.data.value;
      try {
        JSON.parse(header);
        JSON.parse(data);
      } catch (e) {
        alert('headerとdataはJSONの形式で記載をしてください。');
      }
      const result = await kintone.plugin.app.proxy(PLUGIN_ID, API_URL, 'POST', JSON.parse(header), JSON.parse(data));
      resultElement.innerText = result[0];
    };

    const clearButton = document.createElement('button');
    clearButton.innerText = 'clear';
    clearButton.onclick = () => {
      resultElement.innerText = '';
    };

    controlElement.appendChild(sendButton);
    controlElement.appendChild(clearButton);
  });
})();

サンプルコードの解説

固定リンクがコピーされました

まず、今回紹介しているサンプルプラグインでは、内部でkintone.plugin.app.setProxyConfig()を利用して認証情報を隠蔽できるようにしています。
隠蔽のしくみ自体は kintoneプラグインで秘匿情報を隠す〜隠蔽方法編〜 を確認してください。

サンプルコードのデータ送信部分でkintone.plugin.app.proxy()を利用しているのがポイントです。

21

const result = await kintone.plugin.app.proxy(PLUGIN_ID, API_URL, 'POST', JSON.parse(header), JSON.parse(data));

これを利用することでプラグインに設定した秘匿されたデータを送信できます。
詳しくは プラグインから外部APIを実行する を確認ください。

カスタマイズの適用方法

固定リンクがコピーされました

前述のJavaScriptカスタマイズの適用とAPIキー秘匿プラグインを導入して、次のように設定します。
プラグインは GitHub (External link) に公開されていますので、 READMEのインストール手順 (External link) に記載されているとおりビルドしてプラグインファイルを作成後、kintoneにアップロードしてください。

動作確認

固定リンクがコピーされました

実際に試してみましょう。
レコードを編集し、任意のheader/dataを指定したあと、sendボタンを押して結果を確認してください。
冒頭のとおり、結果として反映されていれば動作OKです。

おわりに

固定リンクがコピーされました

APIキーの秘匿は、セキュアなアプリケーション開発において欠かせない要素です。
「APIキー秘匿プラグイン」を活用することで、手軽に安全な外部連携が可能になります。
ぜひこの方法を試してみてください。

information

本記事ではプラグインの内部構造や詳細な実装については触れておりません。
詳しく知りたい方は、 プラグイン開発 など公式ドキュメントや関連資料を参照ください。