勉強したことのメモ

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で対象の要素をまとめて親要素で囲む方法
jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...

jQueryプラグインの作成
jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...