Хотели бы вы иметь на своем сайте мини-чат? Думаю, многие скажут "ДА". Сегодня мы рассмотрим замечательный мини-чат Shoutbox, он работает на php, mysql и jQuery. Прежде чем начать работу, посмотрите Демо (после советую до конца прочитать урок, дабы не делать поспешных выводов)

Не правда ли классно? Теперь о том, как такую вещь реализовать.

Скрипт для работы использует БД Mysql. Давайте создадим в базе таблицу shoutbox для упрощения задачи Вам и себе привожу готовый SQL-запрос:

CREATE TABLE `shoutbox` (
`id` INT(5) NOT NULL AUTO_INCREMENT ,
`date` TIMESTAMP NOT NULL ,
`user` VARCHAR(25) NOT NULL ,
`message` VARCHAR(255) NOT NULL ,
PRIMARY KEY (`id`)
) CHARACTER SET = utf8;

Обрабатывает сообщения файл shoutbox.php . Найдите в нем следующие строки и отредактируйте:

define("HOST", "Ваш MySql-хост - обычно это localhost");
define("USER", "имя пользователя MySql");
define("PASSWORD", "пароль к вашей MySql ");
define("DB", "Имя БД");

Думаю, с этим сложностей быть не должно Еще пара настроек в этом же файле:

header ("Location: index.html");
$res = getContent($link, 50);

header - Здесь мы отправляем нерадивых юзеров, которые пытаются напрямую вызвать работу файла, shoutbox.php на страницу index.html.
getContent($link, 50) - количество сообщений на страницу. В данном примере будет выбрано 50 последних сообщений.

Теперь в нужном месте вставляем форму отправки сообщения и div-контейнер , который будет содержать последние сообщения чата:

Ваше имя
Сообщение

Обычная форма с 3-ми input. После формы идет div#container, пусть вас не смущает наличие одинокого тега p. Все сообщения выводяться в виде

Имя - сообщение

(см. файл shoutbox.php ). И в конце мы подключаем jQuery и сам скрипт shoutbox.js (можете это сделать и традиционно между тегами head)

CSS здесь отвечает только за внешний вид чата. Поэтому подробно рассматривать его в этом уроке не будем. Просто не забудьте включить стили из файла css/general.css на вашу страницу, или, что еще лучше, сделайте индивидуальный дизайн. Единственное что стоит помнить, id и class из приведенного выше кода использует и скрипт shoutbox.js, поэтому если вы будете изменять имена id и class на свои, не забудьте сделать это также в shoutbox.js

На сегодня это все. Пусть этот урок станет для вас подарком на первомайские праздники, думаю, этот мини-чат вы найдете куда пристроить

P.S. Для тех кто хочет из этого скрипта получить более полноценный чат, слегка доработаем оригинальный скрипт:

Смысл в том, что мы будем обновлять содержание окошка чата через определенное время. Для этого нам понадобится плагин, который существенно упростит задачу jquery.timers.js . Его подключаем как обычно, а в shoutbox.js добавляем следующие строки:

$(".content > p").everyTime(30000, function() {
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn("fast");
}
});

EveryTime(30000) - время в милисекундах, через которое содержимое окна будет обновляться. В примере стоит 30 секунд.
Скачать плагин с исправленным shoutbox.js . Демка работает по первоначальному варианту, но вы можете легко протестировать обновленный скрипт у себя на сайте.

P.P.S исправляем проблему букв "И" и "ш"
Я решил эти буквы просто заменить на их символы из "Таблица символов Unicode". Найдите строчку case "insert": (66-ая строка) в файле shoutbox.php и замените содержимое case на этот код: напишите следующее правило:

$message = str_replace("ш", "ш", $_POST["message"]);
$message = str_replace("И", "И", $message);
$nick = str_replace("ш", "ш", $_POST["nick"]);
$nick = str_replace("И", "И", $nick);
echo insertMessage($nick, $message);

Решение достаточно простое: мы просто перед тем как новое сообщение добавить в БД, заменяем проблемные буквы на них же, но в символьном варианте

• 
  FalleN
• 
  9225
• 
  159

Хотели бы вы иметь на своем сайте мини-чат? Думаю, многие скажут "ДА". Сегодня мы рассмотрим замечательный мини-чат Shoutbox, он работает на php, mysql и jQuery. Прежде чем начать работу, посмотрите Демо (после советую до конца прочитать урок, дабы не делать поспешных выводов)

Не правда ли классно? Теперь о том, как такую вещь реализовать.

Скрипт для работы использует БД Mysql. Давайте создадим в базе таблицу shoutbox для упрощения задачи Вам и себе привожу готовый SQL-запрос:

CREATE TABLE `shoutbox` (
`id` INT(5) NOT NULL AUTO_INCREMENT ,
`date` TIMESTAMP NOT NULL ,
`user` VARCHAR(25) NOT NULL ,
`message` VARCHAR(255) NOT NULL ,
PRIMARY KEY (`id`)
) CHARACTER SET = utf8;

Обрабатывает сообщения файл shoutbox.php . Найдите в нем следующие строки и отредактируйте:

Define("HOST", "Ваш MySql-хост - обычно это localhost");
define("USER", "имя пользователя MySql");
define("PASSWORD", "пароль к вашей MySql ");
define("DB", "Имя БД");

Думаю, с этим сложностей быть не должно:) Еще пара настроек в этом же файле:

Header ("Location: index.html"); $res = getContent($link, 50);

header - Здесь мы отправляем нерадивых юзеров, которые пытаются напрямую вызвать работу файла, shoutbox.php на страницу index.html.
getContent($link, 50) - количество сообщений на страницу. В данном примере будет выбрано 50 последних сообщений.

Теперь в нужном месте вставляем форму отправки сообщения и div-контейнер, который будет содержать последние сообщения чата:

Ваше имя
Сообщение

Обычная форма с тремя input. После формы идет div#container, пусть вас не смущает наличие одинокого тега p . Все сообщения выводяться в виде

Имя - сообщение

(см. файл shoutbox.php ). И в конце мы подключаем jQuery и сам скрипт shoutbox.js (можете это сделать и традиционно между тегами head)

CSS здесь отвечает только за внешний вид чата. Поэтому подробно рассматривать его в этом уроке не будем. Просто не забудьте включить стили из файла css/general.css на вашу страницу, или, что еще лучше, сделайте индивидуальный дизайн. Единственное что стоит помнить, id и class из приведенного выше кода использует и скрипт shoutbox.js , поэтому если вы будете изменять имена id и class на свои, не забудьте сделать это также в shoutbox.js

На сегодня это все. Пусть этот урок станет для вас подарком на первомайские праздники, думаю, этот мини-чат вы найдете куда пристроить;)

P.S. Для тех кто хочет из этого скрипта получить более полноценный чат, слегка доработаем оригинальный скрипт:

Смысл в том, что мы будем обновлять содержание окошка чата через определенное время. Для этого нам понадобится плагин, который существенно упростит задачу jquery.timers.js. Его подключаем как обычно, а в shoutbox.js добавляем следующие строки:

$(".content > p").everyTime(30000, function() {
$.ajax({
type: "POST", url: "shoutbox.php", data: "action=update",
complete: function(data){
loading.fadeOut();
messageList.html(data.responseText);
messageList.fadeIn("fast");
}
});

everyTime(30000) - время в милисекундах, через которое содержимое окна будет обновляться. В примере стоит 30 секунд.
Скачать плагин с исправленным shoutbox.js . Демка работает по первоначальному варианту, но вы можете легко протестировать обновленный скрипт у себя на сайте.

P.P.S исправляем проблему букв "И" и "ш"
Я решил эти буквы просто заменить на их символы из "Таблица символов Unicode". Найдите строчку case "insert": (66-ая строка) в файле shoutbox.php и замените содержимое case на этот код: напишите следующее правило:

$message = str_replace("ш", "ш", $_POST["message"]); $message = str_replace("И", "И", $message); $nick = str_replace("ш", "ш", $_POST["nick"]); $nick = str_replace("И", "И", $nick); echo insertMessage($nick, $message);

Решение достаточно простое: мы просто перед тем как новое сообщение добавить в БД, заменяем проблемные буквы на них же, но в символьном варианте

Written by Saran on April 23, 2013 , Updated January 30, 2014

Facebook has this nice little chat box that doesn"t take up much space, and people can instantly interact with their friends, it is a cool feature to have in any website. Let"s get inspired and create an similar shoutbox which will look similar to Facebook chat box.

Style

Here"s the CSS, I"ve tried to make it look close as possible to Facebook chat box. Should work in Chrome, Firefox and ie8+. Let me know if it requires some tweaking in other browsers.

Shout_box { background:#627BAE; width:260px; overflow:hidden; position:fixed; bottom:0; right:20%; z-index:9; } .shout_box .header .close_btn { background: url(images/close_btn.png) no-repeat 0px 0px; float:right; width:15px; height: 15px; } .shout_box .header .close_btn:hover { background: url(images/close_btn.png) no-repeat 0px -16px; } .shout_box .header .open_btn { background: url(images/close_btn.png) no-repeat 0px -32px; float:right; width:15px; height:15px; } .shout_box .header .open_btn:hover { background: url(images/close_btn.png) no-repeat 0px -48px; } .shout_box .header{ padding: 5px 3px 5px 5px; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; font-weight: bold; color:#fff; border: 1px solid rgba(0, 39, 121, .76); border-bottom:none; cursor:pointer; } .shout_box .header:hover{ background-color: #627BAE; } .shout_box .message_box { background: #FFFFFF; height: 200px; overflow:auto; border: 1px solid #CCC; } .shout_msg{ margin-bottom: 10px; display: block; border-bottom: 1px solid #F3F3F3; padding: 0px 5px 5px 5px; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; color:#7C7C7C; } .message_box:last-child { border-bottom:none; } time{ font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; font-weight: normal; float:right; color: #D5D5D5; } .shout_msg .username{ margin-bottom: 10px;margin-top: 10px; } .user_info input { width: 98%; height: 25px; border: 1px solid #CCC; border-top: none; padding: 3px 0px 0px 3px; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; } .shout_msg .username{ font-weight: bold; display: block; }

Shout Box HTML

Have a look at Shout box markup, you can see username and message fields, also the div with "message_box" class attribute, where user messages are loaded from the database.

jQuery

Using setInterval() , we will refresh chat every 1000 milliseconds, it sends ajax call to shout.php and loads returned data into the element, updating shout-box with any newly added message.

//automatically refresh after every 1000 milliseconds. load_data = {"fetch":1}; window.setInterval(function(){ $.post("shout.php", load_data, function(data) { $(".message_box").html(data); var scrolltoh = $(".message_box").scrollHeight; $(".message_box").scrollTop(scrolltoh); }); }, 1000);

When user writes something and hit enter key, we need to send entered data to shout.php . The keypress() method triggers when a button is pressed down, and (evt.which == 13) condition makes sure key pressed is Enter key, then we can proceed with ajax $.post() method, as shown in example below. You can replace keypress() with .click() method, but you need to add button in your HTML.

//method to trigger when user hits enter key $("#shout_message").keypress(function(evt) { if(evt.which == 13) { var iusername = $("#shout_username").val(); var imessage = $("#shout_message").val(); post_data = {"username":iusername, "message":imessage}; //send data to "shout.php" using jQuery $.post() $.post("shout.php", post_data, function(data) { //append data into messagebox with jQuery fade effect! $(data).hide().appendTo(".message_box").fadeIn(); //keep scrolled to bottom of chat! var scrolltoh = $(".message_box").scrollHeight; $(".message_box").scrollTop(scrolltoh); //reset value of message box $("#shout_message").val(""); }).fail(function(err) { //alert HTTP server error alert(err.statusText); }); } });

Example below slides up or down shout box, when user clicks close or open icon.

//toggle hide/show shout box $(".close_btn").click(function (e) { //get CSS display state of .toggle_chat element var toggleState = $(".toggle_chat").css("display"); //toggle show/hide chat box $(".toggle_chat").slideToggle(); //use toggleState var to change close/open icon image if(toggleState == "block") { $(".header div").attr("class", "open_btn"); }else{ $(".header div").attr("class", "close_btn"); } });

PHP

Here"s PHP file shout.php , as you can see I have sanitized post variables using PHP filter_var() , and performed some MySQL query. Since I don"t want to grow this database table large, I am keeping only 10 recent rows in the database, everything else will be deleted. It is up to you to decide how many rows you want to keep.

0) { //sanitize user name and message received from chat box $username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH); $message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH); $user_ip = $_SERVER["REMOTE_ADDR"]; //insert new message in db if(mysqli_query($sql_con,"INSERT INTO shout_box(user, message, ip_address) value("$username","$message","$user_ip")")) { $msg_time = date("h:i A M d",time()); // current time //output message echo "

"; } // delete all records except last 10, if you don"t want to grow your db size! mysqli_query($sql_con,"DELETE FROM shout_box WHERE id NOT IN (SELECT * FROM (SELECT id FROM shout_box ORDER BY id DESC LIMIT 0, 10) as sb)"); } elseif($_POST["fetch"]==1) { //Retrive last 10 messages from Database $results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from shout_box ORDER BY id DESC LIMIT 10) shout_box ORDER BY shout_box.id ASC"); while($row = mysqli_fetch_array($results)) { $msg_time = date("h:i A M d",strtotime($row["date_time"])); //message posted time //output messages echo ""; } } else { //output error header("HTTP/1.1 500 Are you kiddin me?"); exit(); } }

That"s it! I hope this tutorial has helped you understand how shoutbox works and how we can make it look like Facebook chat box. By the way, I do want to see it working live in your website, so if you are using this example, please do share your links here and good luck!

WordPress - это удобная блог-платформа для публикации статей и управления ими, на которой базируется огромное число различных сайтов. Из-за своей распространенности эта CMS уже давно является лакомым куском для злоумышленников. К сожалению, базовые настройки не обеспечивают достаточного уровня защиты, оставляя многие дефолтные дырки незакрытыми. В этой статье мы пройдем типичным путем «типового» взлома сайта на WordPress, а также покажем как устранить выявленные уязвимости.

Введение

На сегодняшний день WordPress среди систем управления контентом популярнее всего. Его доля составляет 60,4% от общего числа сайтов, использующих CMS-движки. Из них, согласно статистике, 67,3% сайтов базируется на последней версии данного программного обеспечения. Между тем за двенадцать лет существования веб-движка в нем было обнаружено 242 уязвимости различного рода (без учета уязвимостей, найденных в сторонних плагинах и темах). А статистика сторонних дополнений выглядит еще печальней. Так, компания Revisium провела анализ 2350 русифицированных шаблонов для WordPress, взятых из различных источников. В результате они выяснили, что более половины (54%) оказались зараженными веб-шеллами, бэкдорами, blackhat seo («спам») ссылками, а также содержали скрипты с критическими уязвимостями. Поэтому устраивайся поудобней, сейчас мы будем разбираться, как провести аудит сайта на WordPress и устранить найденные недостатки. Использовать будем версию 4.1 (русифицированную).

Индексирование сайта

Первым этапом любого теста обычно бывает сбор информации о цели. И тут очень часто помогает неправильная настройка индексирования сайта, которая позволяет неавторизованным пользователям просматривать содержимое отдельных разделов сайта и, например, получить информацию об установленных плагинах и темах, а также доступ к конфиденциальным данным или резервным копиям баз данных. Чтобы проверить, какие директории видны снаружи, проще всего воспользоваться Гуглом. Достаточно выполнить запрос Google Dorks типа site:example.com intitle:"index of" inurl:/wp-content/ . В операторе inurl: можно указать следующие директории:

/wp-content/ /wp-content/languages/plugins /wp-content/languages/themes /wp-content/plugins/ /wp-content/themes/ /wp-content/uploads/

Если сможешь просмотреть /wp-content/plugins/ , следующий шаг по сбору информации об установленных плагинах и их версиях значительно упрощается. Естественно, запретить индексирование можно с помощью файла robots.txt . Так как по умолчанию он не включен в установочный пакет WordPress, его необходимо создать самому и закинуть в корневую директорию сайта. Мануалов по созданию и работе с файлом robots.txt довольно много, поэтому оставлю эту тему для самоподготовки. Приведу лишь один из возможных вариантов:

User-Agent: * Disallow: /cgi-bin Disallow: /wp-login.php Disallow: /wp-admin/ Disallow: /wp-includes/ Disallow: /wp-content/ Disallow: /wp-content/plugins/ Disallow: /wp-content/themes/ Disallow: /?author=* Allow: /

Если в файлах, хранящихся в папке uploads , имеются сведения конфиденциального характера, добавляем к этому списку строчку: Disallow: /wp-content/uploads/ .
С другой стороны, в файле robots.txt не рекомендуется размещать ссылки на директории, которые были созданы специально для хранения чувствительной информации. Иначе этим самым ты облегчишь злоумышленнику задачу, так как это первое место, куда обычно все заглядывают в поисках «интересненького».

Определение версии WordPress

Еще один важный шаг - идентификация версии CMS. Иначе как подобрать подходящий сплоит? Существует три быстрых способа для определения используемой на сайте версии WordPress:

1. Найти в исходном коде страницы. Она указана в метатеге generator:

   или же в тегах :

2. Найти в файле readme.html (рис. 1), который входит в состав установочного пакета и находится в корне сайта. Файл может иметь и другие названия типа readme-ja.html .
3. Найти в файле ru_RU.po (рис. 2), который входит в состав установочного пакета и расположен по адресу /wp-content/languages/ : "Project-Id-Version: WordPress 4.1.1\n"

Один из вариантов защиты в данном случае - ограничить доступ к файлам readme.html и ru_RU.po с помощью.htaccess .

Автоматизация процесса тестирования

Исследованием безопасности WordPress занялись не вчера, поэтому существует достаточное количество инструментов, позволяющих автоматизировать рутинные задачи.

• определение версии и темы с помощью скрипта http-wordpress-info nmap -sV --script http-wordpress-info
• подбор пароля по словарям nmap -p80 --script http-wordpress-brute --script-args "userdb=users.txt,passdb=passwords.txt" example.com

• модуль для определения версии: auxiliary/scanner/http/wordpress_scanner ;
• модуль для определения имени пользователя auxiliary/scanner/http/wordpress_login_enum .

• перечисление установленных плагинов: wpscan --url www.exmple.com --enumerate p ;
• перечисление установленных тем: wpscan --url www.exmple.com --enumerate t ;
• перечисление установленного timthumbs: wpscan --url www.example.com --enumerate tt ;
• определение имени пользователя: wpscan --url www.example.com --enumerate u ;
• подбор пароля по словарю для пользователя admin: wpscan --url www.example.com --wordlist wordlist.txt --username admin ;
• подбор пароля с использованием связки имя пользователя / пароль с числом потоков, равным 50: wpscan --url www.example.com --wordlist wordlist.txt --threads 50 .

Определение установленных компонентов

Теперь давай соберем информацию об установленных плагинах и темах независимо от того, активированы они или нет. Прежде всего такую информацию можно выудить из исходного кода HTML-страницы, например по JavaScript-ссылкам, из комментариев и ресурсов типа CSS, которые подгружаются на страницу. Это самый простой способ получения информации об установленных компонентах. Например, строчки ниже указывают на используемую тему twentyeleven:

Так как информация о плагинах не всегда отображается в исходном коде HTML-страницы, то обнаружить установленные компоненты можно с помощью утилиты WPScan (см. врезку). Только не забывай, что перебор путей плагинов зафиксируется в логах веб-сервера.
Получив данные об установленных компонентах, уже можно приступать к поиску уязвимостей своими силами либо найти общедоступные эксплойты на ресурсах типа rapid7 или exploit-db .

Определение имени пользователей

По умолчанию в WordPress каждому пользователю присваивается уникальный идентификатор, представленный в виде числа: example.com/?author=1 . Перебирая числа, ты и определишь имена пользователей сайта. Учетная запись администратора admin, которая создается в процессе установки WordPress, идет под номером 1, поэтому в качестве защитной меры рекомендуется ее удалить.

Брутфорс wp-login

Зная имя пользователя, можно попробовать подобрать пароль к панели администрирования. Форма авторизации WordPress на странице wp-login.php весьма информативна (рис. 3), особенно для злоумышленника: при вводе неправильных данных появляются подсказки о неверном имени пользователя или пароле для конкретного пользователя. Разработчикам известно о данной особенности, но ее решили оставить, так как подобные сообщения удобны для пользователей, которые могли забыть свой логин и/или пароль. Проблему подбора пароля можно решить, используя стойкий пароль, состоящий из двенадцати и более символов и включающий буквы верхнего и нижнего регистра, числа и спецсимволы. Или же, например, при помощи плагина Login LockDown.

Заливаем Shell

После того как мы сбрутили пароль, ничто не мешает залить шелл на скомпрометированный веб-ресурс. Для этих целей вполне сгодится фреймворк Weevely , который позволяет генерировать шелл в обфусцированном виде, что делает его обнаружение довольно сложным. Чтобы не вызывать подозрения, полученный код можно вставить в любой файл темы (например, в index.php) через редактор темы консоли WordPress. После чего с помощью того же Weevely можно подключиться к машине жертвы и вызывать различные команды:

Python weevely.py http://test/index.php Pa$$w0rd [+] weevely 3.1.0 [+] Target:test [+] Session: _weevely/sessions/test/index_0.session [+] Browse the filesystem or execute commands starts the connection [+] to the target. Type:help for more information. weevely> :help

Подключаем.htaccess

Для запрета доступа к чувствительной информации лучше воспользоваться файлом.htaccess - это файл конфигурации, используемый в Apache Web Server. Рассмотрим возможности этого файла с точки зрения безопасности. С его помощью можно: запретить доступ к директориям и файлам, заблокировать различные SQL-инъекции и вредоносные скрипты. Для этого стандартный файл.htaccess для CMS WordPress 4.1 нужно немного расширить. Чтобы закрыть список файлов и папок, добавляем:

Options +FollowSymLinks -Indexes

RewriteCond %{QUERY_STRING} base64_encode[^(]*\([^)]*\) заблокирует ссылки, содержащие кодировку Base64. Избавиться от ссылок, содержащих тег