Cross-Origin Resource Sharing（CORS）を設定する

Auth0 Dashboard を使用して、Auth0 に登録されたアプリケーションの Cross-Origin Resource Sharing（CORS）を設定する方法を説明します。

始める前に

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

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

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

​

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

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

アプリケーションで 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 でのトークン更新 にどのように影響するかの例を以下に示します。

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

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

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

4. Save Changes をクリックします。

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

​

エラーコードと説明

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

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

Status	Code	Description
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 には secure 属性が必要です。そうでない場合、ブラウザの cookie jar に保存できません。

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

​

詳細情報

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