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

Question

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

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

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

Answer 1

HTMLパース前の文字列

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

• Fetch API - Web API | MDN
• Window.location - Web API | MDN

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を変更した場合にはエスケープ処理そのものが不要な事も分かります、

function sample (value) {
  var p = document.createElement('p');
  p.title = p.textContent = value;

  return p;
}

var p = sample('<foo> "bar"'); // 任意の文字列を渡す
console.log(p.outerHTML); // <p title="<foo> &quot;bar&quot;">&lt;foo&gt; "bar"</p>

Re: webiroha さん

Comments

[webiroha]

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

[think49]

CRAはわかりませんが(臨床開発モニター？)

真面目にやるならHTML parserを作って、テキストノード値を得て、HTML文字実体参照/数値参照...etcを検出する実装になると思います。
https://html.spec.whatwg.org/multipage/#toc-syntax

Chrome Developper ToolsのElementツリーはDOM後にinnerHTML/outerHTML相当HTMLを出力する形式なので、パース前の文字列は取れません。
テキストノード値では " はエスケープ不要(参照文字に変化させる必要がない)であり、"<>" が参照文字に変化しています。
正直、どういう意図で「エスケープ」といっているのか分かりかねるのですが…。

- 参照文字全般がエスケープ？
- エスケープを要求している文字種は？

[think49]

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

[webiroha]

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

[think49]

回答に追記しました。 ＞XSS

[webiroha]

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

Answer 2

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

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

Comments

[webiroha]

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

[退会済みユーザー]

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

[webiroha]

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

Answer 3

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

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

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

CODEPEN escapeHTML() / unescapeHTML()

Chrome developer toolで

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

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

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

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

Comments

[webiroha]

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