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

Apps Script usa una zona de pruebas de seguridad para proporcionar aislamiento protector para las Google Workspace aplicaciones en determinadas situaciones. Todos los modos de zona de pruebas ahora dejarán de estar disponibles, excepto IFRAME. Las apps que usan modos de zona de pruebas más antiguos ahora usan automáticamente el modo IFRAME más reciente.

Es posible que las apps que antes usaban estos modos anteriores con el servicio HTML deban realizar cambios en el modo IFRAME para abordar las siguientes diferencias:

  • Ahora debes anular el atributo target del vínculo mediante target="_top" o target="_blank".
  • Los archivos HTML que entrega el servicio HTML deben incluir las etiquetas <!DOCTYPE html>, <html> y <body>
  • La biblioteca del cargador nativo 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.
  • Algunos navegadores más antiguos, como IE9, no son compatibles.
  • Los recursos importados ahora deben usar HTTPS
  • El envío de formularios ya no se impide 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 usando la etiqueta <base> dentro de la sección de encabezado de la página web adjunta:

<!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án 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 entreguen correctamente con IFRAME, une el contenido de tu página con 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 se deben cambiar 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 del selector de Google

Cuando uses la API de selector de Google, deberás llamar a setOrigin() cuando construyas PickerBuilder y pasar el google.script.host.origin de origen, 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 Diálogos 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 en HTML5. Algunos navegadores más antiguos, como Internet Explorer 9, no admiten esta opción. Esto puede ser un problema si en tu proyecto de Apps Script ocurre lo siguiente:

  • usa HtmlService y
  • se usó anteriormente la zona de pruebas EMULATED o NATIVE

Si migras estas apps al modo de zona de pruebas IFRAME, 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 afectará a las apps que ya solicitan el modo IFRAME o que no usan HtmlService.

Ahora se requiere HTTPS para los recursos importados

Las aplicaciones anteriores que importaron recursos con HTTP deben cambiarse para usar HTTPS en su lugar.

El envío de formularios ya no se impide de forma predeterminada

En la zona de pruebas de NATIVE, los formularios HTML de la zona de pruebas no podían enviar ni navegar por la página. Por lo tanto, un desarrollador podría simplemente agregar un controlador onclick al botón de envío sin preocuparse por lo que sucedió después.

Sin embargo, con el modo IFRAME, se pueden enviar formularios HTML y, si un elemento del formulario no tiene un atributo action especificado, se enviará a una página en blanco. Peor aún, el iframe interno 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 para evitar que los elementos del formulario se envíen, de modo que los controladores de clics tengan tiempo de 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>

Se puede encontrar un ejemplo completo en la guía de HtmlService Comunicación entre cliente.