カスタマイズ kintone 初心者向け : CORSの仕組みとは、kintone proxyでデータを取得する方法

2025.02.05 2025.02.05

チュン

こんにちは！私の名前はチュンです。
株式会社メディアフュージョンでkintone関連製品の開発を担当しているベトナム出身のエンジニアです。
kintoneに興味のある方、kintoneを使っている方に私の蓄積した経験を共有したいと思います。

CORSの説明に入る前に、例を見てみましょう。
同じブラウザ上で、Facebookと何らかの悪意あるコードを含むウェブサイトの2つのウェブアプリケーションを開いていると想像してください。もしその悪意あるウェブサイトのスクリプトがFacebookに自由に操作を加え、危害を及ぼす行動を実行できるようになれば、非常に危険になります。

こうした攻撃を防ぐために、現代のブラウザはSame-Origin Policy (SOP)と呼ばれる仕組みを採用しています。

Same-Origin Policy (SOP)
Same-Origin Policy (SOP)は、ブラウザのデフォルトのセキュリティ機能であり、異なるドメインのウェブサイトが他のドメインの資源（データやスクリプトなど）にアクセスすることを防ぎます。
多くの組織では、複数のWebサービス（異なるドメイン）を利用している場合、SOPによってサービス間のデータ連携が妨げられることがよくあります。この問題を解決するために、CORSが導入されました。

Cross-Origin Resource Sharing (CORS)
CORSは、サーバーがどのドメインからアクセスを許可するかを制御する仕組みです。Access-Control-Allow-Originヘッダーで許可するドメインを指定します。

CORSは、アクセスを制限する仕組みであり、攻撃から保護するものではありません。サーバーが許可したドメインからのアクセスのみを許可します。
しかし、Access-Control-Allow-Origin パラメータはサーバー側で設定されるため、設定権限のないウェブサイトのサーバーでは、このパラメータを自由に構成することはできません。
その場合、Proxy/Gateway server を利用することで、データを取得することが可能になります。

CORSの仕組みを回避するために、サーバーの中継機能 (Proxy/Gateway server) を使用

ウェブアプリケーションを構築する際に、CORSの制約により他のドメインからデータにアクセスする必要がある場合、一般的で効果的な解決策として、Proxy / Gateway serverを構築します。
Proxy / Gateway serverは、Webアプリケーションと実際のサーバーの間に入り、ブラウザのCORSポリシーの影響を受けることなく、リクエストを実行する役割を果たします。

ご自身でProxy / Gateway Serverを構築することも可能ですが、サイボウズではkintoneシステムにプロキシサーバーが標準で用意されています。

kintone proxyを利用したAPI経由でのデータ取得方法についてご案内

ブラウザのコンソールで、JavaScriptのfetchを使ってJIRAのプロジェクトリストを取得するAPIを呼び出したところ、CORSによってアクセスがブロックされました。
ソースコード

fetch('https://your-domain}.atlassian.net/rest/api/3/project', {
  method: 'GET',
  headers: {
    'Authorization': ‘Basic {apiKey}’,
    'Accept': 'application/json'
  }
})
 .then(data => {
   console.log(data);
 })
 .catch(error => {
   console.error(error);
 });

データの取得に失敗しました。

kintone proxyを、fetchの代わりに使用します。

kintone.proxy('https://{your-domain}.atlassian.net/rest/api/3/project ', 'GET', {
'Authorization': 'Basic {apiKey}',
    'Accept': 'application/json'
}, {})
  .then(response => console.log(response[0]))
  .catch(error => console.error(error));

データを取得することに成功しました。