jQueryの自動入力補完について

jQueryのautocompleteを実装してみたのですが、4つの疑問があります。
(1つでもお答えいただけたら嬉しいです。)

サーバーサイドはPHPで、配列に指定のワードを格納しておき、ユーザーが検索ワードを入力していくと、それが前方で一致するものを候補として出してくれます。

入力フォームは以下のようになりました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>INPUT</title>
6
7<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
8<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
9<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
10
11<script>
12$(function() {
13    $("#ac").autocomplete({
14        source: "./autocomplete.php"
15    });
16});
17</script>
18
19</head>
20<body>
21
22<form>
23<input type="text" id="ac">
24</form>
25
26</body>
27</html>
28

(1) link rel="stylesheet" が指定されていますが、独自のCSSを使用することはできないのでしょうか？また、そうするとautocomplete機能に影響がありますか？

(2) jQueryを利用するために script src を指定しますが、上記のものでも問題ないでしょうか？(正常に動作しますが最新バージョンではないと思います。)

サーバーサイドのautocomplete.phpです。

PHP
1//list[]に候補のワードが格納
2require_once("list.php");
3
4
5$words = [];
6
7$term = (isset($_GET['term']) && is_string($_GET['term'])) ? $_GET['term'] : '';
8
9foreach($list as $word){
10 $pos = mb_stripos($word, $term);
11   if($pos===0){
12     $words[] = $word;
13   }
14}
15
16header("Content-Type: application/json; charset=utf-8");
17echo json_encode($words);
18

(3) ユーザーは１文字入力するたびに、Ajaxでautocomplete.phpにアクセスしているのですか？

(4) $term = (isset($_GET['term']) && is_string($_GET['term'])) ? $_GET['term'] : '';
としていますが、$termはfilter_inputで受け取ったりHTMLエスケープをしたりする必要はあるでしょうか？
コードがセキュリティ的に安全かどうかも知りたいです。

質問が多くて恐縮ですが、お答えいただけたらうれしいです。

行動規範の内容に同意します

回答2件

ベストアンサー

(1) link rel="stylesheet" が指定されていますが、独自のCSSを使用することはできないのでしょうか？また、そうするとautocomplete機能に影響がありますか？

基本的にはすべて独自CSSで置き換えることはできないと思ってください。
テーマがあるのでテーマを好みのテーマを選んでダウンロードしてください。下記のページでカスタマイズすることも可能です。
http://jqueryui.com/themeroller/

どの程度変更したいのかによりますが、現時点で読み込んでいるjquery-ui CSSの同じ要素のセレクタを上書きすれば、多少の変更なら簡単にできるかと思います。
Google Chromeならブラウザのデバッグコンソール（F12）のElementsに要素のCSSが表示されますし、一時的に変更することも可能です。

(2) jQueryを利用するために script src を指定しますが、上記のものでも問題ないでしょうか？(正常に動作しますが最新バージョンではないと思います。)

試したことがないのでなんとも言えませんが、最新バージョンだと動かないかもしれません。現時点ではjqueryのバージョン1.12.x最新がよろしいかと思います。
最新バージョンが使いたいなら試してみるとよいと思います。（動かない場合は諦めてください）

(3) ユーザーは１文字入力するたびに、Ajaxでautocomplete.phpにアクセスしているのですか？

下記のようにすると入力文字数を指定してAjax送信できます。

js
1$("#ac").autocomplete({
2    source: "./autocomplete.php",
3    minLength: 2
4});

https://jqueryui.com/autocomplete/#remote

(4) $term = (isset($_GET['term']) && is_string($_GET['term'])) ? $_GET['term'] : '';

としていますが、$termはfilter_inputで受け取ったりHTMLエスケープをしたりする必要はあるでしょうか？
コードがセキュリティ的に安全かどうかも知りたいです。

危険なので filter_input() でサニタイズしてください。

ユーザーからの受信データーはサニタイズする癖をつけておいたほうが良いです。質問のコードまるまる同じコードであればリスクは極めて低いと思いますが、できるだけセキュリティに関する部分は神経質になるぐらいで丁度よいです。

エンドユーザーからサーバーサイドに送信される値はすべて疑ってかかることが基本です。$_GET, $_POST, S_COOKIEなどすべてサニタイズする必要があります。（もちろん例外はあります）

$_GET、$_POSTなどの値をそのままブラウザ上に表示したり、DBのクエリに使うとインジェクションが発生します。
この他に有名なのはクロスサイトリクエストフォージェリ（CSRF:Cross-Site Request Forgery）があります。forgeryとは偽造という意味なので、リクエスト偽造ということになります。

公開サーバーにプログラムを公開する場合は、どのような脆弱性が起こりえるのか確認して対策するようにしてください。

投稿2017/09/24 05:47

Tomak

総合スコア1652

gsuisk

2017/09/24 07:10

ありがとうございます！ filter_input()はデフォルトで第３引数がFILTER_UNSAFE_RAW(何もせず、オプションで特殊文字を取り除いたりエンコードしたりする)ですが、FILTER_SANITIZE_FULL_SPECIAL_CHARSの方が安全ですか？POSTを受け取ってDBに格納するまでにhtmlエスケープする必要はないですかね。もちろんクライアントへの出力前はすべてhtmlspecialcharsしますが。

Tomak

2017/09/24 14:15

$_GET['term']を直接ブラウザ上に表示しない場合は、引数なしのデフォルト（FILTER_UNSAFE_RAW指定と同じ）で問題ありません。質問のコードではブラウザ上に表示は意図していないですよね？ただし、$_GET['term']を直接ブラウザ上に表示するような場合は、FILTER_SANITIZE_FULL_SPECIAL_CHARSの方が安全です。（XSS対策）つまり、HTMLやJavaScriptをフォームから入力した場合に、ブラウザ上に意図しないHTMLやJavaScriptが実行されてしまうのを防ぎます。また、今回の質問のコードでは意図されていないのだと思いますが、$_GET['term']をDBに格納する場合は、クエリSQLのエスケープも忘れずに行うようにします（SQLインジェクション対策）。 filter_input() はセキュリティ対策として有効ですが、間違ったフィルターを使用してしまうともちろん、セキュリティリスクになりえます。ケースバイケースなので、ケースによって適切なフィルターを見つけられるようにしておいたほうがよいです。

gsuisk

2017/09/24 14:57

ありがとうございます。 GETやPOSTデータをDBに格納する時のクエリSQLのエスケープとは何のことでしょうか？(調べてみたのですが、SQLエスケープ関数mysql_real_escape_stringは使用できないみたいです。) SQL文実行時に変数や値をバインドしたり、execute()の引数としてパラメータ値の配列を渡す、等といったことのことですか？

行動規範の内容に同意します