ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScript がドメイン間で Cookie を設定する方法

JavaScript がドメイン間で Cookie を設定する方法

PHPz
リリース: 2023-04-25 15:15:14
オリジナル
2082 人が閲覧しました

JavaScript は、Web 開発で広く使用されているスクリプト言語です。これにより、開発者はさまざまな動的効果やインタラクティブな機能を Web ページにインタラクティブな方法で追加できます。しかし、Web アプリケーションの開発に伴い、クロスドメインの問題がますます一般的になってきました。この記事では、JavaScript がドメイン間で Cookie を設定する方法を学びます。

クロスドメインとは何ですか?

クロスドメインとは、Web サイトの JavaScript コードが同じブラウザー内の異なるソース (プロトコル、ドメイン名、ポート) からページにアクセスしようとしたときに発生する問題を指します。セキュリティ上の理由から、ブラウザではクロスドメインリクエストが禁止されています。

なぜ Cookie を設定するのでしょうか?

Cookie は、Web サイトで使用される小さなテキストであり、ユーザーのコンピューター上の領域に保存され、ブラウザーによってサーバーに送信されます。 Cookie はログイン認証情報、ショッピング カート情報などを保存できます。

次のシナリオを考えてみましょう。ユーザーが特定のページにアクセスする前にログインを必要とする Web アプリケーションを開発しています。 Cookie を使用してログイン情報を保存し、ログインしたユーザーのみが保護されたページにアクセスできるようにすることができます。ただし、保護されたページが別のソースから読み込まれた場合、Cookie にアクセスするには、ドメインをまたいで Cookie を設定する必要があります。

ドメイン間で Cookie を設定するにはどうすればよいですか?

一般的な Cookie 設定コードは次のコードに似ています:

document.cookie = 'key=value;domain=example.com;expires=Sat, 01 Jan 2050 00:00:00 GMT;path=/'
ログイン後にコピー

ただし、同一生成元ポリシーの制限により、現在のページがそのページと同じソースではない場合は、 Cookie を設定する必要がある場所に設定しても成功しません。Cookie を設定してください。

解決策の 1 つは、JSONP (パディング付き JSON) を使用することです。 JSONP はスクリプト タグを使用して、クロスドメイン アクセスの特殊なケースを提供します。たとえば、次のコードをログイン ページに追加できます。

<script src="http://example.com/setCookie?callback=callback"></script>
ログイン後にコピー

setCookie ファイルは、script タグが追加された同じページで呼び出される JavaScript コールバック関数を返す必要があり、これにより、正常に設定できるようになります。クッキー。

もう 1 つの解決策は、プロキシを使用することです。ほとんどのサーバーは HTTP プロキシ サーバーをサポートしています。プロキシを使用すると、Web アプリケーションは別のドメインの Cookie にアクセスするためにプロキシ リクエストをサーバーに送信できます。この方法では、プロキシ リクエストをプロキシ サーバーに送信し、プロキシ サーバーがターゲット サーバーにリクエストを送信することで、クロスドメインの問題を解決します。

最後に、一部のブラウザは、他のドメインからのリクエストを受け入れるようにブラウザに指示する CORS (Cross Resource Sharing) ヘッダーの設定をサポートしています。 CORS 経由で Cookie を設定する前に、クロスオリジン リソース共有の仕様を必ずお読みください。

概要

JavaScript を使用してドメイン間で Cookie を設定することは、Web 開発において重要な問題となる可能性があり、場合によっては同一生成元ポリシーによって制限される可能性があります。この時点で、JSONP、プロキシ、または CORS を使用してドメイン間で Cookie を設定できます。いずれにしても安全は確保しなければなりません。 Web 開発者は、実際の開発中に自分に合ったソリューションを選択できます。

以上がJavaScript がドメイン間で Cookie を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート