Как посмотреть cookie на сайте с помощью JavaScript

До сих пор не понимаю, почему в Европе запретили использовать cookie без того, чтобы обязательно не уведомить об этом пользователя сайта. Пока никакой угрозы в этом не нахожу, — только сплошные удобства (и всё для того же пользователя сайта). Но информация о cookie хранится на компьютере пользователя, — что есть то есть. Ну и что такого, что её может прочитать программист на сервере, на котором расположен сайт, который посещает пользователь? Кроме cookie вообще можно достаточно много узнать об устройстве, которое используется для доступа к сайту. Это никого не пугает?.. Ну и хорошо! Кому интересно, что можно узнать о пользователе на сервере, поищите информацию о переменных окружения (чтобы зря не волноваться об утечке своих персональных данных или всё-таки начать переживать и перестать пользоваться интернетом).

Что такое cookie и для чего они нужны

Cookie — это записи в виде:

Имя_переменной = Значение_переменной

Всего лишь. Имена переменных придумывают программисты, а вот значения, могут зависеть от того, для чего та или иная кука записывается. Это может быть адрес текущей страницы, на которой находится пользователь, время встроенного проигрывателя для того, чтобы он мог продолжить изучать содержимое сайта или проигрывание выбранного видео или аудио с того места, где остановился в прошлый раз. Удобно? Пользователю? Пусть запретит и пусть ему станет неудобно, зато без записи данных на диск его компьютера или телефона.

Также в cookie могут записываться значение всяких служебных переменных, помогающих правильно идентифицировать пользователя. Например, переменная token может иметь какой-то случайный на первый взгляд набор символов, но если этот набор символов совпадёт с тем, что сохранён на сервере, программа, которая управляет доступом в закрытую часть сайта, не будет каждый раз спрашивать ввода логина и пароля. Удобно? Нет? Удобнее вводить каждый раз логин и пароль при переходе по сайту? Отключите cookie и наслаждайтесь!.. Хотя для особых параноиков, программисты могут передавать эти данные не в cookie, а в коде самих страниц сайта.

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

Так что письмо любимой бабушке о том, когда и где состоится передача горячих пирожков, написанное в соседней вкладке браузера в почтовом сервисе, никогда не попадёт в руки серого волка, подстерегающего Красную шапочку в засаде в кустах. По крайней мере, с помощью cookie точно.

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

Как посмотреть список cookie с помощью JavaScript

Теперь о деле. Как просмотреть cookie, хранящиеся у пользователя непосредственно у него в браузере. Для этого служит свойство document.cookie. Поэтому, дополнив текст страницы кодом:

<script>
document.write (document.cookie);
</script>

Как вывести cookie в виде списка с помощью JavaScript

Все куки, относящиеся к данному домену (исключая те. которые имеют свойство httpOnly), будут выведены в одну строку в виде пар Переменная=Значение, разделённых ;. Всё бы хорошо, но плохо воспринимается. Хорошо бы, если бы каждая переменная с её значением были в отдельной строчке. И это можно устроить с помощью регулярных выражений в JavaScript:

<script>
document.write ( document.cookie.replace(/; /g,"<br>") );
</script>

В коде выше символ ;  заменяется HTML-тегом <br>, переводя начало строки для вывода новой пары переменной с её значением.

Ну и совсем для перфекционистов (к коим иногда отношусь и я), код, который выводит список cookie в виде нумерованного списка. используя всё ту же самую замену, но уже на HTML-теги нумерованного списка:

<script>
document.write ( '<br><ol><li>' + document.cookie.replace(/; /g,"</li><li>") + '</ol>');
</script>

Как посмотреть список cookie с помощью JavaScript в браузере

Для того, чтобы не лазить в настройках браузере или у себя на диске, проще всего открыть консоль браузера и ввести одну из строк JavaScript в строку ввода консоли и нажать Enter. Теги <script> и </script> при этом вводить не надо. Только строку вывода кукис.

Все варианты вывода cookie на сайте с помощью JavaScript

Ну и чтобы был код для вставки в код страницы для тех. кто хочет сразу попробовать:

<h2><b>Работа с cookie с помощью JavaScript</b></h2>
<br><b>Куки как есть:</b><br>
<script>
document.write (document.cookie);
</script>
<br><b>Куки списком:</b><br>
<script>
document.write ( document.cookie.replace(/; /g,"<br>"));
</script>
<br><b>Куки нумерованным списком</b>
<script>
document.write ( '<br><ol><li>' + document.cookie.replace(/; /g,"</li><li>") + '</ol>');
</script>

Вставлять лучше либо сразу после <body>, — тогда список cookie будет вверху страницы, либо перед </body>, — тогда список будет внизу страницы.

Как открыть консоль браузера, думаю объяснять не надо? Это вообще не потребует ничего менять на сайте — всё будет сразу на экране.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)