遷移至 IFRAME 沙箱模式

Apps Script 會使用安全沙箱,在特定情況下為 應用程式提供保護性隔離功能。除了 IFRAME 以外,所有沙箱模式現已停用。使用舊版沙箱模式的應用程式現在會自動使用較新的 IFRAME 模式。

先前使用 HTML 服務的舊版模式的應用程式,可能需要針對 IFRAME 模式進行變更,以解決下列差異:

  • 您現在必須使用 target="_top"target="_blank" 覆寫連結的 target 屬性
  • HTML 服務提供的 HTML 檔案必須包含 <!DOCTYPE html>、<html> 和 <body> 標記
  • Google 原生載入器程式庫 api.js 不會在 IFRAME 模式下自動載入
  • Picker 使用者需要呼叫 setOrigin(),因為內容是從新網域提供
  • 不支援部分舊版瀏覽器,包括 IE9
  • 匯入的資源現在必須使用 HTTPS
  • 系統不再預設禁止提交表單

這些差異將在下文中詳細說明。

IFRAME 模式中,您需要將連結目標屬性設為 _top_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>

您也可以在包含網頁的標頭區段中,使用 <base> 標記覆寫這個屬性:

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

頂層 HTML 標記

NATIVE (和 EMULATED) 沙箱模式下,系統會自動將特定 HTML 標記新增至 Apps Script .html 檔案,但在使用 IFRAME 模式時不會發生這種情況。

為確保系統能正確使用 IFRAME 提供專案網頁,請將網頁內容包在下列頂層代碼中:

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

必須明確載入原生 JavaScript 載入器程式庫

依賴原生載入器程式庫 api.js 自動載入功能的指令碼,必須變更為明確載入此程式庫,如以下範例所示:

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

Google Picker API 異動

使用 Google Picker API 時,現在必須在建構 PickerBuilder 時呼叫 setOrigin(),並傳入來源 google.script.host.origin,如以下範例所示:

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

如需完整的工作範例,請參閱「檔案開啟對話方塊」一節。

瀏覽器支援

IFRAME 沙箱模式是以 HTML5 中的 iframe 沙箱功能為基礎。部分舊版瀏覽器 (例如 Internet Explorer 9) 不支援這項功能。如果您的 Apps Script 專案同時符合下列兩種情況,就可能會發生這個問題:

  • 使用 HtmlService,且
  • 先前使用 EMULATEDNATIVE 沙箱

將這些應用程式遷移至 IFRAME 沙箱模式,表示這些應用程式可能無法再在某些舊版瀏覽器 (尤其是 IE9 及更早版本) 上運作,因為這些瀏覽器不支援 HTML5 的 iframe 沙箱功能。

已要求 IFRAME 模式或完全不使用 HtmlService 的應用程式不會受到這項問題的影響。

匯入的資源現在必須使用 HTTPS

先前使用 HTTP 匯入資源的應用程式必須改用 HTTPS。

系統不再預設禁止提交表單

NATIVE 沙箱中,HTML 表單無法實際提交及瀏覽網頁。因此,開發人員只需在提交按鈕中新增 onclick 處理常式,不必擔心之後發生的情況。

不過,在 IFRAME 模式中,HTML 表單可提交,如果表單元素未指定 action 屬性,則會提交至空白頁面。更糟的是,在 onclick 處理常式有機會完成之前,內部 iframe 會重新導向至空白頁面。

解決方法是在網頁中加入 JavaScript 程式碼,防止表單元素實際提交,讓點擊處理常式有時間運作:

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

如需完整範例,請參閱 HtmlService 指南的「用戶端與伺服器間的通訊」一節。