Разгоняем сайт

17.10.2008 

Разгоняем сайтРассмотрим в данном посте несколько самых простых, но в тоже время самых действенных способов для оптимизации вашего сайта. Нет, не СЕО оптимизации, а оптимизации его для уменьшения времени загрузки. Ведь не секрет, что ничто так не раздражает, как медленно открывающийся сайт.

1. Пропустите картинки через smushit.com
Если у вас нет специального софта для оптимизации картинок, т.е. уменьшения их размеров, то этот плагин для файрфокса вам очень даже пригодится. После установки оного просто кликаете у себя в правом нижнем углу браузера на иконку в виде человечка с экстримальной прической. Ждете, пока сервис подсчитает, на сколько можно сжать картинки на открытом сайте и какой процент будет составлять экономия. И если вас полученный результат устроит, можете скачать уже сжатые картинки и перезалить ими старые. К примеру, у меня на блоге размер картинок можно уменьшить в среднем на 6%.

2. Используйте самые быстрые CSS селекторы
Существует множество способов применить определенные стили для какого-то элемента на странице. Но не все одинаково быстро понимает браузер. Может, и не совсем корректно я выразился, но, думаю, вы меня поняли :-) Более подробно об этой теме можно почитать у Йона Сайкса (Jon Sykes).

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

1-й способ (самый быстрый):

a  {
color: red;
}

2-й способ

.link {
color: red;
}

3-й способ

div div div p a.link {
color: red;
}

4-й способ (самый медленный)

div > div > div > p > a.link   {
color: red;
}

3. Совмещайте картинки, которые используются в CSS для свойства background без repeat в один файл.
Потом с ними очень просто можно работать. Просто указываете сдвиг на нужное количество пикселей, в зависимости от того, где находится ваш фрагмент на большой картинке, которая называется CSS спрайт. Более подробно об этом можно почитать – здесь.

Скажу только, что таким образом уменьшается количество HTTP-запросов браузером, на которые идет немало времени. В нашем же случае браузер загружает всего одну, хоть и большую, картинку — вжик и все! Это лучше чем 10 раз стучаться, чтобы забрать маленькие.

4. Сжимайте свои css и js файлы
Как известно, браузер их подгружает в кеш, перед тем как отобразить страницу. Поэтому облегчите ему жизнь, т.е. ускорьте отображение целевой страницы, путем уменьшения размеров этих файлов.

Существует множество компрессоров, которые позволяют это все делать. Но помните, после сжатия, код становится абсолютно не читабельным. Так что храните на случай каких то изменений в будущем у себя где то в заначке оригинальный файл.

CSS… Icey CSS Compressor уменьшает его размер примерно на 25%, но бывает и больше. Подробнее можно почитать вот здесь.

Что касается сжатия JS, то следует обратить внимание на продукт любимого многими Yahoo – YUI compressor

5. Сохраняйте картинки в “правильном” формате
Выбирайте только jpg, gif и png. Конечно, многие так и делают, но есть еще люди, которые умудряются вешать на сайтах тяжеленные bmp.

6. Размещайте тег <script> внизу страницы
Конечно, это не всегда возможно, но вы уж постарайтесь. Зачем это надо? Ответ очень прост. Если ваш скрипт что-то выполняет, то это действие может застопорить дальшейшуюю загрузку страницы на некоторое время, что очень даже заметно для рядового пользователя. А многие балуются размещеним счетчика Google Analytics вначале страницы, что есть очень и очень плохо…

7. Разносите файлы, используемые на странице, по разным доменам
Суть фишки заключается в том, что брайзер может одновременно с одного домена забирать не больше двух файлов. Рекомендуется использовать отдельные домены для CSS, картинок и скриптов.

Что почитать по теме?
Steve Souder’s blog
Website Optimization Secrets (O’Reilly)
Yahoo Optimization page

Где взять «спидометр»?
YSlow
Webkit Element Inspector

_____
Спонсор месяца: одесский форум

60 лучших бесплатных темплейта на ваш сайт

16.10.2008 

Если вы решили создать свой сайт, а нет возможности нарисовать дизайн и потом его сверстать, то не проблема. Вернее, если у вас есть деньги на создание хороших и качественных шаблонов, но вы ждете или ищите халявы — то это таки проблема. Но если нет? Тогда стоит сказать большое спасибо энтузиастам, создавшим за вас уже готовые темплейты для будущего сайта.

В этом посте собраны лушие 60 бесплатных темплейтов, которые могут превратиться в ваших руках в серьезный сайт.
Читать полностью »

SQL injection. Объясняем на пальцах

25.06.2008 

В этом посте немножко коснусь темы безопасности сайтов. Думаю, каждый, кто интересовался темой хака инет-ресурсов, слышал о таком понятии, как SQL-инъекции. Фактически любой сайт, разработчики которого не уделяют должного внимания вопросу безопасного программирования, может быть легко «взломан» этим видом атаки. Чтобы понять, что и к чему в этом посте, необходимо обладать техническим минимумом, в частности, иметь представление о том, что такое PHP и MySQL.

Итак, что же из себя представляют эти «инъекции», да еще и SQL?

0. Сначала было слово

SQL injection — одна из самых опасных уязвимостей вэб-приложений. Позволяет злоумышленнику выполнять запросы в БД сайта, а в некоторых случаях писать/читать файловую систему с правами сервера баз данных. Уязвимость возникает в большинстве случаев из-за недостаточной фильтрации данных при построении запроса.

1. Немного теории

Любой запрос SQL состоит из нескольких предложений.

SELECT *
FROM base_user

Это пример самого простого запроса, который состоит из двух предложений: предложение SELECT и предложение FROM. Для выбора по условию к запросу добавляется предложение WHERE. В нем обычно и скрываются неприятности.

SELECT *
FROM base_user
WHERE id=1

В MySQL литеральные строки заключаются в двойные или одинарные кавычки. Комментарии пишутся после или /*. Первый вид комментария — комментарий до конца строки, второй — до символов */, по аналогии с С++ или до конца многострочного запроса.

Также стоит упомянуть про объединение результатов запроса с использованием оператора UNION.

SELECT name
FROM A
WHERE id=1
UNION
SELECT name
FROM B
WHERE id=2

Оператор UNION эквивалентен теоретико-множественному оператору объединения множеств. Работает только с запросами на выборку, необходимо одинаковое количество выбираемых полей в предложении SELECT для обоих объединяемых запросов.

Начиная с 5-й версии, MySQL поддерживает написание подзапросов, которые заключаются в круглые скобки ().

2. От слов к примерам

Целые числа

$id = $_GET['id'];
mysql_query("SELECT * FROM base_user WHERE id=" . $id);

Данный пример собирает запрос, подобное можно встретить во множестве сайтов. Как видно, в запрос просто подставляется значение ячейки суперглобального массива $_GET.

Что можно сделать? Мы видим, что переменная id никак не фильтруется, тоесть в GET-запрос мы можем вписать все что угодно.

Сначала узнаем количество полей возвращаемых запросом, для этого начинаем угадывать количество столбцов.

http://test.com/test.php?id=1+UNION+SELECT+1+/*
http://test.com/test.php?id=1+UNION+SELECT+1,2+/*
http://test.com/test.php?id=1+UNION+SELECT+1,2,3+/*

и т.д., при несовпадении количества столбцов сервер будет отвечать ошибкой MySQL. Стоит заметить, в запросах используется /* для комментирования оставшегося запроса, мало ли что там девелопер еще написал…

После определения количества столбцов можно узнать, например, версию сервера. Cоставляем запрос вида:

http://test.com/test.php?id=1+UNION+SELECT+VERSION()+/*

Дальше, покопавшись в документации MySQL, можно набрести на системные таблицы INFORMATION_SCHEMA и на БД mysql. Если сервер настроен плохо, то можно надеятся на права чтения этих таблиц и баз данных. Для выполнения запроса к другой базе данных достаточно поставить ее имя перед именем таблицы и поставить «.»(точка) между именем БД и таблицей. Пример:

mysql.user

Имея доступ к INFORMATION_SCHEMA, злоумышленник легко узнает количество, имена и структуры всех таблиц БД.

Продолжим о вкусностях. Сервер MySQL имеет очень удобное предложение запроса на выборку INTO OUTFILE.

http://test.com/test.php?id=1+UNION+SELECT+1+INTO+OUTFILE+'/tmp/1.txt'

Запрос такого вида позволит записать результат запроса в файл. Хоть эта возможность встречается не так часто, но с ее помощью на сервер можно загружать любые файлы.

Приступим к чтению файловой системы.

LOAD DATA INFILE '/tmp/test.txt' INTO TABLE test

Запрос загружает содержимое фала в таблицу базы данных. С этим типом запросов возникают некоторые трудности при его инъекции в другие запросы, но в этом случае можно извратиться построением подзапросов.

Литералы

$name = $_GET['name'];
mysql_query("SELECT * FROM base_user WHERE name='" .  $name  . "'");

Этот код безопаснее предыдущего, но только в том случае, если в настройках PHP включены magic_quotes. При включении magic_quotes во всем вводе экранируются кавычки. Если же «волшебные кавычки» отключены, то запрос строится по принципу как и с целочисленными данными, только закрывается открытая кавычка

http://test.com/test.php?name=TEST'+UNION+SELECT+1,2,3+/*

В итоге, вместо

SELECT * FROM base_user WHERE name='TEST'

получаем

SELECT * FROM base_user WHERE name='TEST' UNION SELECT 1,2,3/*

3. Как защититься

Существуют разные способы защиты от инъекции, но в основе каждого лежит правильная и хорошая фильтрация пользовательского ввода. Данные к вэб-приложении поступают из массивов GET, POST и из COOKIE. Любой из массивов может быть преднамеренно изменен. Необходимо контролировать типы входящих значений. Например, попробуйте ВКонтакте в комментарий написать union или какой-то запрос.

Нужно численные значения преобразовывать к численным посредством intval(), floatval() и тп.

$a = intval($_GET['a']);

Это уже не позволит вместо $а вписать какой-то запрос. Следует отметить, что intval() нельзя использовать при проверке число или нет в переменной. Intval() возвращает 1 при непустых значениях параметра любого не числового типа. Для проверки на число лучше использовать is_numeric().

Для строковых значений следует использовать addslashes(), которая экранирует все кавычки символом \. А еще лучше html_entities() для кодирования символов сущностями html(&quot; и т.п.).

4. The End

Как видно, доступ к чтению БД очень опасен. Если кому-то кажется, что md5 хеши (да и вообще любые другие) паролей довольно безопасны, хочу огорчить — существует множество онлайн баз данных хешей, которые за несколько секунд позволяют его вскрыть. Также недавно натолкнулся на программку, которая, по заявлению разработчика, способна на GeForce 9600 вскрыть любой md5 хэш за полдня.

При использовании сырого PHP и глобальных массивов стоит быть очень осторожным. Последствия могут быть плачевными. Следует с ответственностью относится к настройке прав пользователей базы, запрещать чтение INFORMATION_SCHEMA и базу данных mysql. Необходимо фильтровать все входные данные. На живых сайтах стоит отключать error_reporting и дамп ошибок БД в браузер.

Спасибо за написание статьи моему другу Bolshevik’у, а мне спасибо за то, что опубликовал :-)
_____
Рекомендую:
Продвижение сайтов в Украине
Пока звезды Реала рубятся на Евро-08, мы проникли в раздевалку великого клуба
Программное обеспечение для создания собственных безопасных e-mail рассылок
Как заработать в интернете НЕ продавая информацию

Советы и трюки по Javascript, CSS, HTML, PHP

16.04.2008 

Не в первый раз наткнулся в инете на замечательный сайт Tigir.com и вот сегодня решил с вами поделиться ссылкой на него. Автор проделал огромную работу по сбору и выкладыванию различных приемов работы с Javascript, CSS, HTML, PHP, MySQL. Информация на сайте размещена в виде «Вопрос-ответ»: на интересующий вас вопрос приведен подробный ответ с примером.

Респект автору и очень жаль, что сайт уже не обновляется почти 2 года, но вкусностей там можно найти немало. Так что
рекомендую!
_____
Спонсор месяца: У тебя есть блог? Тебе сюда!

Минимум по HTML

03.04.2008 

В одном из комментариев к посту Шпаргалка по HTML один из комментаторов пожаловался, что он не может разобраться. Повторюсь, прочитайте пожалуйста название поста. Это ШПАРГАЛКА, а не учебник или курс какой-то. Там приведен полный перечень тегов и их краткое описание. Также, возле каждого тега есть ссылки на их подробные описания.

В этой статье хочу привести минимум знаний HTML, который может понадобиться при написании простейших страничек.

Типичная структура HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Заголовок страницы</title>
  </head>
  <body>
    Тело страницы — ее содержимое. Тексты всякие, картинки, таблицы и т.д.
  </body>
</html>

Абзац

<p>Текст абзаца</p>

Форматирование текста

<strong>Жирный текст</strong>
<em>Наклонный текст</em>
<u>Подчеркнутый текст</u>
<strike>Перечеркнутый текст</strike>

Цвет текста

<font color="#xxxxxx">Текст, код цвета которого #xxxxxx</font>

Таблицу цветов можно посмотреть здесь или здесь

Ссылка

<a href="http://адрес_ссылки">Текст ссылки</a>

Картинка

<img src="http://адрес_картинки" align="left">

align=»left» — это выравнивание по левому краю относительно текста. Значения параметра align могут быть еще «center» — по центру и «right» — по правому краю. aling с выше перечисленными значениями можно применять и для абзацов — тег <p>.

Отличный учебник HTML размещен по адресу http://htmlbook.ru Там все и вся. Я учился именно по нему. Спасибо Владу Мержевичу, автору этого ресурса, за громадную и очень полезную работу.
_____
Спонсор месяца: У тебя есть блог? Тебе сюда!