勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

  jQuery JavaScript

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、ASPを利用したサイトのためPHPが利用不可だった。かといってjQueryのhtml()で出力するとJSのalertとかがそのまま実行されてしまうため危険っぽい。そのためjQueryでエスケープしつつ表示する方法をメモ。

 

対応方法

ソースコード

//GETパラメータが入る変数
const param = 'xxxxx';

//これだとアウト(alertが実行された)
$(`.sample`).html(`${param}`);

//これだとセーフ(alertが実行されなかった)
$(`.sample`).text(`${param}`);

JavaScriptの場合

innerHTMLでもscriptタグが直接入力されている場合は実行されないらしい。実際に試してみたところ実行されなかった。

 - jQuery JavaScript

  関連記事

jQuery UIのDatepickerでリセット(入力内容消去)ボタンの追加方法

jQuery UIのDatepickerでキーボード入力を防ぎたいためreado ...

jQueryからAjax経由でPHPにリクエストしCookieを操作する方法

先日PHPでCookie保存時にHttpOnly / Secure属性を設定する ...

jQueryで配列の値を検索

やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...

ajaxで複数のデータを渡したい

やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...