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

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

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 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 サンドボックス モードに移行する

リンク ターゲット属性を設定する