前提・実現したいこと
「Creating a Store Locator on Google Maps」を作成しようとしています。
(google map上で半径を設定して、その半径内の店だけが表示されるしくみ)
半径を計算するため、入力フォームに住所を入力します。
その住所文字列に、サニタイジング・エスケープする必要があるのか、確認したいです。
発生している問題
上記の住所を入力する入力フォームに対して、セキュリティ対策がされているのか分からなく不安です。 不特定多数の方が入力フォームに入力できるため、悪意ある方が悪意あるコードを入力フォームに入力し クロスサイトスクリプティング(XSS)、クロスサイトリクエストフォージュリ(CSRF)などが実行されてしまわないか、 という不安です。 今回の入力フォームの場合、住所入力文字列に対し、サニタイジング・エスケープする必要があるのかな、という不安でした。 ただ、今回は、"searchButton"をクリックすることで、addressに、住所文字列を挿入するだけの仕組みなので、 住所文字列に対するサニタイジング・エスケープを考える必要はないという事になるのでしょうか? 初心者で、また、的を得ないことを述べていたら、また、スイマセン、、、 ※ 以前、google apiでのサンプルコードに対して、ざっくり感を感じた事があり、 google api様様と何でも(入力文字列のセキュリティも)崇めることはできないかな、 との思いがあり、今回、入力の文字列へのセキュリティが気になりました。 (google apiのサンプルコードざっくり感) 同一ページの下記サンプルコードで、mysqli_*関数を使わず古いmysql_*の関数が使われていて、 エラーが出まくり、戸惑ったことがありました。 (google apiのサンプルコードの更新日が2019/5/16なのに) <?php require("phpsqlsearch_dbinfo.php"); // Get parameters from URL ・ ・ ・ // Opens a connection to a mySQL server $connection=mysql_connect (localhost, $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active mySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ("Can\'t use db : " . mysql_error()); } // Search the rows in the markers table
該当のソースコード
https://developers.google.com/maps/solutions/store-locator/clothing-store-locator
上記サイトの該当部分の抜粋
<!DOCTYPE html > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>Creating a Store Locator on Google Maps</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body style="margin:0px; padding:0px;" onload="initMap()"> <div> <label for="raddressInput">Search location:</label> <input type="text" id="addressInput" size="15"/> <!-- ここが、住所入力箇所--> <label for="radiusSelect">Radius:</label> <select id="radiusSelect" label="Radius"> <option value="50" selected>50 kms</option> <option value="30">30 kms</option> <option value="20">20 kms</option> <option value="10">10 kms</option> </select> <input type="button" id="searchButton" value="Search"/> <!-- ここが、検索ボタン--> </div> <div><select id="locationSelect" style="width: 10%; visibility: hidden"></select></div> <div id="map" style="width: 100%; height: 90%"></div> <script> var map; var markers = []; var infoWindow; var locationSelect; function initMap() { var sydney = {lat: -33.863276, lng: 151.107977}; map = new google.maps.Map(document.getElementById('map'), { center: sydney, zoom: 11, mapTypeId: 'roadmap', mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} }); infoWindow = new google.maps.InfoWindow(); searchButton = document.getElementById("searchButton").onclick = searchLocations; <!-- 検索ボタンがクリックされるとsearchLocationsを実行--> locationSelect = document.getElementById("locationSelect"); locationSelect.onchange = function() { var markerNum = locationSelect.options[locationSelect.selectedIndex].value; if (markerNum != "none"){ google.maps.event.trigger(markers[markerNum], 'click'); } }; } function searchLocations() { var address = document.getElementById("addressInput").value; <!-- 住所を取得--> var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { searchLocationsNear(results[0].geometry.location); } else { alert(address + ' not found'); <!-- 取得した住所の緯度経度を計算--> } }); }
回答3件
あなたの回答
tips
プレビュー