jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法
GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、ASPを利用したサイトのためPHPが利用不可だった。かといってjQueryのhtml()で出力するとJSのalertとかがそのまま実行されてしまうため危険っぽい。そのためjQueryでエスケープしつつ表示する方法をメモ。
対応方法
ソースコード
//GETパラメータが入る変数
const param = 'xxxxx';
//これだとアウト(alertが実行された)
$(`.sample`).html(`${param}`);
//これだとセーフ(alertが実行されなかった)
$(`.sample`).text(`${param}`);
JavaScriptの場合
innerHTMLでもscriptタグが直接入力されている場合は実行されないらしい。実際に試してみたところ実行されなかった。
関連記事
-
-
Flashを用いずJavaScriptでコピー&カット機能を実装する方法
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
-
指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法
指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...
-
-
jQueryでUNIXタイムスタンプの取得
jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...