常連

注目の的

社会貢献

## テーマ、知りたいこと
XSS 対策を実装しているのですが、いつエスケープしたらいいのかいろいろなご意見があるようで疑問です。
使用言語は、HTML、CSS、JavaScript、PHP、MySQLです。

## 背景、状況
掲示板のコメントを例にします。

保存の際は JavaScript の `fetch()` を使い、PHP の `PDO()` を介し、MySQL でデータベースに保存しています。

逆に出力は PHP から `{"id": 1, "comment": "<p>hello</p>"}` のような JSON を `echo` し、 JavaScript で HTML を生成します。

この流れにあたって XSS 対策のタイミングは下記などいくつか考えられそうです。


### タイミング
##### ➀ データベースに保存する際にエスケープした値にしておく
```PHP
<?php
$data = ["comment" => "<p>hello</p>"];
$data["comment"] = htmlspecialchars($data["comment"], ENT_QUOTES, "UTF-8"); // ➀はここでエスケープ
$stmt = $pdo->prepare("INSERT INTO comment_table (comment) VALUES (:comment)");
$stmt->bindParam(":comment", $data["comment"], PDO::PARAM_STR);
$stmt->execute();
```

##### ➁ データベースには素のまま保存し、PHP から `echo` する際にエスケープする
```PHP
$stmt = $pdo->query("SELECT * FROM comment_table WHERE id = 1"); 
$data = $stmt->fetch(PDO::FETCH_ASSOC); // この data は ["id" => 1, "comment" => "<p>hello</p>"] のような値 
$data["comment"] = htmlspecialchars($data["comment"], ENT_QUOTES, "UTF-8"); // ➁はここでエスケープ
echo json_encode($data);
```

##### ③ データベースには素のまま保存し、PHP から `echo` する際も素のまま `echo` し、JSON を HTML として描画する際に JavaScript でエスケープする
```JavaScript
fetch('getComment.php')
    .then(response => response.json())
    .then(data => { // この data は {"id": 1, "comment": "<p>hello</p>"} のような値 
        addNewComment(data);
    })
    .catch(error => {
    });

function addNewComment(data) {
    const ulElement = document.querySelector('.comment-list');
    const liElement = document.createElement('li');
    liElement.className = 'comment';
    liElement.textContent = escapeHtml(data); // ➂はここでエスケープ
    ulElement.appendChild(liElement);
}

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}
```

いつエスケープするのがセオリーというか、安全というか、実装しやすいというか…
一体どうしたらいいのでしょうか？



XSS対策のエスケープ、いつする派？

JavaScriptの処理をスマホ・タブレットの時のみ行うための判定についてです。

スマホ・タブレットをできる限り漏れなく判定するためには、UserAgentだけでは足りないでしょうか？

UserAgentと画面幅（おそらくmatchMediaのこと）での判定を組み合わせたほうがいいと聞いたのですが、これはどんなケースが考えられるか知りたいです。

userAgentではPC判定なのに実はタブレット端末ということがあったりするのでしょうか？

【追記依頼への回答】
どのような理由があって「スマホ・タブレットの時のみ」行いたいのでしょうか？
↓
ページ内のaタグの付いてない電話番号テキスト部分にaタグを付ける処理をJavaScriptでしたいのですが、PCユーザーには必要ないためスマホ・タブレットの時のみ行いたいです。なので、目的としては「デバイスに合わせて」ということになります。そこに画面幅での判定も組み合わせるとどんなメリットがありそうでしょうか？

デバイス判定はUserAgentだけでは足りないですか？

###実現したいこと

以下の流れでAJAXを使ってHTMLを挿入するのですが、この速度を向上させたいと考えています。
###HTML挿入の流れ
HTML挿入の流れはこうです。

記事一覧にはタイトルとサムネイルが表示されており、それをクリックします。

そのとき通信はせず、まず先にタイトルとサムネイルを表示します。さらにそれ以外の部分の外郭HTMLも表示し、「読み込み中」とします。

そしてAJAXでその他のデータを取得し、できたらその中身を挿入する。という流れです。
![イメージ説明](46ea3a11a8689e79b5ad739696a17a3d.png)

###速度の問題
AJAXの前にすでにあるデータを表示したり、外郭のHTMLを表示したりするというのは体感速度を上げる狙いです。

しかしHTMLの挿入速度に問題があります。

上図のように「外郭を先に表示し、データは後で挿入」でなく、「AJAXでの取得が終わったそのときに、データが挿入されたHTMLを表示」とした方が、処理が早いようなのです。

その計測が次のソースコードになります。

###該当のソースコード
ご覧のように「keisoku_1();」と「keisoku_2();」で計測しました。

「keisoku_1();」の方は上図のように「外郭を先に表示し、データは後で挿入」という方法です。

「keisoku_2();」の方は「AJAXでの取得が終わったそのときに、データが挿入されたHTMLを表示」という方法です。

それぞれ実行すると分かるとおり、「keisoku_2();」の方が圧倒的に速いのです。


```js

/*
keisoku_1();
外郭のHTMLを取得し、後からデータを入れる方法を計測
----------------------------------------------*/
// 計測を実行
keisoku_1();
function keisoku_1(){

	var time_before = new Date().getTime();

	var lis = '';
	for ( var i = 0;  i < 1000;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };
		var html = get_outline_html( i );
		var html = update_outline_html( html, data );
		lis += html;
	}
	$( 'body' ).html( lis );

	var time_after = new Date().getTime();
	console.log( 'keisoku_1() = ' + parseInt(time_after - time_before) );
}

// 外郭のHTMLを取得
function get_outline_html( i ){
	return `
	<div class="box num${i}">
	<p class="ttl"></p>
	<p class="num"></p>
	</div>`;
}

// 後からデータを入れる
function update_outline_html( html, data ){
	var $html = $( html )
	.find( '.ttl' ).text( data.ttl )
	.find( '.num' ).text( data.num ); 
	return $html[0];
}


/*
keisoku_2();
データを入れたHTMLを取得する方法を計測
----------------------------------------------*/
// 計測を実行
keisoku_2();
function keisoku_2(){

	var time_before = new Date().getTime();

	var lis = '';
	for ( var i = 0;  i < 1000;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };
		var html = get_all_html( i, data );
		lis += html;
	}
	$( 'body' ).html( lis );

	var time_after = new Date().getTime();
	console.log( 'keisoku_2() = ' + parseInt(time_after - time_before) );
}

// データを入れたHTMLを取得
function get_all_html( i, data ){
	return `
	<div class="box num${i}">
	<p class="ttl">${data.ttl}</p>
	<p class="num">${data.num}</p>
	</div>`;
}

```
###質問
そこで質問ですが、上述した「HTML挿入の流れ」はそのままで、もう一歩速度を向上させられるようなソースコードの工夫などございましたらご教授頂けますでしょうか。

当方JavaScript初心者のため上のソースコードにおかしな点などあるやもしれませんので、もし意図が伝わりにくい等の不備がございましたらどうぞご指摘ください。

以上です。何卒、宜しくお願い申し上げます。

###改善の追記
maisumakun様のアドバイスを受けまして、以下「keisoku_3();」です。
【改善1】として「.clone()」を使い、【改善2】としてクラス付与を変更致しました。

ですが「$html」が取得できないようで、要素の挿入がされない状況になってしまいました。
困ったことにエラーも出ておらず、悪いところがわかりません。

お気づきの点ございましたらご指摘いただければと思い、ここに追記させて頂きました。
```js

/*
keisoku_3();
maisumakun様のアドバイスを受けて
----------------------------------------------*/
// 計測を実行
keisoku_3();
function keisoku_3(){

	var time_before = new Date().getTime();

	var $html;
	for ( var i = 0;  i < 3;  i++ ) {
		var data = { num:i, ttl:'hello_'+i };

		if ( i == 0 ){
			// 【改善1】1回目だけjQeury化する
			var html = get_outline_html( '' ); // 【改善2】iを渡してクラス付与しない
			var $html = $( html )
			.find( '.ttl' ).text( data.ttl )
			.find( '.num' ).text( data.num )   
			.find( '.box' ).addClass( 'num'+i ); // 【改善2】ここでクラス付与する
		}else{
			// 【改善1】2回目以降は.clone()する
			var $html = $html.clone();
			$html
			.find( '.ttl' ).text( data.ttl )
			.find( '.num' ).text( data.num )
			.find( '.box' ).addClass( 'num'+i );
		}
		$( 'body' ).html( $html[0] ); // $html が取得できていない様子
	}

	var time_after = new Date().getTime();
	console.log( 'keisoku_3() = ' + parseInt(time_after - time_before) );
}


```

JavaScriptで処理速度を向上させるコードの工夫

恥ずかしながらギリギリ２０代の新人エンジニアです。
一人前のWEBエンジニアを目指して日々、奮闘中です。

ローカル開発環境構築のためにVirtial Box・Vagrant・CentOSを導入して、PHP、Javascript、MySQLなどを勉強しているのですが、やはりApacheなどのサーバー関係も良く理解しておかないと後々苦労すると思ってサーバ環境も勉強していきたいと考えております。

そこで、質問なのですがエンジニアの方々たちはApacheなどのサーバー技術を習得するにあたりどのようなことをされているのでしょうか。
もちろん、現場で実践を積むことが一番だと思うのですが、それ以外で独学でも効率的に勉強できる学習サイトがあれば教えてくだされば幸いです。

よろしくお願いいたします。