Migration vers le mode IFRAME Sandbox

Apps Script utilise un bac à sable de sécurité pour assurer une isolation protectrice Google Workspacedes applications dans certaines situations. Tous les modes de bac à sable sont désormais arrêtés, à l'exception de IFRAME. Les applications qui utilisent d'anciens modes de bac à sable utilisent désormais automatiquement le mode IFRAME le plus récent.

Les applications qui utilisaient auparavant ces anciens modes avec le service HTML devront peut-être modifier le mode IFRAME pour résoudre les différences suivantes:

  • Vous devez maintenant remplacer l'attribut target du lien à l'aide de target="_top" ou target="_blank".
  • Les fichiers HTML diffusés par le service HTML doivent inclure des balises <!DOCTYPE html>, <html> et <body>.
  • La bibliothèque de chargeurs natifs Google api.js ne se charge pas automatiquement en mode IFRAME
  • Les utilisateurs de Picker doivent appeler setOrigin(), car le contenu est diffusé à partir d'un nouveau domaine
  • Certains navigateurs plus anciens, dont IE9, ne sont pas pris en charge.
  • Les ressources importées doivent désormais utiliser HTTPS
  • L'envoi de formulaires n'est plus bloqué par défaut

Ces différences sont détaillées dans les sections suivantes.

En mode IFRAME, vous devez définir l'attribut cible du lien sur _top ou _blank:

Code.js

function doGet() {
  var template = HtmlService.createTemplateFromFile('top');
  return template.evaluate();
}

top.html

<!DOCTYPE html>
<html>
 <body>
   <div>
     <a href="http://google.com" target="_top">Click Me!</a>
   </div>
 </body>
</html>

Vous pouvez également remplacer cet attribut à l'aide de la balise <base> dans la section <head> de la page Web d'origine:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   <div>
     <a href="http://google.com">Click Me!</a>
   </div>
 </body>
</html>

Balises HTML de premier niveau

Sous le mode bac à sable NATIVE (et EMULATED), certaines balises HTML sont automatiquement ajoutées à un fichier .html Apps Script, mais cela ne se produit pas lorsque vous utilisez le mode IFRAME.

Pour vous assurer que les pages de votre projet sont diffusées correctement à l'aide de IFRAME, encapsulez le contenu de la page dans les tags de premier niveau suivants:

<!DOCTYPE html>
<html>
  <body>
    <!-- Add your HTML content here -->
  </body>
</html>

La bibliothèque de chargeur JavaScript native doit être chargée explicitement

Les scripts qui utilisaient le chargement automatique de la bibliothèque de chargeur native api.js doivent être modifiés pour charger explicitement cette bibliothèque, comme dans l'exemple suivant:

<script src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>

Modification de l'API Google Picker

Lorsque vous utilisez l'API Google Picker, vous devez maintenant appeler setOrigin() lors de la construction de "PickerBuilder" et transmettre le google.script.host.origin d'origine, comme illustré dans l'exemple suivant:

function createPicker(oauthToken) {
  var picker = new google.picker.PickerBuilder()
      .addView(google.picker.ViewId.SPREADSHEETS) // Or a different ViewId
      .setOAuthToken(oauthToken)
      .setDeveloperKey(developerKey)
      .setCallback(pickerCallback)
      .setOrigin(google.script.host.origin) // Note the setOrigin
      .build();
  picker.setVisible(true);
}

Pour obtenir un exemple fonctionnel complet, consultez la section Boîtes de dialogue d'ouverture de fichier.

Prise en charge des navigateurs

Le mode bac à sable IFRAME est basé sur la fonctionnalité de bac à sable iFrame disponible dans HTML5. Cette fonctionnalité n'est pas prise en charge dans certains navigateurs plus anciens, comme Internet Explorer 9. Cela peut poser problème si votre projet Apps Script:

  • utilise HtmlService, et
  • Ancienne utilisation du bac à sable EMULATED ou NATIVE

Si vous migrez ces applications vers le mode bac à sable IFRAME, elles risquent de ne plus fonctionner sur certains navigateurs plus anciens (IE9 et versions antérieures, par exemple) qui ne sont pas compatibles avec la fonctionnalité iFrame de bac à sable de HTML5.

Les applications qui demandent déjà le mode IFRAME ou qui n'utilisent pas du tout HtmlService ne sont pas concernées par ce problème.

HTTPS est désormais requis pour les ressources importées

Les applications précédentes qui importaient des ressources via HTTP doivent être remplacées par HTTPS.

L'envoi de formulaires n'est plus bloqué par défaut

Sous NATIVE, l'envoi et la navigation sur la page ne sont pas autorisés dans l'environnement de bac à sable des formulaires HTML. Il peut donc simplement ajouter un gestionnaire onclick au bouton d'envoi, sans avoir à se soucier de ce qui s'est passé ensuite.

Avec le mode IFRAME, cependant, les formulaires HTML sont autorisés à envoyer, et si un élément de formulaire n'a pas d'attribut action spécifié, il sera envoyé vers une page vierge. Pire encore, l'iFrame interne redirigera vers la page vierge avant que le gestionnaire onclick n'ait la possibilité de terminer.

La solution consiste à ajouter à votre page du code JavaScript qui empêche l'envoi réel des éléments du formulaire, afin que les gestionnaires de clics aient le temps de fonctionner:

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
        event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);
</script>

Un exemple complet est disponible dans le guide HTMLService intitulé Communication client à serveur.