> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Décrit comment configurer Cross-Origin Resource Sharing (CORS) pour une application Auth0 enregistrée à l’aide de l’Auth0 Dashboard.

# Configurer Cross-Origin Resource Sharing

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASQUÉ*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

<Card title="Avant de commencer">
  * Pour des raisons de sécurité, l’URL d’origine de votre application doit figurer parmi les URL approuvées. Si vous ne l’avez pas déjà ajoutée aux **Allowed Callback URLs** de votre application, vous devrez l’ajouter à la liste des **Allowed Origins (CORS)**.
  * Assurez-vous que **Allowed Web Origins**, dans la vue **Settings** de votre application, est défini sur le domaine à l’origine de la requête. Les URL peuvent contenir des caractères génériques pour les sous-domaines, mais elles ne peuvent pas contenir de chemins relatifs après l’URL du domaine. Pour en savoir plus, consultez [Espaces réservés pour les sous-domaines](/docs/fr-ca/get-started/applications/wildcards-for-subdomains).
  * Si vous n’activez pas [Custom Domains](/docs/fr-ca/customize/custom-domains), vous devrez créer une page de vérification qui utilise Auth0.js comme solution de secours pour l’authentification inter-origines.
</Card>

Le partage de ressources entre origines multiples (CORS) est un mécanisme qui permet à une application de charger des données (ressource) à partir d’un domaine (origine) différent de celui où elle est hébergée. Une politique CORS constitue une exception explicite à la politique de même origine, courante dans les applications Web.

Par exemple, si vous vouliez que votre application (app.mydomain.com) récupère en arrière-plan, à l’aide d’Ajax, une police depuis Google (fonts.google.com), vous devriez configurer CORS.

<div id="configure-cross-origin-authentication">
  ## Configurer l’authentification d’origine croisée
</div>

1. Accédez à [Dashboard > Applications > Applications](https://manage.auth0.com/#/applications) et cliquez sur le nom de l’application à consulter.
2. Sous **Cross-Origin Authentication**, activez la bascule **Allow Cross-Origin Authentication**.
3. Repérez **Allowed Origins (CORS)**, puis saisissez l’URL d’origine de votre application. Pour en savoir plus sur les origines, consultez [Origin on Mozilla MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin).
4. Cliquez sur **Save Changes**.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si vous n’avez pas besoin d’utiliser CORS pour votre application, assurez-vous que la bascule **Allow Cross-Origin Authentication** est désactivée.
</Callout>

<div id="create-cross-origin-verification-page">
  ## Créer une page de vérification inter-origines
</div>

Dans certains cas, les cookies tiers ne sont pas disponibles. Certaines versions de navigateurs ne prennent pas en charge les cookies tiers et, même lorsqu’elles le font, ils peuvent être désactivés dans les paramètres de l’utilisateur.

Pour les [navigateurs pris en charge](#browser-testing-support), vous pouvez utiliser la méthode `crossOriginVerification` du [SDK Auth0.js](/docs/fr-ca/libraries/auth0js) dans votre application, sur une page dédiée, pour gérer les cas où les cookies tiers sont désactivés.

Pour les navigateurs qui ne sont pas pris en charge, comme Chrome, Opera et Safari, l’authentification d’origine croisée ne fonctionnera pas lorsque les cookies tiers sont désactivés, sauf si vous activez les [Domaines personnalisés](/docs/fr-ca/customize/custom-domains).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Le paramètre de **Safari** est intitulé "Prevent cross-site tracking" et utilise la fonctionnalité [Intelligent Tracking Prevention](https://webkit.org/blog/7675/intelligent-tracking-prevention/). Malheureusement, cela empêche aussi les cookies tiers d’être utiles dans les scénarios d’authentification. Voici un exemple de l’effet que cela a sur le [renouvellement de jeton dans Safari](https://support.auth0.com/center/s/article/troubleshoot-auth0-token-renewal-issues-in-safari-with-itp-enabled).
</Callout>

1. Créez une page dans votre application qui instancie `WebAuth` à partir de [Auth0.js](/docs/fr-ca/libraries/auth0js). Appelez `crossOriginVerification` immédiatement. Vous pouvez donner à cette page le nom de votre choix.

export const codeExample = `   <!-- callback-cross-auth.html -->

<head>
  <script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
  <script type="text/javascript">
    var auth0Client = new auth0.WebAuth({
      clientID: '{yourClientId}',
      domain: '{yourDomain}'
    });
    auth0Client.crossOriginVerification();
  </script>
</head>
`;

<AuthCodeBlock children={codeExample} language="text" />

Lorsque les cookies tiers ne sont pas disponibles, Auth0.js affiche une iframe pour lancer un autre flux de vérification inter-origines.
2\. Accédez à [Dashboard > Applications > Applications](https://manage.auth0.com/#/applications), puis sélectionnez l’application à consulter.
3\. Sous **Authentification d’origine croisée**, ajoutez l’URL de la page de callback que vous avez créée dans le champ **URL de secours pour la vérification inter-origines**.

<Warning>
  Pour les environnements de production, vérifiez que l’URL de la page ne pointe pas vers `localhost`. La page doit se trouver dans le même domaine où est hébergé le formulaire de connexion intégrée et doit utiliser le schéma `https`.
</Warning>

4. Cliquez sur **Enregistrer les modifications**.

Pour plus de détails, consultez l’[exemple d’authentification d’origine croisée sur GitHub](https://github.com/auth0/lock/blob/master/support/callback-cross-auth.html).

<div id="error-codes-and-descriptions">
  ## Codes d’erreur et descriptions
</div>

<Warning>
  Les descriptions d’erreur sont conçues pour être lisibles par des humains. Elles peuvent changer en tout temps et ne devraient pas être analysées par du code.
</Warning>

Lorsque Auth0.js (ou Lock) est utilisé pour la connexion intégrée, il envoie une requête à l’endpoint `/co/authenticate`, qui peut retourner les erreurs suivantes :

| Statut | Code                          | Description                                                                                                                                                                                            |
| ------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `400`  | `invalid_request`             | Corps de la requête invalide. Seuls les paramètres client\_id, credential\_type, username, otp et realm sont requis, et tous doivent être fournis.                                                     |
| `400`  | `unsupported_credential_type` | Paramètre de type d’identifiant inconnu.                                                                                                                                                               |
| `400`  | `invalid_request`             | Realm non-existent-connection inconnu.                                                                                                                                                                 |
| `401`  | `unauthorized_client`         | Connexion inter-origines non autorisée.                                                                                                                                                                |
| `401`  | `password_leaked`             | Cette tentative de connexion a été bloquée parce que le mot de passe que vous utilisez a déjà été divulgué lors d’une atteinte à la sécurité des données (pas dans cette application).                 |
| `403`  | `access_denied`               | Mauvais courriel ou mot de passe.                                                                                                                                                                      |
| `403`  | `access_denied`               | Erreur d’authentification                                                                                                                                                                              |
| `403`  | `blocked_user`                | Utilisateur bloqué                                                                                                                                                                                     |
| `429`  | `too_many_attempts`           | Votre compte a été bloqué après plusieurs tentatives de connexion consécutives. Nous vous avons envoyé une notification par votre méthode de contact préférée avec des instructions pour le débloquer. |
| `429`  | `too_many_attempts`           | Nous avons détecté un comportement de connexion suspect et toute tentative ultérieure sera bloquée. Veuillez communiquer avec l’administrateur.                                                        |

De plus, vous pouvez aussi obtenir une erreur `403` générique sans propriété `error` ni `error_description`. Le corps de la réponse inclurait simplement quelque chose de semblable à ce qui suit :

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

<div id="browser-testing-support">
  ## Prise en charge des tests dans les navigateurs
</div>

Les navigateurs suivants peuvent utiliser l’authentification d’origine croisée lorsque les cookies tiers sont désactivés :

* Microsoft Internet Explorer

<Card title="Attributs SameSite des cookies">
  Auparavant, les options de l’[attribut de cookie `samesite`](/docs/fr-ca/manage-users/cookies/samesite-cookie-attribute-changes) étaient `true`, `false`, `strict` ou `lax`. Si vous ne définissiez pas cet attribut manuellement, Auth0 utilisait la valeur par défaut `false`.

  À partir de février 2020, Google Chrome v80 a modifié sa façon de gérer les cookies, et Auth0 a apporté les changements suivants en conséquence :

  * Les cookies sans attribut `samesite` seront définis sur `lax`.
  * Les cookies avec `sameSite=none` doivent être sécurisés, sinon ils ne peuvent pas être enregistrés dans l’espace de stockage des cookies du navigateur.

  L’objectif de ces changements est d’améliorer la sécurité et d’aider à atténuer les attaques de falsification de requêtes intersites (CSRF).
</Card>

<div id="learn-more">
  ## En savoir plus
</div>

* [Connexion intégrée](/docs/fr-ca/authenticate/login/embedded-login)
* [Authentification d’origine croisée](/docs/fr-ca/authenticate/login/cross-origin-authentication)
* [Paramètres de l’application](/docs/fr-ca/get-started/applications/application-settings)
* [Modifications apportées à l’attribut SameSite des cookies](/docs/fr-ca/manage-users/cookies/samesite-cookie-attribute-changes)