<form action="<?php echo $_SERVER['PHP_SELF']; ?>">

Впрочем, часто переменную используют и в ссылках:

<a href="<?php echo $_SERVER['PHP_SELF']' ?>?id=2">link</a>

Марк пишет, что использовать такого рода конструкции небезопасно и ведет к возможности выполнение XSS (cross-site scripting) атаки.
Далее предлагаются такие варианты выхода из ситуации: в случае с формой можно оставить атрибут action просто пустым. По умолчанию, скрипт будет ссылаться сам на себя.

<form action="">

Если же переменная $_SERVER используется в качестве ссылки,то следует пропустить ее через функцию esc_url() (справедливо для WordPress) или жестко зафиксировать адрес скрипта в другой переменной (это уже для всех разработчиков PHP)

<a href="<?php echo esc_url( $_SERVER['PHP_SELF'] . '?id=1' ); ?>">link</a>

или

$script_path = "link"l
<a href="<?php echo esc_url( $script_path . '?id=1' ); ?>">link</a>

Таким образом вы обезопаситесь от XSS атак. Каких? А, например, вот таких: имеем скрипт с параметром $_SERVER['PHP_SELF'] в теге action далее переходим по адресу script.php/”%20onmouseclick=’alert(document.cookie)’ и смотрим результат. Думаю пояснять, что будет в результате не нужно. Пример так же работает и с одинарными кавычками. Кроме того, использование функции htmlentities() в качестве фильтра http заголовка не поможет!

Вывод:
1) Оставляем пустым значение атрибута action в формах
2) По возможности не используем переменные $_SERVER['PHP_SELF'] и $_SERVER['REQUEST_URI']
3) Если используем, то прогоняем через функцию esc_url()

Легкого и безопасного вам программирования!

FancyBox

Плагин к фреймворку jQuery. Позволяет организовывать на своем сайте просмотр изображений в стиле мак ос – “lightbox”, а так же организовывать галереи из изображений. Для начала нужно скачать архив с сайта GoogleCode. В архиве можно посмотреть уже готовый пример. Нас же интересует папка jquery.fancybox. В ней находятся файлы ресурсов, несколько скриптов: сам FancyBox и библиотека jQuery. То есть, вам даже не придется отдельно скачивать jQuery и наоборот, если на странице он уже подключен, этот файл можно удалить. Теперь заливаем папку на свой сайт и подключаем библиотеки к странице следующим образом:

<script type="text/javascript" src="../jquery.fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>

Не забываем так же подключить css файл стилей FancyBox.
<link rel=”stylesheet” type=”text/css” href=”../jquery.fancybox/jquery.fancybox.css” media=”screen” />

Дальше, пишем скрипт, указывая jQuery, что элементы типа <a> будет обрабатывать FancyBox.

<script type="text/javascript">
$(document).ready(function() {
$("a").fancybox();
});
</script>

Ждем, когда загрузятся все DOM элементы и назначаем обработчик.

Теперь перейдем непосредственно к изображениям. Вставляем одиночное маленькое изображение с ссылкой на изображение большего размера.

<a title="Название изображения" href="1_b.jpg"><img src="1_s.jpg" /></a>

Обратите внимание на title, то что вы здесь напишите, позже будет изображено внизу изображения большего размера. В стандартном примере это выглядит так:

Теперь организуем галерею и последовательный просмотр для нее. Добавляем группу изображений:

<a rel="group" title="Групповое изображение #1" href="2_b.jpg"><img src="2_s.jpg" /></a>
<a rel="group" title="Групповое изображение #2" href="3_b.jpg"><img src="3_s.jpg" /></a>
<a rel="group" href="4_b.jpg"><img src="4_s.jpg" /></a>

Как вы наверное заметили, чтобы FancyBox понял, что изображения составляют галерею и позволял переключаться между ними, достаточно добавить к ссылке атрибут rel со значением group. В приведенном выше примере два изображения будут с подписью, а третье соответственно нет.

Ну и несколько дополнений – в файле jquery.fancybox.css можно настроить параметры отображения плагина, например цвет фона, когда показывается большая картинка или сделать отображение не на весь экран.

Пример можно посмотреть здесь.

Что такое jQuery?

jQuery – это фреймворк, специализирующийся на взаимодействии HTML и JavaScript. jQuery помогает легко получать доступ к любому элементу (набору элементов) объектной модели документа (DOM), обращаться к атрибутам и содержимому элементов DOM и, конечно, манипулировать ими.

Как работает jQuery?

После подключения библиотеки к вашей страницы, jQuery позволяет обращаться к к DOM объектам и их элементам.
Существует два вида вызова методов jQuery:

Например:

$(”#header”) – получение элемента с id=”header”

$(”h1″) – получить все элементы <h1>

$(”div#post .data”) – получить все элементы с классом =”data” которые находятся в элементе div с id=”post”

$(”ul li:first”) – получить только первый элемент<li> из списка <ul>

Теперь, когда базовые навыки получены, можно перейти к реализации выезжающего блока.

Реализация

Сначала нужно скачать фреймфорк. Сделать это можно с официального сайта проекта. Или скачать с моего блога, уже сжатый в gzip готовый дистрибутив (размер около 50 кБ). Подключаем библиотеку:

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

Теперь сам блок:

<input type="button" class="button" value="Показать все что скрыто!" />
<div id="div_id"  style='display:none;'>Тут скрытая информация</div>

И, наконец, очередь кода jQuery. Общая логика такова: по клику на кнопку, ее класс будет меняться с active на button и обратно, а блок с id = div_id будет выезжать/задвигаться. Сам код:

<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
$("#div_id").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>

Строчка $(document).ready(function() говорит о том, что функция будет выполнена, когда будет готов DOM. Далее, навешиваем событие на нажатие на кнопку. И для элемента div_id (наш блок) используем функцию slideToggle, которая в jQuery и отвечает за “выезд”. В качестве аргумента передаем ей скорость ( в нашем случае это slow, можете попробовать написать fast в качестве эксперимента. И, наконец, присваиваем кнопки класс active. Вот и все. Минимум кода, зато какой эффект. Примером может служить кнопка “Комментарии для пользователей li.ru” внизу страницы.
Я и дальше планирую написание статей про jQuery, по мере изучения его мною. Оставайтесь на линии. смайлик.

Система позволяет настроить размеры формы, цветовое оформление и даже установить счетчик на количество комментариев. Все работает на Ajax, так что никаких перезагрузок страниц не будет. Ниже пример, с оставленным комментарием:

Резюме
Система достаточно удобна и позволяет охватить большой круг пользователей (li.ru, lj, openid). Что поможет привлечению новых пользователей на ваш stand alone блог (это особенно удобно, если у вас есть трансляция в одной их этих систем). Но, к сожалению, не лишена минусов. Вот основные:

function show(nodeId)
{
var node = document.getElementById(nodeId);
if (node)
{
if (node.style.display=='none')
{  node.style.display = 'block'; }
else
{  node.style.display = 'none';  }
}
}

Как можно заметить, код состоит из одной функции Show. Далее мы инициализируем новую переменную node. Потом проверяем было ли получено значение node. После чего стоит проверка, если у элемента в css было прописано значение display = none (то есть, блок не показывается), то меняем его на block (соответственно делаем видимым). Ну и наоборот. Теперь немного про node. Это есть id нужного нам div’a. Далее вы поймете о чем идет речь. Самое приятное, что такой скрипт не привязан к определенному блоку, то есть на страницы таких блоков будет несколько.
Теперь в самом html документе подключаем наш js скрипт. Для этого перед тегом добавляем строчку:

<script src="show.js" type="text/javascript"></script>

Ну и остается сам div блок, а так же элемент, на который будет срабатывать javascript: кнопка, ссылка, изображение. Просто событием onClick передаем в функцию Show параметром id нашего div’a (тот самый node). Ниже пример с кнопкой:

<input onclick="show('div_id')" type="button" value="Показать
все что скрыто!" />
<div id="div_id" style="display:none">Тут скрытая информация</div>

Вот собственно и все. Как видите, все достаточно банально, а пользы много. В планах есть сделать не просто появляющийся, но выезжающий блок, типа таких, которые есть вконтакте. Как я уже говорил, примером данного кода может служить кнопка внизу страницы “Комментарии для пользователей li.ru”. Кстати, об этих самых комментариях и пойдет речь в моем следующем посте.