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