Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@aknm21

GAS で HTML の出力が期待違いのときの覚書

GAS の「ウェブアプリケーションとして実行」の際、Fetch API と DOM 操作の組み合わせが動かない、といったケースをトライアンドエラーで対応していて時間溶かしていたが確認する手段があったのでメモ。

Caja

GAS は HTML のレンダリングに Caja というツールを通してセキュアな状態で出力される。そのため、使えないJSライブラリがあったりエスケープされるなどする。

Cajaは、サードパーティ製のHTML、CSS、JavaScriptを安全にWebサイトに埋め込むためのツールです。埋め込みページと埋め込みアプリケーション間の豊かなインタラクションを可能にします。Cajaは、オブジェクト・キャパシティ・セキュリティ・モデルを使用して、幅広い柔軟なセキュリティ・ポリシーを可能にしているため、Webサイトに埋め込まれたサードパーティのコードがユーザー・データで何をするかを効果的にコントロールできます。

Cajaは、ほとんどのHTMLとCSS、そして最近標準化されたJavaScriptの "strict mode "バージョンをサポートしています。Cajaは、サードパーティのコードが、サポートしていない古いブラウザ上で新しいJavaScript機能を使用することを可能にします。

google/caja: Caja is a tool for safely embedding third party HTML, CSS and JavaScript in your website.

Introduction  |  Caja  |  Google Developers

「caja」は、スペイン語で「箱」の意味なので、読みもスペイン語で「カハ」になる。

Caja project - Wikipedia

Playground

動作確認用のツールも用意されている。

Caja Playground

Caja Playground - Google Chrome 2020_05_31 21_14_36.png

左側にサンプルがあるので試した。

リストクリックして「load」クリックしてもうんともすんとも言わないのでパスを直打ち。

出てきた HTML のソースをエディタにコピペ。

Caja Playground - Google Chrome 2020_05_31 21_52_03.png

「Cajole」をクリックするとレンダリング結果が表示される。

Caja Playground - Google Chrome 2020_05_31 21_52_08.png

JQuery 使った簡単な動作だったものが動かなくなっている。

「Runtime Message」タブを開くと JQuery 読み込まれてないエラーが出ていた。

Caja Playground - Google Chrome 2020_05_31 21_52_17.png

Uncaught script error: 'Uncaught Error: not loaded' in source: 'http://code.jquery.com/jquery-1.8.2.js' at line: -1
Uncaught script error: 'Uncaught Error: not loaded' in source: 'http://code.jquery.com/ui/1.8.23/jquery-ui.js' at line: -1
Uncaught script error: 'Uncaught TypeError: (1 , $) is not a function' in source: 'https:/' at line: -1

出力は生の HTML というわけではない?
見方がぱっと見で分からなかった。ないかも。

なにか詰まったら確認の一手段として。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
aknm21

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?