クロスオリジン リソース共有（CORS）を設定する

Auth0 Dashboard を使用して、Auth0 に登録されたアプリケーション向けに クロスオリジン リソース共有（CORS）を設定する方法を説明します。

始める前に

• セキュリティ上の理由から、アプリケーションのオリジン URL は承認済み URL として登録されている必要があります。まだアプリケーションの Allowed Callback URLs に追加していない場合は、Allowed Origins (CORS) のリストにも追加する必要があります。
• アプリケーションの 設定 ビューにある Allowed Web Origins が、リクエスト元のドメインに設定されていることを確認してください。URL にはサブドメイン用のワイルドカードを含めることができますが、ドメイン URL の後に相対パスを含めることはできません。詳しくは、サブドメイン用プレースホルダーを参照してください。
• カスタムドメイン を有効にしない場合は、クロスオリジン認証のフォールバックとして Auth0.js を使用する検証ページを作成する必要があります。

クロスオリジン リソース共有 (CORS) は、アプリケーションがホストされているものとは異なるドメイン (オリジン) からデータ (リソース) を読み込めるようにする仕組みです。CORS ポリシーは、Web アプリケーションで一般的な同一オリジンポリシーに対する明示的な例外です。

たとえば、アプリケーション (app.mydomain.com) で、Ajax を使ってバックグラウンドで Google (fonts.google.com) からフォントを取得したい場合は、CORS を設定する必要があります。

​

クロスオリジン認証を設定する

1. Auth0 Dashboard > アプリケーション > アプリケーション に移動し、詳細を表示するアプリケーションの名前をクリックします。
2. Cross-Origin Authentication で、Allow Cross-Origin Authentication をオンにします。
3. Allowed Origins (CORS) で、アプリケーションのオリジン URL を入力します。オリジンについて詳しくは、Mozilla MDN Web Docs の Origin をご覧ください。
4. 変更を保存 をクリックします。

アプリケーションで CORS を使用する必要がない場合は、Allow Cross-Origin Authentication がオフになっていることを確認してください。

​

クロスオリジン検証ページを作成する

サードパーティ Cookie を利用できないケースがあります。ブラウザのバージョンによってはサードパーティ Cookie をサポートしておらず、サポートしている場合でも、ユーザーの設定で無効になっていることがあります。

サポートされているブラウザでは、サードパーティ Cookie が無効な場合に対応するため、アプリケーション内の専用ページで Auth0.js SDK の crossOriginVerification メソッドを使用できます。

Chrome、Opera、Safari などのサポート対象外のブラウザでは、カスタムドメインを有効にしない限り、サードパーティ Cookie が無効な場合、クロスオリジン認証は機能しません。

Safari ではこの設定は “Prevent cross-site tracking” と表示され、Intelligent Tracking Prevention が使用されます。残念ながら、これにより認証シナリオではサードパーティ Cookie も利用できなくなります。たとえば、Safari での token の更新 への影響については、こちらの例をご覧ください。

1. アプリケーションに、Auth0.js の WebAuth をインスタンス化するページを作成します。作成したらすぐに crossOriginVerification を呼び出します。ページ名は任意です。

サードパーティ Cookie を利用できない場合、Auth0.js は別のクロスオリジン検証フローを呼び出すために iframe をレンダリングします。 2. Auth0 Dashboard > アプリケーション > アプリケーション に移動し、対象のアプリケーションを選択します。 3. Cross-Origin Authentication で、作成したコールバックページの URL を Cross-Origin Verification Fallback URL フィールドに追加します。

本番環境では、そのページの URL が localhost を指していないことを確認してください。このページは、組み込みログインフォームがホストされているものと同じドメイン上にあり、https スキームを使用している必要があります。

4. 変更を保存 をクリックします。

詳細については、GitHub のクロスオリジン認証サンプル を参照してください。

​

エラーコードと説明

エラーの説明は、人が読んで理解できることを目的としています。これらは予告なく変更される可能性があるため、コードで解析しないでください。

auth0.js (または Lock) を組み込みログインで使用すると、/co/authenticate エンドポイントが呼び出され、次のエラーが返されることがあります。

ステータス	コード	説明
400	invalid_request	リクエストボディが無効です。client_id、credential_type、username、otp、realm は、これらすべてのみが必須です。
400	unsupported_credential_type	credential type パラメーターが不明です。
400	invalid_request	レルム non-existent-connection は存在しません。
401	unauthorized_client	クロスオリジンログインは許可されていません。
401	password_leaked	現在使用しているパスワードが過去のデータ侵害 (このアプリケーション外) で漏えいしていたため、このログイン試行はブロックされました。
403	access_denied	メールアドレスまたはパスワードが正しくありません。
403	access_denied	認証エラー
403	blocked_user	ブロックされたユーザー
429	too_many_attempts	複数回連続でログインに失敗したため、アカウントがブロックされました。ブロック解除方法については、ご希望の連絡先に通知をお送りしています。
429	too_many_attempts	不審なログイン動作が検出されたため、以降の試行はブロックされます。管理者に連絡してください。

さらに、error または error_description プロパティを含まない一般的な 403 エラーが返されることもあります。レスポンスボディには、次のような内容だけが含まれます。

Origin https://test.app is not allowed.

​

ブラウザでのテスト対応

次のブラウザでは、サードパーティ Cookie が無効になっている場合でも、クロスオリジン認証を使用できます。

• Microsoft Internet Explorer

Samesite cookie 属性

以前は、samesite cookie 属性のオプションとして true、false、strict、lax がありました。この属性を手動で設定しなかった場合、Auth0 はデフォルト値として false を使用していました。

2020 年 2 月から、Google Chrome v80 で Cookie の処理方法が変更されたため、Auth0 でもそれに合わせて次の変更が実施されました。

• samesite 属性が設定されていない Cookie は、lax に設定されます。
• sameSite=none が設定された Cookie はセキュアである必要があります。そうでない場合、ブラウザの cookie jar に保存できません。

これらの変更は、セキュリティを向上させ、クロスサイトリクエストフォージェリ (CSRF) 攻撃の軽減に役立てることを目的としています。

​

詳しく見る

• 埋め込みログイン
• クロスオリジン認証
• アプリケーション設定
• SameSite Cookie属性の変更