Javascript как передавать значения в cookies. PHP печеньки - создаём, читаем, удаляем. Важные моменты о Cookie

Cookies - верная технология, позволяющая веб-сайту "запомнить" пользователя,
сохранить его настройки и не спрашивать каждый раз его логин и пароль. Можно
подумать, что если удалить кукисы в браузере, то сайт тебя не узнает. Но эта
уверенность обманчива.

Можно сколько угодно заморачиваться о своей анонимности, использовать прокси
и VPN, подделывать заголовки HTTP-запросов, выдающие используемую систему,
версию браузера, часовой пояс и море другой инфы, но у веб-сайта все равно
останутся способы распознать факт того, что ты на нем уже бывал. Во многих
случаях это не особо критично, но только не в ситуации, когда на каком-то
сервисе необходимо представиться другим пользователем или банально сохранить
анонимность. Легко представить, как среагирует антифрод-система некой условной
финансовой организации, если определит, что с одного компьютера были выполнены
авторизации под аккаунтами совершенно разных людей. Да и разве приятно
осознавать, что кто-то в Сети может отслеживать твои перемещения? Едва ли. Но
обо всем по порядку.

Чтобы идентифицировать пользователя, испокон веков использовались кукисы.
Cookies (от англ. "печенье") - это небольшая порция текстовой информации,
которую сервер передает браузеру. Когда пользователь обращается к серверу
(набирает его адрес в строке браузера), сервер может считывать информацию,
содержащуюся в cookies, и на основании ее анализа совершать какие-либо действия.
Например, в случае авторизованного доступа к чему-либо через веб в cookies
сохраняются логин и пароль в течение сессии, что позволяет пользователю не
вводить их снова при запросах каждого документа, защищенного паролем. Таким
образом, веб-сайт может "запомнить" пользователя. Технически это выглядит
следующим образом. Запрашивая страницу, браузер отправляет веб-серверу короткий
текст с HTTP-запросом.

Например, для доступа к странице www.example.org/index.html браузер
отправляет на сервер www.example.org следующий запрос:

GET /index.html HTTP/1.1
Host: www.example.org

Сервер отвечает, отправляя запрашиваемую страницу вместе с текстом,
содержащим HTTP-ответ. Там может содержаться указание браузеру сохранить куки:

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value

Если есть строка Set-cookie, браузер запоминает строку name=value (имя =
значение) и отправляет ее обратно серверу с каждым последующим запросом:

GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: name=value
Accept: */*

Все очень просто. Если сервер получил от клиента куки и они есть у него в
базе, он однозначно может их обработать. Таким образом, если это были кукисы с
некоторой информацией об авторизации, у пользователя в момент посещения не будет
спрашиваться логин и пароль. По стандарту куки имеют определенный срок жизни
(хоть он и может быть очень большим), после которого умирают. А любые
сохраненные кукисы пользователь без труда может удалить, воспользовавшись
соответствующей опцией, которая есть в любом браузере. Этот факт сильно
расстраивает владельцев многих ресурсов, которые не желают терять связь с
посетителем. Им важно отслеживать его, понимать, что "вот этот человек был у нас
вчера, а еще позавчера и т.д.". Особенно это касается различных анализаторов
трафика, систем для ведения статистики, баннерных сетей и т.п. Вот тут-то и
начинается самое интересное, потому что разработчики используют всякие
ухищрения, о которых многие пользователи даже не подозревают. В ход идут
различные уловки.

Все дело в том, что помимо обычных HTTP "плюшек", к которым все давно
привыкли, сейчас активно используются альтернативные хранилища, где браузер
может записать данные на стороне клиента. Первое, что нужно упомянуть - это
хранилище любимого и ненавистного одновременно Flash (для тех пользователей, у
которых он установлен). Данные хранятся в так называемых LSO (Local Shared
Objects) - схожих с cookies по формату файлах, которые сохраняются локально на
компьютере пользователя. Подход во многом аналогичен обычным "плюшкам" (в этом
случае на компьютере пользователя точно так же сохраняется небольшое количество
текстовых данных), но имеет некоторые преимущества:

• Flash-кукисы являются общими для всех браузеров на компьютере (в отличие
  от классической cookie, которая привязана к браузеру). Настройки, информация
  о сессии, как и, скажем, некий идентификатор для отслеживания пользователя,
  не привязываются к какому-то конкретному браузеру, а становятся общими для
  всех.
• Flash cookie позволяет сохранять намного больший объем данных (как
  правило, 100 Кб), что увеличивает количество настроек пользователя,
  доступных для сохранения.

На практике LSO становится очень простой и доступной технологией для трекинга
пользователя. Задумайся: если бы я предлагал тебе удалить все "плюшки" в
системе, ты бы вспомнил о Flash-кукисах? Вероятно, нет. А теперь попробуй взять
любой просмотрщик, например, бесплатный

FlashCookiesView и посмотреть, сколько всего интересного записано в
хранилищах Flash. Тут же вырисовывается и список сайтов, которые очень не хотят
потерять твой след, даже если ты подчистишь кэш браузера (вместе с "плюшками").

Но если об LSO слышали продвинутые пользователи и мало-мальски хорошие
разработчики, то о существовании других техник хранения данных, подчас очень
изощренных (но действенных), многие даже не подозревают. Взять хотя бы новые
хранилища, которые появлялись в
(Session Storage,
Local Storage, Global Storage, Database Storage via SQLite), о которых ты можешь
прочитать в статье " ". Этой проблемой всерьез заморочился польский специалист
по безопасности Samy Kamkar. В результате на свет появилась специальная
JavaScript-библиотека evercookie, которая специально создана для того, чтобы
создавать максимально живучие кукисы в браузере. Кто-то может спросить: "Зачем
это нужно?". Очень просто: для того, чтобы однозначно идентифицировать
посетителя страницы, если он придет вновь. Такие сложно убиваемые кукисы часто
называются Tracking cookies и даже определяются некоторыми антивирусами как
угроза приватности. Evercookie может свести все попытки остаться анонимным к
нулю.

Секрет в том, что evercookie использует сразу все доступные для браузера
хранилища: обычные HTTP-кукисы, LSO, контейнеры HTML5. Кроме того, в ход идет
несколько хитрых приемов, которые с не меньшим успехом позволяют оставить на
компьютере желанную метку. Среди них: генерация особых PNG-изображений,
использование history браузера, хранение данных с помощью тега ETag, контейнер
userData в Internet Explorer - оказывается, что вариантов-то очень много.

В том, насколько это эффективно работает, можно убедиться на сайте
разработчика -
http://samy.pl/evercookie . Если нажать на кнопку "Click to create an
evercookie", в браузере будут созданы кукисы со случайным числом. Попробуй
удалить кукисы везде, где это только возможно. Бьюсь об заклад, сейчас ты
задумался: "Где еще можно удалить кукисы, кроме как в настройках браузера?".
Уверен, что все удалил? Перезагрузи страницу для верности, можешь даже заново
открыть браузер. Вот теперь смело нажимай на кнопку "Click to rediscover cookies".
WTF? Сайту это не помешало откуда-то взять данные - в полях страницы
отобразилось число, которые было сохранено в кукисах. Но мы же их потерли? Как
это получилось? Попробуем разобраться с некоторыми техниками.

Крайне интересным приемом, используемым в Evercookie, является подход
хранения данных в кэшированных PNG-изображениях. Когда evercookie устанавливает
куки, он обращается к скрипту evercookie_png.php со специальной HTTP "плюшкой",
отличной от той, которая используется для хранения стандартной информации о
сессии. Эти специальные кукисы считываются PHP-сценарием, создающим
PNG-изображение, в котором все значения RGB (цветов) выставляются в соответствии
с информацией о сессии. В конечном итоге PNG-файл отправляется браузеру клиента
с пометкой: "файл необходимо кэшировать 20 лет".

Получив эти данные, evercookie удаляет созданные ранее специальные
HTTP-кукисы, затем выполняет тот же самый запрос к тому же PHP-сценарию, но не
предоставляя информации о пользователе. Тот видит, что интересующих его данных
нет, и сгенерировать PNG он не может. Вместо этого браузеру возвращается
поддельный HTTP-ответ "304 Not Modified", что заставляет его вытащить файл из
локального кэша. Изображение из кэша вставляется на страницу с помощью тега
HTML5 Canvas. Как только это происходит, evercookie считывает каждый пиксель
содержимого Canvas, извлекая RGB-значения и, таким образом, восстанавливая
данные изначальных кукисов, которые были сохранены в изображении. Вуаля, все
работает.

Другой прием напрямую использует историю браузера. Как только браузер
устанавливает плюшку, evercookie с помощью алгоритма Base64 кодирует данные,
которые необходимо сохранить. Предположим, что этими данными является строка,
полученная "bcde" после преобразований в Base64. Библиотека последовательно
обращается в фоновом режиме к следующим URL:

google.com/evercookie/cache/b
google.com/evercookie/cache/bc
google.com/evercookie/cache/bcd
google.com/evercookie/cache/bcde
google.com/evercookie/cache/bcde-

Таким образом, эти URL сохраняются в history. Далее в ход идет специальный
прием - CSS History Knocker, который с помощью JS-скрипта и CSS позволяет
проверить, посещал ли пользователь указанный ресурс или нет (подробнее тут -
samy.pl/csshack). Для
проверки плюшек evercookie пробегается по всем возможным символам Base64 на
google.com/evercookie/cache, начиная с символа "a" и двигаясь далее, но только
на один символ. Как только скрипт видит URL-адрес, к которому было обращение, он
начинает перебор следующего символа. Получается своеобразный брутфорс. На деле
этот подбор осуществляется чрезвычайно быстро, потому что никакие запросы к
серверу не выполняются. Поиск в history осуществляется локально в максимально
короткий срок. Библиотека знает, что достигла конца строки, когда URL будет
заканчиваться символом "-". Декодируем Base64 и получаем наши данные. Как
назвать разработчиков браузеров, которые это позволяют?

А что будет, если юзер потрет свои кукисы? Важная фишка самой библиотеки
evercookie в том, что пользователю придется основательно постараться, чтобы
удалить кукисы, оставленные в разных местах - сейчас их 10. Если хотя бы в одном
месте останутся данные куки, то они автоматически восстановятся и во всех других
местах. Например, если пользователь не только удалит свои стандартные кукисы, но
и очистит данные LSO, подчистит HTML5-хранилища, что уже маловероятно, все равно
останутся куки, созданные с помощью кэшированного PNG и web history. При
следующем же посещении сайта с evercookie библиотека не только сможет найти
запрятанную плюшку, но и восстановит их во всех остальных местах, которые
поддерживает браузер клиента. Интересный момент связан с передачей
"плюшек" между браузерами. Если пользователь получает кукисы в одном браузере,
то есть большая вероятность, что они воспроизведутся и в других. Единственное
необходимое для этого условие - сохранение данных в Local Shared Object куке.

Библиотека Evercookie полностью открытая, поэтому ты можешь свободно
пользоваться ей, подгонять под свои нужды. К серверу не предъявляется никаких
серьезных требований. Все что нужно - это доступ к JS-сценарию, в котором
содержится код evercookie. Чтобы использовать Flash-кукисы (Local Shared Object),
в папке со скриптом должен быть файл evercookie.swf, а для работы техник,
основанных на PNG-кэшировании и использовании хранилища ETag, необходим доступ к
PHP-сценариям evercookie_png.php и evercookie_etag.php. Использовать evercookie
можно на любой страничке сайта, подключив следующий скрипт:

var ec = new evercookie();
// устанавливаем cookie "id" со значением "12345"
// синтаксис: ec.set(key, value)
ec.set("id", "12345");
// восстанавливаем кукису с именем "id"
ec.get("id", function(value)
{
alert("Cookie value is " + value)
});

Есть также другой способ получения кукисов, основанный на использовании более
продвинутой callback-функции. Это позволяет извлечь значения кукисов из
различных используемых хранилищ и сравнить их между собой:

function getCookie(best_candidate, all_candidates)
{
alert("The retrieved cookie is: " + best_candidate + "\n" + "You
can see what each storage mechanism returned " + "by looping through the all
candidates object.");

For (var item in all_candidates) document.write("Storage
mechanism " + item + " returned: " + all_candidates + "
");
}

ec.get("id", getCookie);

Библиотека evercookie доступна каждому. Это немного пугает, особенно если
совершенно не представляешь, что можно против нее предпринять.

Проблем с тем, чтобы подчистить куки в браузере и Flash"е, нет. Но попробуй
удали данные везде, где наследила evercookie! Ведь если оставишь куки в одном
месте - скрипт автоматически восстановит значение и во всех остальных
хранилищах. По сути, эта библиотека является хорошей проверкой режима
приватности, который сейчас есть практически у всех браузеров. И вот что я тебе
скажу: из Google Chrome, Opera, Internet Explorer и Safari только последний в
режиме "Private Browsing" полностью блокировал все методы, используемые
evercookie. То есть после закрытия и открытия браузера скрипт не смог
восстановить оставленное им значение. Есть повод задуматься. Тем более что в
ближайшее время разработчик evercookie обещал добавить в библиотеку еще
несколько техник хранения данных, в том числе с помощью технологии Isolated
Storage в Silverlight, а также Java-апплета.

Cookies - это технология, позволяющая сайтам сохранять в браузере небольшую порцию данных (до 4Кбайт).

Обычно эти данные используются на сайте для того, чтобы:

• "узнать" (идентифицировать) пользователя (эмулировать постоянное соединение с сервером);
• сохранить информацию о просмотренных страницах или товаров;
• осуществить простую защиту счётчиков и системы голосования от накрутки;
• запомнить настройки интерфейса, расположение блоков, товара, добавленного в корзину и много другого.

Механизм работы с cookies рассмотрим на следующем примере:

Принцип работы механизма cookies

// получить значения всех cookies страницы var cookies = document.cookie; // выведем куки в консоль браузера console.log(cookies); // выведем с помощью функции alert alert(cookies);

Данное свойство представляет собой строку и чтобы в ней что-то найти, например, определённую cookie (по ключу), её необходимо разобрать. Для этого нужно написать JavaScript код (например, с использованием регулярных выражений) или воспользоваться специально предназначенного для этого библиотекой js-cookie . Данная библиотека, кроме функции чтения куки, имеет также методы для её установки и удаления.

js-cookie - библиотека JavaScript, предоставляющая методы для удобной работы с cookies.

Подключение js-cookie к странице Установка (set) cookie Запись cookie осуществляется с помощью функции set: // name - ключ (имя) куки // value - значение, связанное с ключом name // attributes (необязательный параметр) - атрибуты куки в формате объекта Cookies.set("name", "value"[,attributes]); Установить cookie для всех страниц сайта: Cookies.set("nameCookie", "valueCookie"); // => "nameCookie=valueCookie; path=/" Создать cookie, действительную 30 дней (от текущего момента времени) и видимую любыми страницами сайта: Cookies.set("nameCookie", "valueCookie", { expires: 30 }); // => "nameCookie=valueCookie; path=/; expires=Thu, 13 Apr 2017 13:00:15 GMT" Выполнить запись куки, доступ к которой будет иметь только текущая страница (срок хранения 365 дней): Cookies.set("nameCookie", "valueCookie", { expires: 365, path: "" }); // => "nameCookie=valueCookie; expires=Wed, 14 Mar 2018 13:00:36 GMT" Получение (get) куки Чтение значения cookie осуществляется с помощью метода get: Cookies.get("nameCookie"); // => "valueCookie" Cookies.get("otherCookie"); // => undefined Получить все доступные cookies: Cookies.get(); // => {nameCookie: "valueCookie"} Удаление (remove) cookie Для удаления куки предназначена функция remove: Cookies.remove("nameCookie"); Удаление cookie с указанием атрибута path: Cookies.set("name", "value", { path: "" }); Cookies.remove("name", { path: "/" }); // не получится (не правильный путь) Cookies.remove("name", { path: "" }); // удалится (указан правильный путь)

Важно! Когда вы удаляете cookie, вы должны указать тот же самый путь и домен, который использовался для установки cookie. Если атрибуты куки в Cookies.remove не указать, то будут браться те, которые заданы по умолчанию в Cookies.defaults (приведён ниже).

Например, удалим все cookies, имеющие в качастве пути значение "/": path = "/"; var cookies = Cookies.get(); for (var cookie in cookies) { Cookies.remove(cookie, { path: path }); } Установка атрибутов cookies Передача атрибутов при установке куки осуществляется посредством указания их в качестве значения последнего (3) аргумента функции Cookies.set . Cookies.set("name", "value", { expires: 365, path: "/news/", domain: "m.mydomain.ru", secure: true }); // => "name=value; path=/news/; expires=Wed, 14 Mar 2018 12:54:28 GMT; domain=m.mydomain.ru; secure"

• expires - указывает длительность хранения cookie в браузере. Значение можно задавать как в формате числа (количество дней от текущего момента времени), так и ввиде даты. Если данный параметр не указать, то cookie будет ссесионным, т.е. он удалится после закрытия браузера.

  Например, установим cookie на 30 дней (в качестве формата expires будем использовать дату):

  // функция, возвращающая дату, которая будет через указанное количество дней от текущей function getDateExpires(days) { var date = new Date; date.setDate(date.getDate() + days); return date; } // запись cookie nameCookie=valueCookie Cookies.set("nameCookie", "valueCookie", { expires: getDateExpires(30) }); // => "nameCookie=valueCookie; path=/; expires=Thu, 13 Apr 2017 12:34:13 GMT"

• path - строка, указывающая путь (по умолчанию: / ), посредством которого будет определяться видимость (доступность) cookie. Cookie для некоторой страницы доступна только тогда, когда её path входит в адрес. По умолчанию куки видимы для всех страниц сайта.

  Cookie, которая будет иметь в качестве пути текущее местоположение документа:

  Cookies.set("nameCookie", "valueCookie", { path: "" }); // => "nameCookie=valueCookie"

• domain - строка, указывающая домен (по умолчанию: текущий), в котором cookie должна быть видна. При этом куки также будут доступны во всех поддоменах этого домена.
• secure - устанавливает, необходимо ли при передаче cookies использовать безопасный протокол (https). По умолчанию: false (нет не требуется).
• Кроме индивидуальной установки атрибутов куки при каждом вызове функции Cookies.set , их также можно назначить глобально посредством свойства defaults объекта Cookie . Cookies.defaults = { path: "/", expires: 365 }; Cookies.set("nameCookie", "valueCookie"); // => "nameCookie=valueCookie; path=/; expires=Wed, 14 Mar 2018 12:53:23 GMT" Данные атрибуты будут использоваться функцией Cookies.set по умолчанию. Другими словами только тогда, когда вы вызываете функцию Cookies.set без последнего (третьего) параметра.

Библиотека js-cookie позволяет очень просто установить в качестве значения куки не только текстовое значение, но и данные в формате массива или объекта (а точнее их строковое представление посредством JSON.stringify):

Cookies.set("name", { name1: "value1", name2: "value2" });

Выполнять чтение cookie (имеющей в качестве значения JSON) с помощью функции Cookies.get не очень удобно, т.к. на выходе вы получите обычную строку (а не массив или объект).

Cookies.get("name"); // => "{"name1":"value1","name2":"value2"}" Cookies.get(); // => {name:"{"name1":"value1","name2":"value2"}"}

Для этого можно воспользоваться функцией Cookies.getJSON . Данная функция не только получает cookie, но и разбирает её с помощью JSON.parse:

Cookies.getJSON("name"); // => {name1: "value1", name2: "value2"} Cookies.getJSON("name")["name1"]; // => "value1" Cookies.getJSON("name")["name2"]; // => "value2" Cookies.getJSON(); // => {name: {name1:"value1", name2:"value2"}}

Последнее обновление: 1.11.2015

Одну из возможностей сохранения данных в javascript представляет использование куки. Для работы с куками в объекте document предназначено свойство cookie .

Для установки куков достаточно свойству document.cookie присвоить строку с куками:

document.cookie = "login=tom32;";

В данном случае устанавливается кука, которая называется "login" и которая имеет значение "tom32". И в большинстве браузеров мы можем посмотреть ее, узнать всю информацию о ней и в дальнейшем ее можно использовать в приложении:

Строка куки принимает до шести различных параметров: имя куки, значение, срок окончания действия (expires), путь (path), домен (domain) и secure. Выше использовались только два параметра: имя куки и значение. То есть в случае со строкой "login=tom32;" куки имеет имя login и значение tom32.

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

И в этом случае нам надо установить параметр expires , то есть срок действия куков:

То есть срок действия куки login истекает в понедельник 31 августа 2015 года в 00:00. Формат параметра expires очень важен. Однако его можно сгенерировать программно. Для этого мы можем использовать метод toUTCString() объекта Date:

Var expire = new Date(); expire.setHours(expire.getHours() + 4); document.cookie = "login=tom32;expires=" + expire.toUTCString() + ";";

В данном случае срок действия куки будет составлять 4 часа.

Если в друг нам надо установить куки для какого-то определенного пути на сайте, то мы можем использовать параметр path . Например, мы хотим установить куки только для пути www.mysite.com/home :

В этом случае для других путей на сайте, например, www.mysite.com/shop , эти куки будут недоступны.

Если на нашем сайте есть несколько доменов, и мы хотим установить куки непосредственно для определенного домена, тогда можно использовать параметр domain . Например, у нас на сайте есть поддомен blog.mysite.com :

Document.cookie = "login=tom32;expires=Mon, 31 Aug 2015 00:00:00 GMT;path=/;domain=blog.mysite.com;";

Параметр path=/ указывает, что куки будут доступны для всех директорий и путей поддомена blog.mysite.com.

Последний параметр - secure задает использование SSL (SecureSockets Layer) и подходит для сайтов, использующих протокол https. Если значение этого параметра равно true , то куки будут использоваться только при установке защищенного соединения ssl. По умолчанию данный параметр равен false.

Document.cookie = "login=tom32;expires=Mon, 31 Aug 2015 00:00:00 GMT;path=/;domain=blog.mysite.com;secure=true;";

Для простейшего извлечения куки из браузера достаточно обратиться к свойству document.cookie :

Var expire = new Date(); expire.setHours(expire.getHours() + 4); document.cookie = "city=Berlin;expires="+expire.toUTCString()+";"; document.cookie = "country=Germany;expires="+expire.toUTCString()+";"; document.cookie = "login=tom32;"; document.write(document.cookie);

Здесь были установлены три куки, и браузер выведет нам все эти куки:

Извлеченные куки не включают параметры expires, path, domain и secure . Кроме того, сами куки разделяются точкой с запятой, поэтому нужно еще провести некоторые преобразования, чтобы получить их имя и значение:

Var cookies = document.cookie.split(";"); for(var i=0; i