🙆

【kintone】JavaScriptカスタマイズでLambdaる

2023/07/12に公開

こんばんは。
なにげに2日連続投稿しているわたしです。

今日はkintoneからLambdaを呼び出そうと思って試行錯誤してたのですが、
一部詰まったので備忘録として残します。

AWS Lambda とは?

https://zenn.dev/collabostyle/articles/07e65a832db442

わじーの記事がとても分かりやすいので↑載せます✨
※ちなみにわたしは初見で「らんむぶだ」と読みましたが、「らむだ」ですよ。

kintone とは?

https://kintone.cybozu.co.jp/

ノーコードで業務システムを作ることができるクラウドサービスです!
と言いつつも、JavaScriptやCSSを利用したカスタマイズをおこなうこともできます。

Lambda関数を作成する

Lambda > 関数 > [関数の作成] からつくります。
詳細設定で Lambda 関数 URL を有効にしましょう!

https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/urls-invocation.html

kintoneのアプリを作成

今回はカスタマイズを使ってLambdaりたいだけなので、
フィールドは設けずにアプリを作成します。
(フィールドなしでアプリ作れるの知らんかった・・・)

カスタマイズしていく

レコード一覧画面を開いた時のイベントにカスタマイズを仕込みます。

kintone.events.on(["app.record.index.show"], (event) => {
  const xhr = new XMLHttpRequest();
  const url = '{Lambda 関数 URL}';
  xhr.open('POST', url);
  xhr.setRequestHeader( 'Content-Type', 'application/json' );
  xhr.send({"header1": "kintoneからの送信だよ。"});
  return event;
});

実行

いざ実行しようとレコード一覧画面を開いたら、こんなエラーが出ました。。。

domainname.cybozu.com/:1 Access to XMLHttpRequest at 'Lambda function URL' from origin 'https://domainname.cybozu.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

身に覚えのないエラーです。
なんじゃこりゃ?

調べる

色々と調べてみると、CORSエラーが発生しているようでした。

CORS とは?

オリジン間リソース共有(Cross-Origin Resource Sharing) です。
省略して[CORS]と呼ばれているのですね👀

そして、オリジン間リソース共有と言われてもパッと理解できないので
もうちょっと調べて自分なりにまとめてみました。

通常は同じオリジンしかアクセスできないものを、異なるオリジンでもアクセスできるようにしちゃうのがCORSです。

「いや、だからオリジンってなんやねん」となりました。(自分が)

オリジンとは、URLの

  • スキーム(プロトコル)
  • ホスト(ドメイン)
  • ポート

によって定義されるものです。

https://developer.mozilla.org/ja/docs/Glossary/Origin

kintoneだと、 https://domainname.cybozu.com/ がオリジンと呼ばれる部分ですね。
たとえば、以下のURLは同一オリジンです。

  • https://domain.hoge.com/test_1/
  • https://domain.hoge.com/test_2/

これは、スキーム・ホスト・(ポート)が同じだからです。
対して、以下のURLは異なるオリジンです。

  • http://domain.hoge.com/test_1/
  • https://domain.hoge.com/test_1/

スキームが「http」と「https」で異なるからですね。

わたしがkintoneで実行したときも、
「異なるオリジンだからレスポンス返せませんぜ(返させたいなら許可登録しんさい)」
ということがLambdaで起こっており、エラーが発生したわけです。

じゃあ、CORS有効にしてじゃんじゃんリクエスト飛ばそう!

と思ったあなた。ちょっと待ってください。
CORSを有効にするなら、有効にするときのリスクも理解しなければなりません。

Access-Control-Allow-Origin: *

たとえば↑のように指定してあげると、
「どのオリジンでもすべてエラーなく返却される」ようになります。

えっ じゃあこれを付ければ万事解決じゃん!

そうです。それが問題です。

「どのオリジンでもすべてエラーなく返却される」ので、
自分が把握していない(悪意のある)オリジンからも
情報が取ってこれるようになってしまいます!!

Lambda 関数 URL を悪いヤツに知られれば
知らない間に情報漏洩してた、、、なんてことに💦

なので、CORSを有効にするときはリスクも考えて
慎重に設定しなければなりません。

結局、どうやって解決したのか

https://cybozu.dev/ja/kintone/docs/js-api/proxy/kintone-proxy/

この API を利用すると、クロスドメイン制約を回避して、外部 API にリクエストを送信できます。

プロキシを使ってアクセスすれば良かったのでした🫠

kintone.events.on(["app.record.index.show"], (event) => {
  const requestData = {"header1": "kintoneからの送信だよ。"};
  kintone.proxy('{Lambda 関数 URL}', 'POST', {}, requestData, (body, status, headers) => {
    // success
    console.log(status, JSON.parse(body), headers);
  }, (error) => {
    // error
    console.log(error);
  });
  return event;
});

実行してみると、kintoneからLambdaることができました!
遠回りしてしまいましたが、CORSの知識が増えたのでポジティブに考えます。

ではまた🙆

コラボスタイル Developers

Discussion