質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Security+

Security+は、IT業界団体であるCompTIA認定の資格の一つです。ネットワークセキュリティやコンプライアンスと運用セキュリティといったセキュリティ分野における知識・技術の証明になり、セキュリティインシデントに対応するための知識も評価されます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

エスケープ処理

エスケープ処理とは、一連の文字や一文字に対して、一定の規則に従って別の意味を適用する処理過程です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

Q&A

解決済

文字列がエスケープされているかChrome developer toolで確認する方法はありますか

webiroha
webiroha

総合スコア15

Security+

Security+は、IT業界団体であるCompTIA認定の資格の一つです。ネットワークセキュリティやコンプライアンスと運用セキュリティといったセキュリティ分野における知識・技術の証明になり、セキュリティインシデントに対応するための知識も評価されます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

エスケープ処理

エスケープ処理とは、一連の文字や一文字に対して、一定の規則に従って別の意味を適用する処理過程です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

3回答

0グッド

1クリップ

1445閲覧

投稿2020/11/01 02:00

久々にお世話になります。

Chrome developer toolで値がエスケープされているか否かを確認する方法を御存知ですか?
他の方法でも構いませんが、なにか簡単に確認できたらと思いました。

"Element tab"で右クリックすると現れるメニュー内にある"Edit as HTML"では、引用符はエスケープされていない形で表示されているようでした。

Elementsタブ

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

5

ベストアンサー

HTMLパース前の文字列

DOMになった時点でHTML文字実体参照などのHTMLエスケープのパース処理は既に終わっています
HTMLパース前の文字列を得るには、Fetch APIで location.href のbodyを取得して下さい。

XSS

質問のきっかけはXSS対応に必要なエスケープのことを調べていて、

それは質問文に書くべきだったと思います。
私を含めて皆さん、XSSの観点で回答していません。


JavaScriptに限定するなら、innerHTML, outerHTML, insertAdjacentHTML でHTML断片文字列をドキュメントに挿入する際、「任意の文字列」がエスケープされていない事でXSSが発生します。

  • <p>&lt;foo&gt; "bar"</p> のように「<p>の内容」が「任意の文字列」なら、<> のエスケープが必要ですが、" はエスケープ不要です
  • <p title="<foo> &quot;bar&quot;"> のように、「"で括られた属性値」に「任意の文字列」を挿入する場合は " もエスケープしなければなりません

質問文のHTMLは前者なので、" のエスケープは本来不要です。

また、次のようにHTML断片を挿入するAPIを使わずにDOMを変更した場合にはエスケープ処理そのものが不要な事も分かります、

JavaScript

1function sample (value) { 2 var p = document.createElement('p'); 3 p.title = p.textContent = value; 4 5 return p; 6} 7 8var p = sample('<foo> "bar"'); // 任意の文字列を渡す 9console.log(p.outerHTML); // <p title="<foo> &quot;bar&quot;">&lt;foo&gt; "bar"</p>

Re: webiroha さん

投稿2020/11/01 02:38

編集2020/11/03 12:46
think49

総合スコア18056

ockeghem, AkitoshiManabe, miyabi_takatsuk, webiroha👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

webiroha

2020/11/03 00:07

ご回答ありがとうございます。 いろいろわからず調べていたのとマシントラブルでお返事が遅くなり失礼しました。 簡単に確認する方法はないのですね。 ご回答の方法を試してみたのですが、フロント側でレンダリングするようなJS(CRA)ではコードを解読しない限り不可能という認識でよいでしょうか。
think49

2020/11/03 05:42

CRAはわかりませんが(臨床開発モニター?) 真面目にやるならHTML parserを作って、テキストノード値を得て、HTML文字実体参照/数値参照...etcを検出する実装になると思います。 https://html.spec.whatwg.org/multipage/#toc-syntax Chrome Developper ToolsのElementツリーはDOM後にinnerHTML/outerHTML相当HTMLを出力する形式なので、パース前の文字列は取れません。 テキストノード値では " はエスケープ不要(参照文字に変化させる必要がない)であり、"<>" が参照文字に変化しています。 正直、どういう意図で「エスケープ」といっているのか分かりかねるのですが…。 - 参照文字全般がエスケープ? - エスケープを要求している文字種は?
think49

2020/11/03 05:45

エスケープ検出はエディタ側に期待する機能なので、ブラウザ上でテキストエディタを開発するのでなければ、本来は不要だと思います。
webiroha

2020/11/03 10:30

ご解説ありがとうございます。 CRAはCreate React Appのことです。失礼しました。 質問のきっかけはXSS対応に必要なエスケープのことを調べていて、 公開サイトでもそういったことが確認できるのかな、と思ったためです。 生半可な知識で質問してすみません。 少しずつ学びを深めていきたいと思います。
think49

2020/11/03 12:46

回答に追記しました。 >XSS
webiroha

2020/11/03 23:15

言葉が不足していたんですね、申し訳ございません。 追加のご説明ありがとうございます。 コードを解読することも大事ですね。 予期しないコードの紛れ込みなどによりコードが変形する可能性もあるのではないかと考え、最終的な結果の部分から簡単に確認できればと思ったことも理由でした。 お手数おかけしましてすみませんでした。 不足点を埋めていきます。

1

Chrome developer toolで値がエスケープされているか否かを確認する方法を御存知ですか?

ブラウザで処理する前のデータを確認すると良いです。
具体的にいうと、ネットワーク → (確認したいリクエストを選択) → レスポンス で生のデータを確認できます。

投稿2020/11/03 11:05

退会済みユーザー

退会済みユーザー

総合スコア0

webiroha👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

webiroha

2020/11/03 12:13

理想の回答はないと思い、解決済みにしてしまいました。 ご回答ありがとうございます。 そのような確認方法もあるのですね。 フロント側でレンダリングするReactなどに関しては確認できなさそうでしたが、なにか方法はありますか? 差し支えなければご回答いただけますと幸いです。 よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2020/11/03 13:09

React だろうと何だろうと、レスポンス時点の生のデータは回答の方法で確認可能です。 ただ、現時点で会話が成立していないという事は、根本的に何かを間違って理解していると思いますよ。
webiroha

2020/11/03 23:19

お返事ありがとうございます。 改めて試してみたところ、リロードが足りなかったようです。 ただ、求める結果がすべて見つけられなかったので、理解が足りないと想定される部分を補ってもう一度試してみたいと思います。 ありがとうございました。

1

文字列がエスケープされているか

一応、JavaScriptが稼働する環境なら、文字列処理で確認できます。

javascript

1const isEscapedHTML = s => s.match(/&(#39|quot|gt|lt);|&amp;(?!w+;)/) !== null; 2

CODEPEN escapeHTML() / unescapeHTML()

Chrome developer toolで

ツールに実装された機能についてのご質問であり、回答に困ります。

追記)
添付画像からは、以下のように感じました。

  1. 要素(タグ)はエスケープ
  2. テキストノードはそのまま

DOM は必ず Nodeオブジェクトの派生なので、そういう挙動なのだと思います。

投稿2020/11/03 02:36

編集2020/11/03 02:44
AkitoshiManabe

総合スコア5426

webiroha👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

webiroha

2020/11/03 10:38

ご回答、ご解説ありがとうございます。 Chrome developer toolはさまざまな機能があるので、簡単に確認できるに越したことはないため、なにかそういった機能はないかと思った次第です。 コードを書かなければいけないこと、理解しました。 ブラウザの挙動に関する学びも少しずつ深めていきたいと思います。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Security+

Security+は、IT業界団体であるCompTIA認定の資格の一つです。ネットワークセキュリティやコンプライアンスと運用セキュリティといったセキュリティ分野における知識・技術の証明になり、セキュリティインシデントに対応するための知識も評価されます。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

エスケープ処理

エスケープ処理とは、一連の文字や一文字に対して、一定の規則に従って別の意味を適用する処理過程です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。