Search
  1. Home
  2. Documentation
  3. OneSpan Sign
  4. Guides
  5. Meilleures pratiques iFrame

Meilleures pratiques iFrame

Last modified: 2024-10-08

Meilleures pratiques iFrame

Les iFrames peuvent être utilisés pour intégrer le Signer Experience dans une application tierce.

Les sections suivantes décrivent quelques bonnes pratiques pour les développeurs qui effectuent une telle intégration :

Partage de ressources inter-origines

Pour améliorer les performances et la sécurité, la communication inter-origine est activement bloquée par tous les « navigateurs evergreen » (c'est-à-dire les navigateurs qui sont automatiquement mis à jour vers les versions futures).

Cela pose divers obstacles au partage des ressources entre origines (CORS), mais les sections suivantes illustrent comment certains de ces problèmes peuvent être surmontés :

Création de témoins de session

Pour créer un témoin de session sur OneSpan Sign, vous devrez peut-être :

  1. Créez la session en ouvrant l'URL iFrame dans une nouvelle fenêtre.
  2. Rafraîchissez votre page avec l'iFrame.

Il est plus probable que vous ayez besoin de la procédure ci-dessus si la session se déroule sur un appareil mobile.

Redirection en dehors d'une iFrame

Si vous utilisez OneSpan Sign à l'intérieur d'une iFrame, puis redirigez vers un autre domaine à partir de cet iFrame, ce domaine doit désactiver l'en-tête X-Frame-Options. Si cela n'est pas fait, la page vers laquelle vous redirigez sera vide.

Pour rediriger en dehors de l'iFrame, pensez à utiliser notre Notificateur d'événement.

Rendre les dimensions d'une iFrame dynamiques

Pour le produit OneSpan Sign, il est souhaitable de rendre la hauteur et la largeur d'une iFrame dynamiques, c'est-à-dire de faire en sorte que ses dimensions soient ajustées automatiquement pour qu'il soit toujours bien visible et que ses côtés soient toujours visibles.

Les sections suivantes abordent trois autres façons d'obtenir une vue complète :

Utilisation des unités de visualisation

Pour garantir une vue complète, vous pouvez utiliser des unités d'affichage et un calculateur en ligne.

Exemple de code

 body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

Utilisation du positionnement fixe

Le moyen le plus sûr de garantir une vue complète est d'utiliser un positionnement fixe.

Exemple de code

iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

En utilisant des dimensions fixes

Pour garantir une vue complète, vous pouvez utiliser des dimensions fixes en vous assurant que l'iFrame utilise 100 % de l'écran.

Exemple de code

html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

Empêcher les utilisateurs mobiles de mettre le contenu à l'échelle

Le code suivant illustre comment empêcher les utilisateurs de dispositifs mobiles de mettre à l'échelle le contenu d'une iFrame. Si vous ne le faites pas, votre iFrame peut cesser d'être en pleine vue.

Exemple de code

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

Ajout d'un défilement CSS basé sur le momentum pour les appareils iOS

Comme vous ne pouvez pas toujours contrôler les dimensions d'une iFrame, il se peut que certains contenus ne soient pas accessibles par défilement. Cela est particulièrement probable pour les appareils iOS comme les iPhones et les iPads.

Pour optimiser la convivialité des appareils iOS :

  1. Créez un élément HTML d'habillage pour votre iFrame (par exemple, créez un div).
  2. Activez le défilement CSS basé sur l'élan sur le wrapper, comme illustré par le code suivant :
    3. -webkit-overflow-scrolling: touch;

La procédure ci-dessus garantit que si le contenu d'une iFrame n'est pas défilable, vous pouvez faire défiler l'élément parent.

Exemple complet

Le code suivant illustre les meilleures pratiques décrites ci-dessus.

Exemple de code

<!DOCTYPE html>
<html>
<head>
  <title></title>
 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
 
  <style>
    html, body {
      margin: 0;
      height: 100%;
    }
 
    body {
      position: relative;
      background: #EEE;
    }
 
    .frame_holder {
      position: absolute;
      top: 50px;
      bottom: 50px;
      left: 50px;
      right: 50px;
      background: #ffffff;
      overflow: hidden;
    }
 
    .my_frame {
      width: 100%;
      height: 100%;
      border: 1px solid #e0e0e0;
    }
  </style>
</head>
 
<body>
  <div class="frame_holder">
    <iframe
      class="my_frame"
      width="100%"
      height="100%"
      frameborder="0"
      scrolling="yes"
      allowTransparency="true"
      src="https://apps.esignlive.com/auth?target=https%3A%2F%2Fapps.esignlive.com%2Ftransaction%2FWghE2Df36wB1CGl6eODNkBn0HiA%3D%2Fsign&loginToken=YXY2R2pOV3pyRnhkcVlzdlNDYjlNZzVjRlZ6WTJVOFFIdFY1a3grSk5TdDZuWkNoZGZ4alFoOWVKcEhGN2VFbWR6RkpSZEN2cDZkMmNjdFlCdXJtS1dSbmFqVlVZbkpLTTJ0cFMzTlpXSGxWVW5OcmRGRkZXbEpQU1dwa1ZHd3hhVXBEZWt0cE1tdFpiV2xtYUV4d1ptNTVORFYxTWtWbVFuaE5PRFE1VjBsMXp5dUQyZmJ0YVZDZzdETjEzLzVBQ1pyalFsOTRBRmsxTWhncXZBN1gxQT09"></iframe>
  </div>
</body>
</html>

Les sections suivantes illustrent deux manières alternatives d'adapter le code ci-dessus pour accéder au service OneSpan Sign :

Pour afficher (ou masquer) un logo, vous pouvez utiliser le paramètre showNseLogoInIframe, qui se trouve dans votre packagesettings.

Was this information helpful?
X