ブラウザの同源ポリシーとAJAXによるクロスドメイン通信手法

ブラウザの同源ポリシーとは、Webセキュリティにおける重要な概念です。この記事では、その仕組みやAJAXでのクロスドメイン問題に対する対応策を解説します。

同源ポリシーとは

同源ポリシーは、異なるソース間でのデータアクセスを制限するブラウザのセキュリティモデルです。ここでの「ソース」は、プロトコル、ホスト名、ポート番号が一致するURLを指します。例えば、以下のURLを考えます。


https://example.com:443/path/to/resource

これを分解すると、以下のように構成されています：

プロパティ	値
protocol	https
hostname	example.com
port	443
pathname	/path/to/resource

これらの要素すべてが一致している場合、「同源」とみなされます。

なぜクロスドメインが発生するのか

実際の開発において、異なるドメインからAPIを利用するケースは少なくありません。例えば、自社内で提供されている他のサービスのAPIを呼び出す場合や、ローカル環境でバックエンドとの連携テストを行う際にも、クロスドメイン問題が発生することがあります。

クロスドメイン問題への対処方法

以下に、代表的な解決策をいくつか紹介します。

1. プロキシを利用した解決

サーバー側でプロキシを設置することで、ブラウザの同源ポリシーを回避できます。この方法では、フロントエンドからのリクエストを同じオリジン内のエンドポイントに転送し、そこから外部APIを呼び出します。以下はNode.jsでのプロキシ設定例です。


const express = require('express');
const request = require('request');
const app = express();

app.get('/proxy', (req, res) => {
    const url = 'http://thirdparty-service.com/api/data';
    request(url, (error, response, body) => {
        if (!error && response.statusCode === 200) {
            res.json(JSON.parse(body));
        } else {
            res.status(500).send('Error occurred');
        }
    });
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

2. CORS（Cross-Origin Resource Sharing）

CORSは、ブラウザとサーバー間で許可されたクロスドメイン通信を可能にする標準規格です。これにより、レスポンスヘッダーを通じて特定のオリジンからのリクエストを許可することができます。サーバー側の設定例を以下に示します。


const express = require('express');
const app = express();

app.get('/data', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
    res.json({ message: 'This is cross-origin data' });
});

app.listen(3001, () => console.log('CORS-enabled server running on port 3001'));

また、クッキーを含む認証が必要な場合、`Access-Control-Allow-Credentials`を有効化する必要があります。

3. JSONP（JSON with Padding）

JSONPは、古いブラウザでも動作可能なクロスドメイン通信手法です。これは、`