javascript input textに入力された文字がscript文かどうかの判定

Question

現在タイトルを入力し、コンテンツを作成するというものを作成しているのですが、
タイトルにscript文を入力するとscript文が起動してしまいます。
例:

<script>alert("Test")</script>を入力するとalertが表示される。 <input type="text" class="inputTxt" placeholder="タイトルを入力してください">

上記のinput type="text"にscript文を入力するとそのscript文が実行されてしまうのですが入力された文字がscript文かどうかという判定は可能でしょうか？

Comments

[x_x]

後続処理がわかりませんが、出力時にエスケープすればいいだけのことで、スクリプトかどうかは見る必要がないのではないでしょうか？

Answer 1

そういうチェックは普通はしません。
実行されるのは、HTMLとして出力したときだと思います。
何らかのデータをHTMLとして出力するときは、かならず、<⇒<、>⇒>、&⇒&などへの置き換えを行ってから出力します。

それぞれのプログラミング言語（ないし、フレームワーク）で、そういう処理をしてくれる関数があらかじめ用意されていますので、出力する直前でその関数を通します。

これで、<script>は、<script>と出力されるので、スクリプトが実行される事はありません。
このほかにも一般的なセキュリティ対策がありますので、入門書などを読んでください。
あるいは、こういうドキュメントもあります。
安全なウェブサイトの作り方：IPA 独立行政法人 情報処理推進機構

Answer 2

ユーザー入力情報やDBから取得した情報はhtmlエスケープするのが通例です。
いわゆるXSS対策ですね。

Answer 3

JavaScriptでユーザー入力した文字列をHTMLの中身として取り込む場合、生DOMであれば.textContent、jQueryであれば.text()を使いましょう。これらの方法では、与えられたものはすべて文字列として解釈されますので、HTMLが混入していても何も起きません。

HTML入力を受け付けたい場合は、専用のフィルタリングライブラリを用意することをおすすめします。

Answer 4

次の関数を使わずに、コンテンツを生成すれば、JavaScriptコードとして実行されません。

• eval()
• new Function()

Re: aizawal-hiroki さん

Comments

[maisumakun]

今回はHTML出力に関するXSSのようなので、「起きません」といってしまうのは違う気がします。

[think49]

失礼しました。<script>をinnerJTML or oiyerHTML or insertAdjacentHTML で挿入するケースですね。