こんばんは。
なにげに2日連続投稿しているわたしです。
今日はkintoneからLambdaを呼び出そうと思って試行錯誤してたのですが、
一部詰まったので備忘録として残します。
AWS Lambda とは？
わじーの記事がとても分かりやすいので↑載せます✨
※ちなみにわたしは初見で「らんむぶだ」と読みましたが、「らむだ」ですよ。
kintone とは？
ノーコードで業務システムを作ることができるクラウドサービスです！
と言いつつも、JavaScriptやCSSを利用したカスタマイズをおこなうこともできます。
Lambda関数を作成する
Lambda > 関数 > [関数の作成] からつくります。
詳細設定で Lambda 関数 URL を有効にしましょう！
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の
- スキーム（プロトコル）
- ホスト（ドメイン）
- ポート
によって定義されるものです。
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を有効にするときはリスクも考えて
慎重に設定しなければなりません。
結局、どうやって解決したのか
この 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の知識が増えたのでポジティブに考えます。
ではまた🙆
「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。
Discussion