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

Apps Script usa una zona de pruebas de seguridad para brindar aislamiento protector a Google Workspace aplicaciones en ciertas situaciones. Todo Los modos de zona de pruebas dejarán de estar disponibles, excepto por IFRAME. Apps que usan una zona de pruebas más antigua ahora usan automáticamente el modo IFRAME más reciente.

Es posible que las apps que antes usaban estos modos más antiguos con el servicio HTML necesiten Realiza cambios en el modo IFRAME para abordar las siguientes diferencias:

  • Ahora debes anular el atributo target del vínculo mediante target="_top". target="_blank"
  • Los archivos HTML publicados por el servicio HTML deben incluir lo siguiente: <!DOCTYPE html>, <html> y <body> etiquetas
  • La biblioteca api.js del cargador nativo de Google no se carga automáticamente en Modo IFRAME
  • Los usuarios del selector deben llamar 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
  • De forma predeterminada, ya no se impide el envío de formularios

Estas diferencias se detallan en las siguientes secciones.

En el modo IFRAME, debes establecer el atributo de destino de 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 el método <base> etiqueta en el 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), algunas etiquetas HTML se automáticamente a un archivo .html de Apps Script, pero esto no sucede cuando usando el modo IFRAME.

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

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

La biblioteca del cargador de JavaScript nativo se debe cargar de forma explícita

Secuencias de comandos que dependían de la carga automática de la biblioteca del cargador nativo api.js se debe cambiar para cargar esta biblioteca explícitamente, como en el siguiente ejemplo:

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

Cambio en la API de selector de Google

Cuando usas la API de Google Picker, ahora debes llamar a setOrigin() cuando construyas. PickerBuilder y pasa 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 funcional completo, consulta Diálogos de archivo abierto.

Navegadores compatibles

El modo de zona de pruebas IFRAME se basa en Zona de pruebas de iframe en HTML5. Esto no es compatible con algunos navegadores más antiguos, como Internet Explorer 9. Esta puede ser un problema si tu proyecto de Apps Script presenta las siguientes características:

  • usa HtmlService.
  • usaron anteriormente la zona de pruebas de EMULATED o NATIVE

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

Las apps que ya solicitan el modo IFRAME o que no usan HtmlService en absoluto no no se vean afectadas por este problema.

Ahora se requiere HTTPS para los recursos importados

Las aplicaciones anteriores que importaron recursos usando HTTP deben cambiarse a usa HTTPS en su lugar.

De forma predeterminada, ya no se impide el envío de formularios

Se impidió que los formularios HTML de la zona de pruebas se enviaran en un número de NATIVE y navegar por la página. Dicho esto, un desarrollador podría agregar simplemente un onclick. al botón Enviar y no tendrás que preocuparte por lo que ocurrió después.

Sin embargo, con el modo IFRAME, se pueden enviar formularios HTML y, si se trata de no tiene un atributo action especificado, se enviará a una página en blanco. Y, peor aún, el iframe interno redireccionará a la página en blanco antes de la onclick. el controlador tenga la oportunidad de finalizar.

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

<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. Comunicación de cliente a servidor.