🎉

Google Apps ScriptのWebアプリをiframeに埋め込む方法

2023/01/13に公開
3

埋め込みできない・・・

Google Apps Scriptで作成したWebアプリケーションはデフォルトだとiframeに埋め込むことができません。
これはレスポンスヘッダーのX-Frame-OptionsSAMEORIGINが設定されている為です。

この状態だと埋め込みエラーが表示される・・・

setXFrameOptionsModeを設定しよう

HtmlServicesetXFrameOptionsModeメソッドにXFrameOptionsModeを渡すことで、X-Frame-Optionsの値を変更できます。
XFrameOptionsMode.ALLOWALLを指定してみましょう。

function doGet() {
  let html = HtmlService
    .createHtmlOutputFromFile('index')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return html;
}

templateを使っている場合もevaluate()実行後に同様の設定が可能です。

function doGet() {
  let template = HtmlService.createTemplateFromFile("index");

  template.tite = 'タイトル';

  return template
    .evaluate()
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

再デプロイとレスポンスヘッダーの確認

再デプロイ後、レスポンスヘッダーを確認するとX-Frame-Optionsが無くなっています。

埋め込み再挑戦

このWebアプリを再度iframeで埋め込むと・・・
無事に表示することができました。

SARAH Tech Blog

Discussion

ぺんぎん@自作PCぺんぎん@自作PC

なんか…できません…。

function doGet(e) {
var re = HtmlService.createTemplateFromFile("index");
//メッセージを追加
re.version = "1.20.1";
return re.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag("viewport","width=device-width,initial-scale=1").setFaviconUrl("https://upload.wikimedia.org/wikipedia/commons/6/68/Firefox_Developer_Edition_logo%2C_2017.png").addMetaTag("apple-mobile-web-app-capable","yes").addMetaTag("mobile-web-app-capable","yes");
}

LilycatLilycat

iframeのsrcに設定しているURLが「デプロイをテスト」で発行されるテスト用のURLになっていませんか?(末尾がdevで終わる)
本記事の設定を反映させるには正式なデプロイを行い、末尾がexecのURLを使ってみてください。

記事内の表現が分かりづらかったので、追記させていただきました!

ログインするとコメントできます