(145) JavaScriptのクロスオリジン制約

投稿者: | 2023年12月17日

72 views

1. CORSに関する情報収集

CORS(Cross-Origin Resource Sharing)については、以下のサイトを参照されたい。
https://aws.amazon.com/jp/what-is/cross-origin-resource-sharing/

CORS(コーズ)を簡単に説明すると?
CORS情報を提供するのは? → サーバー側
CORS情報を参照するのは? → クライアント側(=Webブラウザ)
CORS情報を参照するタイミングは? → JavaScript内のコードで HTTPリクエストを発行し、HTTPレスポンスを受信した時にそのヘッダ内の CORS情報 Access-Control-Allow-Origin を見る。
CORS情報を参照して何をする? → JavaScript内でレスポンスデータの取得可否を判断する。否ならば受信データを捨てて、JavaScript上で受信失敗処理ルートを実行する。つまり、受信データを取得出来ていても、捨ててしまう。

∴ CORSは、Webブラウザ側で受信データの取得可否を判断するために使用する。

2. 自作のサイトで Web APIを公開する場合に必要なこと

(1) 自作のサイトで Web APIを一般公開する場合

Web APIリクエストに対する応答を送信時に、HTTPの Access-Control-Allow-Origin ヘッダでワイルドカード * を指定する必要がある。
サーバー側の Web API処理プログラムが PHP言語で書かれている場合、以下のように書く。

// CORSを許可するヘッダーを設定
header("Access-Control-Allow-Origin: *");

(2) 自作のサイトで Web APIを自サイトのページでのみ使用可能に制限する場合

自サイトが https://www.example.com の場合、サーバー側の Web API処理プログラムで以下のように書く。

// CORSを許可するヘッダーを設定
header("Access-Control-Allow-Origin: https://www.example.com");

3. 実際にプログラムを作って確認してみた。

1) プログラムの仕様

第1項、第2項の二つの値を渡すと、足し算の結果を返してくれる Web APIを作ってみた。
ミニマム系を作って動作確認すると、物事の本質が際立って見えてくる。

画面仕様はたったのこれだけだ。

2) プログラムソースコード

(1) index.html

<!DOCTYPE html>
<html>

<head>
  <title>Blog No.145</title>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body>
  <input type="text" name="t1" /> + <input type="text" name="t2" /> = <input type="text" name="s" disabled>
  <input type="button" id="BTN" value="計算実行">
</body>
</html>

(2) style.css

*{
  margin:  0;
  padding: 0;
  box-sizing: border-box;
}
body{
  padding: 0.5rem;
}

(3) script.js

URLのパスは、実際に Web APIを設置したサーバーを指定すること。
ここでは適当な URLを記している。

document.addEventListener("DOMContentLoaded", function() {
  const inp_t1 = document.querySelector('input[name="t1"]');
  const inp_t2 = document.querySelector('input[name="t2"]');
  const inp_s  = document.querySelector('input[name="s"]');
  const btn    = document.getElementById('BTN');

  btn.addEventListener('click', function() {
    let url = `https://www.example.com/sample/webapi.php?t1=${inp_t1.value}&t2=${inp_t2.value}`;
    fetch(url)
      .then(resp => resp.json())
      .then(data => {
        inp_s.value = data.s;
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  });
});

(4) webapi.php

このファイルだけ、上記の(1),(2),(3)とは異なるドメインのWeb上に設置する。※CORSに関する動作確認のため
前述のように、2行目の有無が今回の実験の重要ポイントだ。

<?php
  header('Access-Control-Allow-Origin: *');
  $resp['s'] = $_GET['t1'] + $_GET['t2'];
  echo json_encode($resp, JSON_UNESCAPED_UNICODE);
?>

3) 動作確認結果

(1) Web APIからのレスポンスに CORS情報を含めない場合

すなわち、上記の 2)-(4) webapi.php の 2行目、header()をコメントアウトして実行する。

<?php
//header('Access-Control-Allow-Origin: *');
  $resp['s'] = $_GET['t1'] + $_GET['t2'];
  echo json_encode($resp, JSON_UNESCAPED_UNICODE);
?>

この場合、Webブラウザのコンソールに、以下のようにCORSによるエラーが表示された。
つまり、受信データが Webブラウザにより捨てられ、JavaScriptコードは受信エラーのルートに分岐する。

(2) Web APIからのレスポンスに CORS情報を含める場合

すなわち、上記の 2)-(4) webapi.php の 2行目、header()を有効にして実行する。

<?php
  header('Access-Control-Allow-Origin: *');
  $resp['s'] = $_GET['t1'] + $_GET['t2'];
  echo json_encode($resp, JSON_UNESCAPED_UNICODE);
?>

この場合、Webブラウザのコンソールにエラーは表示されず、JavaScriptプログラムが最後まで実行される。
下記のように、Webページ上に足し算の結果が表示された。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)