Aller au contenu
FREN

Sécurité (CSP)

Protégez vos clients en garantissant que vos devis ne s’ouvrent que là où vous l’autorisez.

La menace du clickjacking

Si n’importe quelle page web pouvait simplement créer une <iframe> pointant vers les devis privés de vos clients, un attaquant pourrait construire une fausse page superposée (UI redressing ou clickjacking) et amener un client à cliquer sur un faux bouton de paiement qui clique en réalité sur le bouton d’acceptation de votre devis rendu invisible.

C’est pourquoi la sécurité de Cord Elements est stricte dès le premier jour.

Frame ancestors et allowlist

Cord neutralise cette vulnérabilité au moyen d’en-têtes HTTP natifs connus sous le nom de Content Security Policy (CSP). Plus précisément, nous utilisons la directive frame-ancestors.

Pour que le snippet d’installation d’Elements fonctionne sur votre site web d’entreprise, vous devez d’abord enregistrer vos origines dans le tableau de bord.

  1. Allez dans Paramètres › Générateur de devis intégrable, dans la section Développeurs de l’index (elle apparaît lorsque le Mode développeur est activé dans Votre compte › Préférences).
  2. Repérez l’étape Domaines autorisés.
  3. Ajoutez les domaines en les séparant par des sauts de ligne.

Exemples valides

Le système de domaines accepte des origines strictes ou des caractères génériques (wildcards) :

  • votre-entreprise.com (autorise uniquement la racine).
  • *.votre-entreprise.com (autorise la racine et tout sous-domaine, comme app.votre-entreprise.com).
  • https://portail.votre-entreprise.com (très spécifique).

Sans domaines : lecture seule

Si la liste de domaines est vide, n’importe quel site peut intégrer le devis, mais uniquement pour l’afficher. L’approbation, la signature et le paiement ne sont pas proposés dans l’iframe : à la place apparaît un bouton qui ouvre la proposition dans un nouvel onglet, sur le domaine de Cord, où aucun site tiers ne peut rien superposer. Les événements sont émis sans detail (ni nom du signataire, ni URL de paiement).

Dès qu’au moins un domaine est enregistré, frame-ancestors restreint tous les ancêtres de l’iframe et le devis devient interactif.

Les événements n’atteignent que votre origine

Le SDK ajoute le paramètre parentOrigin (le window.location.origin de votre page) à l’URL de l’iframe. S’il correspond à votre liste, window.postMessage adresse les événements uniquement à cette origine. En l’absence de correspondance, l’iframe reste protégée par frame-ancestors : seule une page de vos domaines peut figurer dans la chaîne de frames.

Le paiement ne s’exécute jamais dans l’iframe

La page de paiement ne peut en aucun cas être encadrée. Lors d’un paiement depuis une intégration, Cord l’ouvre dans sa propre fenêtre et l’événement cord:pay contient son URL absolue. Ainsi, les données de carte ne transitent jamais par un document que votre site, ou un site tiers, pourrait recouvrir.

Clés

  • Clé publiable (pk_live_) : ne fonctionne qu’une fois les domaines autorisés configurés. Sans eux, l’API répond origin_allowlist_required. Les clés pk_test_ fonctionnent depuis n’importe quelle origine, y compris localhost.
  • Clé secrète (sk_) : jamais dans un navigateur. Si une clé secrète arrive depuis un navigateur, l’API répond secret_key_in_browser et vous devez la révoquer : elle est déjà exposée dans le code de la page. @flouviahq/node refuse lui aussi de s’exécuter dans un navigateur.