> ## 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 le partage de ressources entre origines multiples (CORS) pour une application enregistrée auprès d’Auth0 à l’aide d’Auth0 Dashboard.

# Configurer le partage de ressources entre origines multiples

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) + "*****MASKED*****";
          }
          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 **origines autorisées (CORS)**.
  * Assurez-vous que **Allowed Web Origins** dans la vue **Settings** de votre application est défini sur le domaine qui effectue 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](/fr-CA/docs/get-started/applications/wildcards-for-subdomains).
  * Si vous n’activez pas [Domaines personnalisés](/fr-CA/docs/customize/custom-domains), vous devrez créer une page de vérification qui utilise Auth0.js comme solution de rechange pour l’authentification inter-origine.
</Card>

Le partage de ressources entre origines multiples (CORS) est un mécanisme qui permet à une application de charger des données (une ressource) à partir d’un domaine (origine) différent de celui où elle est hébergée. Une stratégie 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 une police à partir de Google (fonts.google.com) à l’aide d’Ajax, vous devriez configurer CORS.

<div id="configure-cross-origin-authentication">
  ## Configurer l'authentification inter-origine
</div>

1. Accédez à [Auth0 Dashboard > Applications > Applications](https://manage.auth0.com/#/applications), puis cliquez sur le nom de l'application pour l'ouvrir.
2. Sous **Authentification inter-origine**, activez **Autoriser l'authentification inter-origine**.
3. Repérez **Origines autorisées (CORS)**, puis saisissez l'URL d'origine de votre application. Pour en savoir plus sur les origines, consultez [Origin dans 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 l'option **Autoriser l'authentification inter-origine** est désactivée.
</Callout>

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

Il arrive que les témoins tiers ne soient pas disponibles. Certaines versions de navigateur ne prennent pas en charge les témoins tiers et, même lorsqu’elles le font, ceux-ci 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](/fr-CA/docs/libraries/auth0js) dans votre application, sur une page dédiée, pour gérer les cas où les témoins tiers sont désactivés.

Pour les navigateurs qui ne sont pas pris en charge, comme Chrome, Opera et Safari, l’authentification inter-origine ne fonctionnera pas lorsque les témoins tiers sont désactivés, à moins d’activer les [Domaines personnalisés](/fr-CA/docs/customize/custom-domains).

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  La configuration de **Safari** est libellée « Empêcher le suivi intersite » et utilise [Intelligent Tracking Prevention](https://webkit.org/blog/7675/intelligent-tracking-prevention/). Malheureusement, cela empêche aussi les témoins tiers d’être utiles dans les scénarios d’authentification. Voici un exemple de l’effet que cela a sur le [renouvellement des jetons 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](/fr-CA/docs/libraries/auth0js). Appelez immédiatement `crossOriginVerification`. Vous pouvez nommer la page comme vous le souhaitez.

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 témoins tiers ne sont pas disponibles, Auth0.js affiche un iframe pour appeler un autre flux de vérification en authentification inter-origine.
2\. Accédez à [Auth0 Dashboard > Applications > Applications](https://manage.auth0.com/#/applications), puis sélectionnez l’application à consulter.
3\. Sous **authentification inter-origine**, ajoutez l’URL de la page de rappel que vous avez créée dans le champ **Cross-Origin Verification Fallback URL**.

<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 que celui où le formulaire de connexion intégrée est hébergé et doit utiliser le protocole `https`.
</Warning>

4. Cliquez sur **Save Changes**.

Pour en savoir plus, consultez l’[exemple d’authentification inter-origine 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 rédigées en langage clair. Elles peuvent changer en tout temps et ne doivent pas être analysées par du code.
</Warning>

Lorsque Auth0.js (ou Lock) est utilisé pour la connexion intégrée, il appelle le point de terminaison `/co/authenticate`, qui renvoie les erreurs suivantes :

| Statut | Code                          | Description                                                                                                                                                                                         |
| ------ | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `400`  | `invalid_request`             | Corps de requête invalide. Tous les paramètres suivants, et eux seuls, sont requis : client\_id, credential\_type, username, otp et realm.                                                          |
| `400`  | `unsupported_credential_type` | Paramètre de type d’identifiant inconnu.                                                                                                                                                            |
| `400`  | `invalid_request`             | realm inconnu : non-existent-connection.                                                                                                                                                            |
| `401`  | `unauthorized_client`         | Connexion inter-origine non autorisée.                                                                                                                                                              |
| `401`  | `password_leaked`             | Cette tentative de connexion a été bloquée, car le mot de passe que vous utilisez a déjà été divulgué dans le cadre d’une atteinte aux données (pas dans cette application).                        |
| `403`  | `access_denied`               | Courriel ou mot de passe incorrect.                                                                                                                                                                 |
| `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 à votre mode de contact privilégié avec des instructions pour le débloquer. |
| `429`  | `too_many_attempts`           | Nous avons détecté un comportement de connexion suspect, et toute nouvelle tentative sera bloquée. Veuillez communiquer avec l’administrateur.                                                      |

De plus, vous pouvez aussi recevoir 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 sur navigateur
</div>

Les navigateurs suivants peuvent utiliser l’authentification inter-origine lorsque les témoins tiers sont désactivés :

* Microsoft Internet Explorer

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

  À partir de février 2020, Google Chrome v80 a modifié la façon dont il gère les témoins, et Auth0 a mis en œuvre les changements suivants en conséquence :

  * Les témoins sans attribut `samesite` défini seront définis sur `lax`.
  * Les témoins avec `sameSite=none` doivent être sécurisés, sinon ils ne peuvent pas être enregistrés dans le stockage de témoins du navigateur.

  Ces changements visent à améliorer la sécurité et à contribuer à atténuer les attaques de falsification de requêtes intersites (CSRF).
</Card>

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

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