Показать скрытые данные по клику мышки
Вы наверняка уже задавались вопросом о том, как защитить какие-либо персональные данные от различных спам-ботов, при этом оставив их доступными для обычных пользователей. Так вот, мы бы хотели предложить Вам простейшую защиту персональных данных путем подгрузки их на сайт из базы данных по клику мышки без перезагрузки странички. Таким образом, бот, попав на сайт, не сможет увидеть персональные данные пользователей (такие как номер телефона или адрес почты), т.к. они станут доступны только после клика и в исходном коде странички их тоже нет.
Наш способ скрытия нужных данных основан на том, что необходимые данные подгружаются с сервера при помощи jQuery только после клика мышкой по указанному объекту и таким образом они будут недоступны для ботов, не кликнувших по указанному объекту.
Для наглядного примера работы скрипта ниже расположены три строчки. В каждой из строк присутствует элемент, при клике по которому будет показан номер телефона. В первой строчке это кнопка "Показать", во второй - подчеркнутое слово "Показать" и в третьей - изображение со словом "Показать". Отметим, что в качестве объекта для клика мышкой может выступать любой HTML тег, будь то кнопка, картинка или ссылка.
Номер телефона: +7
Номер телефона: +7 Показать.
Номер телефона: +7 
Для полноценной работы предлагаемого нами скрипта скрытия и показа персональных данных Вам потребуется добавить на свой сайт библиотеку jQuery. Если Вы не добавляли ее ранее, то ее следует добавить следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее Вам понадобиться добавить на свой сайт небольшой JavaScript код, который будет отлавливать клики по указанным элементам и в соответствии от значений их идентификаторов (id) подгружать соответствующие им данные с сервера:
<script type="text/javascript">
$(document).ready(function(){
$(".phone>*").click(function(){
id_elem = $(this).parent().attr("id");
jQuery.post("show_data.php", {id:id_elem}, show_phone);
});
function show_phone(data){
$("#" + id_elem + ".phone").fadeOut(500, function(){
$(this).html(data).fadeIn(500);
});
}
});
</script>Теперь Вам следует создать в корневой папке Вашего сайта файл с именем show_data.php. Можно конечно создать файл и с другим именем, но тогда в предыдущем скрипте стоит его также исправить на новое. Внутрь созданного файла поместите следующий код:
<?php
$db = mysqli_connect("localhost","Логин","Пароль","Имя_БД");
$res = mysqli_fetch_array(mysqli_query($db,"SELECT data FROM table WHERE id=".(int)$_POST["id"].""));
echo $res[0];
?>Как видите, данный код просто делает запрос к БД для получения из нее нужных данных по id. Таким образом, скрипт в целом по клику обращается к файлу show_data.php и выводит полученные данные пользователю, кликнувшему по указанному объекту на страничке сайта. Вам потребуется указать имя таблицы и столбца, в которых хранятся скрываемые данные вместо table и data соответственно.
Теперь Вам остается добавить на странички кнопки (изображения и т.д.) по клику на которые будут подгружаться защищаемые данные. Делается это так:
<p>
Телефон: +7<span class="phone" id="11"><input type="submit" value="Показать"></span>
</p>
<p>
Телефон: +7<span class="phone" id="22"><u>Показать.</u></span>
</p>
<p>
Телефон: +7<span class="phone" id="33"><img src="image/show_data.png" alt=""></span>
</p>Теперь Вы можете скрыть нужную информацию от ботов и при этом оставить ее доступной для пользователей. Плюсом является то, что показ скрытой информации происходит без перезагрузки странички и скрываемая информация отсутствует в исходном коде Вашей странички.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Есть пример где это используется? Я покажу пример, почему нельзя так делать.
Вы правы, что в таком виде через show_data.php можно легко вытянуть все данные. Правильнее было бы обращаться к БД не по id, а, например, по общему MD5 хешу id, имени и номера телефона одной строкой, который предварительно надо высчитать и поместить в БД. Таким образом, мы избавимся от перебора всей базы по id, а при частых неправильных запросах можем блокировать неугодные IP.
<?php
switch ((int)$_POST["id"]){
case 1: echo "111-22-33"; break;
case 2: echo "111-22-44"; break;
case 3: echo "111-22-55"; break;
case 4: echo "111-22-66"; break;
} ?>
И так чтобы после клика, на страницу в браузер подгружалась бы обычная строка из файла или какой-нибудь скрипт.