勉強したことのメモ

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画像ビューア(Fotorama)
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

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

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

jQueryでimgタグのsrcを変える
jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

PHPとSQLiteでi-mobileのデータをグラフ化する方法
PHPとSQLiteでi-mobileのデータをグラフ化する方法

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動
jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...