迁移到 IFRAME 沙盒模式

8еа39680ц8 5138ц2ц823 800е90953а 1685бдфб67

Apps Script 使用安全沙盒在某些情况下为 应用提供保护性隔离。除 IFRAME 外,所有沙盒模式现已弃用。使用旧版沙盒模式的应用现在会自动使用较新的 IFRAME 模式。

之前将这些旧版模式与 HTML 服务搭配使用的应用可能需要针对 IFRAME 模式进行更改,以解决以下差异:

  • 现在,您必须使用 target="_top"target="_blank" 替换链接的 target 属性
  • HTML 服务提供的 HTML 文件必须包含 <!DOCTYPE html>、<html> 和 <body> 标记
  • Google 原生加载器库 api.js 不会在 IFRAME 模式下自动加载
  • 选择器用户需要调用 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>

您还可以在封闭网页的 head 部分使用 <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 脚本项目同时满足以下条件,就可能会出现此问题:

  • 使用 HtmlService,并且
  • 之前使用过 EMULATEDNATIVE 沙盒

将这些应用迁移到 IFRAME 沙盒模式意味着,它们可能无法再在某些不支持 HTML5 的 iframe 沙盒功能的旧版浏览器(尤其是 IE9 及更低版本)上正常运行。

已请求 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 指南中的客户端到服务器通信部分。