Q&A
この何もわからない状態でアドバイス得て理解進むんでしょうか。
CodePenやはてぶなどのhtml/CSS/JS編集画面はどのように作成されているのですか。
##How to
htmlには文字列のinputタグしか見当たりません。検証してみても<div>で囲まれていることしかわかりませんでした。pandasの to_htmlメソッドは使えそうですが、CSSやJSとの関係性がわからないので理解しきれません。JSライブラリでできることの範囲もわかりません。そもそもJSライブラリではJS編集画面つくれませんよね・・・？
このソースコードを見ればしくみわかるよとか、こう検索すればたくさんでてくるよというキーワードでもいいので教えて下さい。そのための便利な言語がほかにあればJavaやPythonではなくても大丈夫です。
##XSS
XSS対策は、正規表現で<script>入力制限をかければいけそうですが、CodePenなどのJavaScriptを実行できるプラットフォームはどうなっているのですか。一般論でいいので、ご教授願います。ここで、このような質問をしてなにか作った場合、対象物とここの情報を見たクラッカーがいてもリスクは変わりませんか。多くのSNSでの文章はformatしないとかでXSSの危険性は減っているという解釈でよろしいでしょうか。
###参考にしたページ
Vue.jsのセキュリティの解説ページ#HTMLの挿入
それぞれのタグと本件との関係は？
理解のきっかけが見つからず質問しました。私の頭だと、浅い情報のキーワードしかうかびません。「HTML、CSS、JavaScript として実行」でも「html 編集画面 作成」でもプログラムの情報はとても少ないです。formatやparseを使うのかなと思いましたが、CodePenのJSやブログのことはなんと検索すれば出てくるのかというところで躓きました。コンピューターの仕組みから学べばいつかはたどりつくかもしれませんが、それよりも手前にヒントがあってもいい話だと思いました。
タグとの関係は、私が注目している言語、今回使えそうだと思ったライブラリです。
現在進行系で考え、調べているのでお助けいただければ幸いです。
CodePenに問い合わせてみては？
使われている技術は、第三者では、概要は調べる方法はあっても、
その深い中身までは絶対にわかりません。
（逆にわかったら、そのサーバーなどのセキュリティはガバガバってこと）
あと、質問タグ、Javaだと別言語になりますので、
JavaScriptに付け替えましょう。
質問は編集できます。
（CodePenなどではJavaは使われていないと思われる）
むしろ知ってどうするのかというのは気になってますね。
paiza.ioみたいに主要な言語何でもこいみたいなものが作りたいのか
単なる興味本位なのか
いずれにしても作った人でなければ想像しかできないのと、結局は既存技術の組み合わせであるため探しようがない部分はあります。
まず、「作りたい」ならXSSなどセキュリティ度外視で作って見るところからでしょうね。
miyabi_takatsukさん。
問い合わせレベルの話なのですか。具体的でなくていいのですが・・・。しくみの概要を知りたい、その例を知りたいという話です。いまのところ、html,CSS,JSの関係を調べる、JSという言語の仕組みやプログラム言語の仕組みを知るという検索候補が私のなかにあります。とりあえず、問い合わせることも視野にいれます。ありがとうございます。
Javaが使われていないと思われるのはなぜでしょうか。サーバーサイド言語なので、私や他の人がつくりあげるということはできそうですが。Pythonもでしょうか？
m.ts10806さん。私は、デザインをhtml、CSSで編集できるようにしたい（ユーザーが記述するか、ボタンを押したらCSSコードが裏で追加されるみたいな実装をしたい）です。JSなどのサーバーサイドのことに関しては興味本位もありますし、セキュリティを考えると知っておいたほうがいいのかなという勝手な想像です。セキュリティ度外視で作るといいとのアドバイスありがとうございます。
> Javaが使われていないと思われるのはなぜでしょうか
Wappalyzerという、サーバーサイドの言語も含めて、
何が使われているかを調べることができるChromeの拡張機能がありますので、
それで調べた限り、です。
miyabi_takatsukさん。その拡張機能さっそくいれさせていただきました。ありがとうございます。
> CodePenはどうなっているのですか。
こう書かれている限り、
> 具体的でなくていいのですが・・・。しくみの概要を知りたい、
という認識をもつ人はそこまで多くはないと思いますよ。
質問本文を見た時、
CodePenでどう実装されているかを具体的に知りたいんだな、と、だいたいの人は感じると思います。
miyabi_takatsukさん。そうですね。CodePenしかJS編集できなさそう無知と勝手な偏見でした。ご指摘ありがとうございます。言い回しが合っているかはわかりませんが修正しました。
回答1件
0
ベストアンサー
CodePenはRuby on Railsで実装されているようなので、
例にとり、おそらくの予想で回答させていただきます。
編集画面のことだけを切り取ってみますと、
そういった編集画面を作ることができる、
JavaScriptライブラリがあったりしますので、
それらを使っている可能性が高いでしょう。
（ただし、CodePen独自のそれ、の可能性も大いに高い）
XSS対策なども含め、
input・textareaによるform要素での直接送信は防ぐなどの対策はされていると思います。
divに入力させるUIなどを実装し、
その中身を送信する、としているのかと思われます。
また、JavaScript側、サーバーサイド側両方で、バリデーションを行っていると思います。
（XSSなどの攻撃を防ぐため）
そして、実行結果に関しては、
iframeの中身の上で、サーバーサイド（Ruby）からscript要素や、style要素、包括したHTML内容を出力しているようですね。
inputやtextareaで直接入力にしない、iframeで二重にして、トークンなどを使い、特定の一時アクセスのみを有効にしたり、などセキュリティ強化も図られているようです。
結論、必要な知識・技術を下記に列挙してみました。
- HTML、CSS、JavaScript、サーバーサイド言語の基本知識・技術
- JavaScriptライブラリを使いこなす技術・経験
- JavaScriptによる非同期送信と、レスポンスに対しての処理技術
- サーバーサイドによる、基本HTMLの出力や、ファイル自体のレスポンス技術
- トークン生成、一時的有効の技術・知識
- 上記含めバリデーションの知識と技術
- サーバーサイドによる、DB操作技術・知識
- サーバーサイドによる、セッションの制御技術
- JavaScriptによる、クッキーの制御技術
- セキュリティ知識・技術
もっといろいろあるかもしれませんが、ざっとこんなところかと思います。
投稿2021/02/19 05:55
編集2021/02/19 06:05総合スコア9528
とても丁寧にご回答いただけて感無量です。CodePenだからというより、入力することやJSが埋め込めてしまう状況が危険なのだとわかりました。具体的な考察も、とても参考になりました。２つほど質問なのですが、
＞ファイル自体のレスポンス技術
は、ローカルファイルの読み込みか、webサーバーのファイルやデータベースへの読み書きの話ですか？
あと、クッキーの制御というのは、セッション（ログイン）に関する情報が保存されるもので、基本的にユーザー側が気をつけるという認識であっていますでしょうか。
> は、ローカルファイルの読み込みか、webサーバーのファイルやデータベースへの読み書きの話ですか？
いえ、違います。
サーバーサイドプログラムから、XMLやJSON、はたまた画像など、
あらゆるファイルを出力する技術です。
（ex) PHPファイルにアクセスすることで、画像としてブラウザないし、OS側で認識できる状態にする）
今回のやりたいことでは、JavaScriptやCSSそのものを、サーバーサイドプログラムから出力する必要があるということです。
CodePen始め、多くのこういったサービスは、少なからず一箇所以上は、そういった仕様を使用していると思われます。
> あと、クッキーの制御というのは、セッション（ログイン）に関する情報が保存されるもので、基本的にユーザー側が気をつけるという認識であっていますでしょうか。
いえ、クッキーのコントロールを作るのは、基本的に開発者側です。
なので、その制御の仕方を開発者側が気をつける必要があります。
ただ、セッションを使用できるのであれば、
フロントエンド側でクッキーを使用せずとも、同じことはできるので、
場合によってはいらないかもしれません。
ありがとうございます。サーバーサイドプログラムからファイルを出力というのは、非同期通信の話（https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data）であってますか。
違います。
必ずしもJS側で受け取るとは限らないものです。
URLにアクセスした時、
内部的にはPHPなどが起動しているが、
ブラウザなどに返すものは、画像や、JavaScriptファイルなどのファイルということです。
厳密には、Webページは、
サーバーサイドからはHTMLファイルを返しています。（サーバー側は、HTMLファイルをそのまま返す事も、サーバーサイドで処理した上でのHTMLとして返すことも両方できる）
この、リクエストとレスポンスを理解しない限り、
今回のようなものの実装は先が遠いかと。
ありがとうございます。
どのあたりを調べればいいのか、じゅうぶんあたりがつきました。
ご親切に、ありがとうございました。
がんばります。
あなたの回答
tips
プレビュー
