Zenn
SARAH Tech BlogPublicationへの投稿
🎉

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

Lilycat
2023/01/13に公開
3件
Google Apps Script
tech

埋め込みできない・・・

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

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

setXFrameOptionsModeを設定しよう

HtmlServiceのsetXFrameOptionsModeメソッドに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
SARAH Tech BlogPublication

SARAHでは一皿に特化したごはん情報の投稿・配信・収集・解析するサービスをtoC,toBと多角的に展開しています。アプリ / Web / SaaS / データサイエンス を最新の環境と技術で広く運用します。 技術スタック詳細はこちら→ stackshare.io/companies/sarah-inc

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を使ってみてください。

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