Meilleures pratiques iFrame

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

• Partage des ressources inter-origines

• Rendre les dimensions d’un iFrame dynamiques

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

• Ajout d’un CSS de défilement basé sur le momentum pour les appareils iOS 

• Exemple complet

Partage des ressources inter-origines

Pour améliorer les performances et la sécurité, la communication inter-origines est activement bloquée par tous les « navigateurs évolutifs » (c’est-à-dire les navigateurs qui sont automatiquement mis à niveau vers les versions ultérieures).

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

• Création de cookies de session

• Redirection en dehors d’un iFrame

Création de cookies 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 de l’iFrame dans une nouvelle fenêtre.

2. Rafraîchissez votre page avec l’iFrame.

Vous êtes plus susceptible d’avoir besoin de la procédure ci-dessus si la session se déroule sur un appareil mobile.

Redirection en dehors d’un iFrame

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

Pour effectuer une redirection en dehors de l’iFrame, envisagez d’utiliser notre Event Notifer.

Rendre les dimensions d’un iFrame dynamiques

Pour le produit OneSpan Sign, il est souhaitable de rendre la hauteur et la largeur d’un iFrame dynamiques, c’est-à-dire de s’assurer que ses dimensions sont ajustées automatiquement afin qu’il soit toujours bien en vue 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 la fenêtre d’affichage

• Utilisation du positionnement fixe

• Utilisation de dimensions fixes

Utilisation des unités de la fenêtre d’affichage

Pour garantir une vue complète, vous pouvez utiliser des unités de fenêtre d’affichage et une calculatrice 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 d’assurer 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%;
}

Utilisation de 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 à l’échelle le contenu

Le code suivant illustre comment empêcher les utilisateurs d’appareils mobiles de mettre à l’échelle le contenu d’un iFrame. Si vous ne le faites pas, votre iFrame risque de ne plus être bien en 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 CSS de défilement basé sur le momentum pour les appareils iOS 

Étant donné que vous ne pouvez pas toujours contrôler les dimensions d’un iFrame, il se peut que certains contenus ne soient pas accessibles via le défilement. Cela est particulièrement probable pour les appareils iOS tels que les iPhones et les iPads.

Pour optimiser la convivialité des appareils iOS :

1. Créez un élément HTML wrapper pour votre iFrame (par exemple, créez un div).

2. Activez le CSS de défilement basé sur le momentum sur le wrapper, comme illustré par le code suivant :

   -webkit-overflow-scrolling: touch;

La procédure ci-dessus garantit que si le contenu d’un 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 façons alternatives d’adapter le code ci-dessus pour accéder au service OneSpan Sign :

• Authentication Tokens

• Signing URL

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