勉強したことのメモ

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

  関連記事

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...

jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...