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

Apps Script はセキュリティ サンドボックスを使用する 保護分離を提供するための Google Workspace アプリケーションの動作に影響します。すべて サンドボックス モードのサポートが終了しました(IFRAMEを除く)。古いサンドボックスを使用しているアプリ モードでは、新しい IFRAME モードが自動的に使用されるようになりました。

以前に HTML サービスでこれらの古いモードを使用していたアプリでは、以下を行う必要があります。 次の違いに対応するために、IFRAME モードを変更します。

  • target="_top" を使用してリンクの target 属性をオーバーライドする必要があります。 target="_blank"
  • 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>head タグ内にタグを付けます。 セクションに追加されます。

<!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 を使用する際に、作成時に setOrigin() を呼び出す必要があります。 PickerBuilder を作成し、以下に示すように起点の 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 サンドボックス モードは、 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 コードを追加して 要素が実際に送信されないようにして、クリック ハンドラが 関数:

<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 ガイドをご覧ください。 クライアント間の通信