このページは Cloud Translation API によって翻訳されました。

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

Apps Script は、特定の状況で Google Workspace アプリケーションを保護するために、セキュリティサンドボックスを使用します。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>

この属性は、囲みウェブページの 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 Script プロジェクトが次の両方を満たしている場合、このことが問題になる可能性があります。

HtmlService を使用し、
以前に使用した EMULATED または NATIVE サンドボックス

これらのアプリを 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 ガイドのクライアントからサーバーへの通信をご覧ください。

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

リンク ターゲット属性の設定