Bermigrasi ke Mode Sandbox IFRAME

Apps Script menggunakan sandbox keamanan untuk memberikan isolasi perlindungan bagi aplikasi Google Workspace dalam situasi tertentu. Semua mode sandbox kini dihentikan kecuali IFRAME. Aplikasi yang menggunakan mode sandbox lama kini otomatis menggunakan mode IFRAME yang lebih baru.

Aplikasi yang sebelumnya menggunakan mode lama ini dengan Layanan HTML mungkin perlu melakukan perubahan untuk mode IFRAME, untuk mengatasi perbedaan berikut:

  • Sekarang Anda harus mengganti atribut target link menggunakan target="_top" atau target="_blank"
  • File HTML yang ditayangkan oleh Layanan HTML harus menyertakan tag <!DOCTYPE html>, <html>, dan <body>
  • Library loader native Google api.js tidak dimuat secara otomatis dalam mode IFRAME
  • Pengguna Pemilih harus memanggil setOrigin() karena konten ditayangkan dari domain baru
  • Beberapa browser lama, termasuk IE9, tidak didukung
  • Resource yang diimpor kini harus menggunakan HTTPS
  • Pengiriman formulir tidak lagi dicegah secara default

Perbedaan ini dijelaskan secara mendetail di bagian berikut.

Dalam mode IFRAME, Anda perlu menetapkan atribut target link ke _top atau _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>

Anda juga dapat mengganti atribut ini menggunakan tag <base> dalam bagian head halaman web yang melingkupi:

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

Tag HTML tingkat atas

Dalam mode sandbox NATIVE (dan EMULATED), tag HTML tertentu akan otomatis ditambahkan ke file .html Apps Script, tetapi hal ini tidak terjadi saat menggunakan mode IFRAME.

Untuk memastikan halaman project ditayangkan dengan benar menggunakan IFRAME, gabungkan konten halaman dalam tag level teratas berikut:

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

Library loader JavaScript native harus dimuat secara eksplisit

Skrip yang mengandalkan pemuatan otomatis library loader native api.js harus diubah untuk memuat library ini secara eksplisit, seperti dalam contoh berikut:

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

Perubahan Google Picker API

Saat menggunakan Google Picker API, Anda kini harus memanggil setOrigin() saat membuat PickerBuilder dan meneruskan asal google.script.host.origin, seperti yang ditunjukkan dalam contoh berikut:

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

Untuk contoh kerja lengkap, lihat Dialog buka file.

Dukungan browser

Mode sandbox IFRAME didasarkan pada fitur sandboxing iframe di HTML5. Fitur ini tidak didukung di beberapa browser lama, seperti Internet Explorer 9. Hal ini dapat menjadi masalah jika project Apps Script Anda:

  • menggunakan HtmlService, dan
  • sandboxing EMULATED atau NATIVE yang sebelumnya digunakan

Memigrasikan aplikasi ini ke mode sandbox IFRAME berarti aplikasi tersebut mungkin tidak lagi berfungsi di beberapa browser lama (terutama IE9 dan yang lebih lama) yang tidak mendukung fitur sandbox iframe HTML5.

Aplikasi yang sudah meminta mode IFRAME atau tidak menggunakan HtmlService sama sekali tidak terpengaruh oleh masalah ini.

HTTPS kini diperlukan untuk resource yang diimpor

Aplikasi sebelumnya yang mengimpor resource menggunakan HTTP harus diubah agar menggunakan HTTPS.

Pengiriman formulir tidak lagi dicegah secara default

Di NATIVE, sandboxing formulir HTML dicegah agar tidak benar-benar mengirimkan dan menavigasi halaman. Dengan demikian, developer cukup menambahkan pengendali onclick ke tombol kirim dan tidak perlu khawatir dengan apa yang terjadi setelahnya.

Namun, dengan mode IFRAME, formulir HTML diizinkan untuk dikirim, dan jika elemen formulir tidak memiliki atribut action yang ditentukan, formulir akan dikirim ke halaman kosong. Lebih buruk lagi, iframe dalam akan mengalihkan ke halaman kosong sebelum pengendali onclick memiliki kesempatan untuk menyelesaikan.

Solusinya adalah menambahkan kode JavaScript ke halaman Anda yang mencegah elemen formulir benar-benar dikirim, sehingga pengendali klik memiliki waktu untuk berfungsi:

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

Contoh lengkap dapat ditemukan di panduan HtmlService Komunikasi Klien ke Server.