【kintone】JavaScriptカスタマイズでLambdaる
こんばんは。
なにげに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の知識が増えたのでポジティブに考えます。
ではまた🙆
Discussion