Cómo migrar al modo de zona de pruebas de IFRAME

Apps Script usa una zona de pruebas de seguridad para proporcionar aislamiento protector a las aplicaciones en ciertas situaciones. Google WorkspaceTodos los modos de zona de pruebas, excepto IFRAME, se retiraron. Las apps que usan modos de zona de pruebas más antiguos ahora usan el modo IFRAME más reciente de forma automática.

Es posible que las apps que antes usaban estos modos anteriores con el servicio HTML deban realizar cambios para el modo IFRAME, de modo que se aborden las siguientes diferencias:

  • Ahora debes anular el atributo target del vínculo con target="_top" o target="_blank".
  • Los archivos HTML que entrega el servicio HTML deben incluir las etiquetas <!DOCTYPE html>, <html> y <body>.
  • La biblioteca de carga nativa de Google api.js no se carga automáticamente en el modo IFRAME.
  • Los usuarios del selector deben llamar a setOrigin() porque el contenido se entrega desde un dominio nuevo.
  • No se admiten algunos navegadores anteriores, como IE9.
  • Los recursos importados ahora deben usar HTTPS
  • Ya no se impide el envío de formularios de forma predeterminada

Estas diferencias se detallan en las siguientes secciones.

En el modo IFRAME, debes establecer el atributo de destino del vínculo en _top o _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>

También puedes anular este atributo con la etiqueta <base> dentro de la sección head de la página web envolvente:

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

Etiquetas HTML de nivel superior

En el modo de zona de pruebas NATIVE (y EMULATED), ciertas etiquetas HTML se agregarían automáticamente a un archivo .html de Apps Script, pero esto no sucede cuando se usa el modo IFRAME.

Para asegurarte de que las páginas de tu proyecto se publiquen correctamente con IFRAME, incluye el contenido de la página en las siguientes etiquetas de nivel superior:

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

Se debe cargar de forma explícita la biblioteca del cargador de JavaScript nativo

Las secuencias de comandos que dependían de la carga automática de la biblioteca del cargador nativo api.js deben modificarse para cargar esta biblioteca de forma explícita, como en el siguiente ejemplo:

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

Cambio en la API de Google Picker

Cuando uses la API de Google Picker, ahora debes llamar a setOrigin() cuando construyas el PickerBuilder y pases el origen google.script.host.origin, como se muestra en el siguiente ejemplo:

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);
}

Para ver un ejemplo completo, consulta Cuadros de diálogo de apertura de archivos.

Navegadores compatibles

El modo de zona de pruebas IFRAME se basa en la función de zona de pruebas de iframe de HTML5. Esta función no es compatible con algunos navegadores más antiguos, como Internet Explorer 9. Esto puede ser un problema si tu proyecto de Apps Script cumple con las siguientes condiciones:

  • Usa HtmlService.
  • uso anterior de la zona de pruebas EMULATED o NATIVE

Migrar estas apps al modo de zona de pruebas de IFRAME significa que es posible que ya no funcionen en algunos navegadores más antiguos (en particular, IE9 y versiones anteriores) que no admiten la función de zona de pruebas de iframe de HTML5.

Este problema no afecta a las apps que ya solicitan el modo IFRAME o que no usan HtmlService en absoluto.

Ahora se requiere HTTPS para los recursos importados

Las aplicaciones anteriores que importaban recursos con HTTP deben cambiarse para usar HTTPS.

Ya no se impide el envío de formularios de forma predeterminada

En NATIVE, se evitó que los formularios HTML en zona de pruebas se enviaran y navegaran por la página. Dado esto, un desarrollador podría simplemente agregar un controlador onclick al botón de envío y no tener que preocuparse por lo que sucedió después.

Sin embargo, con el modo IFRAME, se permite el envío de formularios HTML y, si un elemento de formulario no tiene especificado el atributo action, se enviará a una página en blanco. Peor aún, el iframe interno se redireccionará a la página en blanco antes de que el controlador onclick tenga la oportunidad de finalizar.

La solución es agregar código JavaScript a tu página que impida que los elementos del formulario se envíen, de modo que los controladores de clics tengan tiempo para funcionar:

<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>

Puedes encontrar un ejemplo completo en la guía de HtmlService sobre la comunicación entre el cliente y el servidor.