IFRAME サンドボックスモードに移行する

Google Apps Script では、特定の状況で Google Workspace アプリケーションを保護するために、セキュリティサンドボックスを使用します。IFRAME を除くすべてのサンドボックスモードは廃止されました。古いサンドボックスモードを使用するアプリは、新しい IFRAME モードを自動的に使用するようになりました。

HTML Service で以前のモードを使用していたアプリは、次の違いに対応するために IFRAME モードに変更が必要になる場合があります。

リンクの target 属性を target="_top" または target="_blank" を使用してオーバーライドする必要があります。
HTML Service によって提供される HTML ファイルには、<!DOCTYPE html>、<html>、<body> タグを含める必要があります。
gapi ローダーライブラリ（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>

この属性は、囲みウェブページの 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>

gapi ローダーライブラリを明示的に読み込む必要がある

gapi ローダーライブラリ（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 を使用している
以前は EMULATED または NATIVE サンドボックスを使用していた

これらのアプリを IFRAME サンドボックスモードに移行すると、HTML5 の iframe サンドボックス機能をサポートしていない一部の古いブラウザ（特に IE9 以前）では動作しなくなる可能性があります。

すでに IFRAME モードをリクエストしているアプリや、HtmlService をまったく使用していないアプリは、この問題の影響を受けません。

インポートされたリソースに HTTPS が必要になった

HTTP を使用してリソースをインポートしていた以前のアプリケーションは、代わりに HTTPS を使用するように変更する必要があります。

フォームの送信はデフォルトでブロックされなくなった

NATIVE サンドボックスでは、HTML フォームが実際に送信されてページに移動することがブロックされていました。そのため、デベロッパーは送信ボタンに onclick ハンドラを追加しても、その後の処理を気にする必要はありませんでした。

IFRAME モードでは、HTML フォームの送信が許可されます。フォーム要素に action 属性が指定されていない場合は、空白のページに送信されます。さらに、内部の iframe は、onclick ハンドラが完了する前に空白のページにリダイレクトされます。

解決策として、フォーム要素が実際に送信されないようにする JavaScript コードをページに追加します。これにより、クリックハンドラが機能する時間を確保できます。

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

完全な例については、HtmlService ガイドのクライアントとサーバー間の通信をご覧ください。

IFRAME サンドボックス モードに移行する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。