Не будем вводить вначале много теоретических знаний, боясь запутать людей... Давайте изменим образ мышления - "видеть суть из явления", сначала говорить о том, что видим, а потом уже с точки зрения Задавать вопросы в явление, и, наконец, найти ответ в глубине.
куки мы видим
Я сам создал сайт наhttp://ppsc.sankuai.com. На этой веб-странице я установил несколькоcookie:JSSESSIONID,PA_VTIME,skmtutc,test.
Откройте сайт в браузере Chrome, войдите в режим разработчика, нажмитеResourcesБар -> Выбратьcookies, мы увидим интерфейс, как показано ниже:
Объясните: левый столбецCookiesНиже перечислены настройки, установленные на текущей странице.cookieЧто такое домены . На изображении выше есть только один домен — «ppsc.sankuai.com». Область справа показывает определенные поля в определенном домене.cookieСписок, соответствующий рисунку выше, является 4 набором в домене «ppsc.sankuai.com».cookie.
На этой странице я иду кhttp://ppsc.sankuai.com/getListИнтерфейс отправляет запрос Ajax,request headerКак показано ниже:
На картинке выше мы увидимrequest headerавтоматически добавляется вCookieполе (я не добавлял это поле вручную~),CookieЗначение поля на самом деле равно 4, которое я установилcookie.这个请求最终会发送到http://ppsc.sankuai.comНа этом сервере этот сервер может получатьrequest headerизвлеките эти 4cookie.
Два рисунка выше показываютcookieОсновной поток связи для: Настройкаcookie => cookieавтоматически добавляется вrequest headerСредний => Сервер полученcookie. В этом процессе есть несколько вопросов, которые необходимо тщательно изучить:
Какие данные подходят для
cookieсередина?cookieКак это устроено?cookieПочему он автоматически добавляется вrequest headerсередина?cookieКак добавлять, удалять, проверять и изменять?
Мы продолжим чтение с учетом этих вопросов.
Как работают файлы cookie?
Прежде всего, должно быть ясно, что хранилищеcookieэто функция, предоставляемая браузером.cookieПо сути, это обычный текст, хранящийся в браузере, в каталоге установки браузера будет специальная папка cookie для хранения настроек под каждым доменом.cookie.
Когда веб-страница будет опубликованаhttpПри запросе браузер сначала проверит, есть ли соответствующийcookie, если он есть, он автоматически добавляется вrequest headerсерединаcookieв поле. Это то, что браузер делает для нас автоматически, и каждый разhttpБраузер запросов автоматически сделает это за нас. Эта функция важна, поскольку она связана с тем, «какие данные подходят для хранения вcookieсередина".
сохранить вcookieДанные в , будут автоматически размещаться браузером каждый разhttpВ запросе, если данные — это не те данные, которые необходимо отправлять на сервер для каждого запроса, автоматическая обработка браузером, несомненно, увеличит нагрузку на сеть; но если данные — это данные, которые необходимо отправить на сервер, сервера для каждого запроса (например, аутентификации личности) информации), браузер автоматически обрабатывает этот параметр, что значительно устраняет повторные операции добавления. Таким образом, для этого параметра «информация, которая должна передаваться в каждом запросе (наиболее типичным из них является информация для аутентификации личности)» особенно подходит для размещения вcookie, другие типы данных не подходят.
Но до того, как появился localStorage,cookieзлоупотребляли как средством хранения. любые данныеcookie, даже если данные используются только на странице и их не нужно отправлять на сервер вместе с запросом. КонечноcookieСтандарт все еще имеет некоторые ограничения: максимальный размер файла cookie для каждого доменного имени составляет 4 КБ, а максимальный размер файла cookie для каждого доменного имени составляет 4 КБ.cookieМаксимальное количество — 20 (но многие производители браузеров поддерживают более 20 в конкретных реализациях).
формат куки
document.cookie
Собственный API JS обеспечивает доступ кcookieМетоды:document.cookie(Обратите внимание, что этот метод может получать только типы, отличные от HttpOnly.cookie). Выполните этот код в консоли, и вы увидите результат, как показано ниже:
Напечатанный результат является строковым типом, потому чтоcookieсама по себе является строкой, хранящейся в браузере. Но эта строка отформатирована, состоящая из пар ключ-значениеkey=valueсостоит из пары ключ-значение, состоящей из分号с одним空格разделены.
Параметры атрибутов для файлов cookie
каждыйcookieСуществуют определенные свойства, такие как срок действия, имя домена для отправки, путь и т. д. Эти свойстваcookieвозможность установить,cookieВарианты включают:expires,domain,path,secure,HttpOnly. в настройке либоcookieВы можете установить эти связанные свойства в любое время, конечно, вы не можете их установить, и будут использоваться значения этих свойств по умолчанию. При установке этих свойств свойства разделяются分号с одним空格разделены. Пример кода выглядит следующим образом:
"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"expires
expiresОпция используется для установки «Как долго действителен файл cookie».expiresФактическиcookieсрок годности,expiresдолжно бытьGMTвремя в формате (можно new Date().toGMTString()или new Date().toUTCString()чтобы получить).
Такие какexpires=Thu, 25 Feb 2016 04:18:00 GMTвыражатьcookieСрок действия речи истекает после 25 февраля 2016 г. в 4:18, для просроченныхcookieБраузер очистится. Если этот параметр не установлен, период действия по умолчаниюsession, сессияcookie. этоcookieПропадает после закрытия браузера.
expiresопция в протоколе http/1.0, в новом протоколе http/1.1expiresуже кmax-ageвместо этого, оба из которых используются для ограничения срока действия файла cookie.expiresЗначение представляет собой момент времени (cookie失效时刻= expires),а такжеmax-ageЗначение秒- единичный период времени (cookie失效时刻= 创建时刻+ max-age).
Кроме того,max-ageЗначение по умолчанию-1(т.е. действительный дляsession);подобноmax-ageВозможны три значения: отрицательное, 0, положительное. Отрицательное число: срок годностиsession;0:удалятьcookie; положительное число: действительно для创建时刻+ max-age
домен и путь
domainэто доменное имя,pathэто путь, и они складываются в URL,domainа такжеpathДавайте ограничим URL-адреса, по которым можно получить доступ к файлу cookie.
Одним словом: печеньеdomainдля "baidu.com",path"/", если запрошенный URL-адрес (URL-адрес может быть запросом ресурса js/html/img/css,но не запросы XHR) имя домена — «baidu.com» или его поддомены, такие как «api.baidu.com», «dev.api.baidu.com», а путь URL — «/» или подпути «/home». , "/home/login", браузер добавит этот файл cookie в заголовок файла cookie запроса.
такdomainа такжеpath2 варианта решаются вместеcookieПри отправке браузером автоматически добавляется в заголовок запроса. Если ни одна из опций не установлена, используются значения по умолчанию.domainПо умолчанию устанавливаетсяcookieДоменное имя веб-страницы на ,pathПо умолчанию установлено этоcookieКаталог, в котором находится веб-страница.
Специальное примечание 1:
Когда возникает междоменный запрос xhr, даже если доменное имя и путь URL-адреса запроса соответствуют домену и пути файла cookie, файл cookie не будет автоматически добавлен в заголовок запроса по умолчанию. Если вы хотите знать, почему, пожалуйста, прочитайте последний раздел этой статьи)Специальное примечание 2:
домен — доменное имя (этот домен), который может быть установлен на самой странице, или родительский домен доменного имени самой страницы, но не может быть общедоступным суффиксомpublic suffix. Например: если доменное имя страницы — www.baidu.com, в качестве домена можно указать «www.baidu.com» или «baidu.com», но не «.com» или «com».
secure
secureпараметры для установкиcookieОтправляется только в защищенных запросах. когда запросHTTPSили другие протоколы безопасности, включаяsecureнеобязательныйcookieдля отправки на сервер.
по умолчанию,cookieне принесетsecureвариант (т.е. пустой). Так что по умолчанию либоHTTPSсоглашение все ещеHTTPзапрос протокола,cookieбудут отправлены на сервер. Но будь осторожен,secureОпция ограничивает только возможность передачи на сервер в безопасных условиях, но это не означает, что вы не можете видеть файл cookie.
Ниже мы устанавливаемsecureТип файла cookie:
document.cookie = "name=huang; secure";Затем вы можете увидеть файл cookie в консоли, как показано ниже:
Здесь есть яма, на которую стоит обратить внимание:
Если вы хотите установить его через js в клиенте, то есть на веб-страницеsecureтип файла cookie, который должен гарантировать, что веб-страницаhttpsсоглашение. существуетhttpСтраница протокола не может быть установленаsecureТип куки.
httpOnly
Эта опция используется для установкиcookieможет пройтиjsпосетить. по умолчанию,cookieне принесетhttpOnlyопция (т.е. пустая), поэтому по умолчанию клиент может передатьjsкод для доступа (включая чтение, изменение, удаление и т. д.) к этомуcookieиз. когдаcookieпоясhttpOnlyвариант, клиент не может пройтиjsкод для доступа (включая чтение, изменение, удаление и т. д.) к этомуcookie.
не может быть передан на стороне клиентаjsкод для установкиhttpOnlyТипcookieда типа такогоcookieОн может быть установлен только сервером.
Итак, как мы узнаем, какие из них на страницеcookieдаhttpOnlyкакой тип? Посмотрите на картинку ниже:
всеhttpOnlyТипcookie, столбец HTTP будет помечен знаком √, как показано на рисунке выше.PA_VTIME. Вы передаетеdocument.cookieне может быть получено и не может быть измененоPA_VTIMEиз.
——
httpOnlyи безопасностьИз приведенного выше введения у вас есть такие вопросы: почему мы ограничиваем доступ клиентов
cookie? На самом деле, это для безопасности.Только подумайте: если клиент может передать какой-либо файл cookie
document.cookieПолучите, какие ужасные вещи могут произойти. Когда наша веб-страница подвергается XSS-атаке, возникает вредоносныйscriptСкрипт вставлен на веб-страницу. этот абзацscriptЧто делает скрипт:document.cookieФайлы cookie, связанные с аутентификацией пользователя, считываются и отправляются на сервер злоумышленника. Злоумышленник может легко получить информацию об аутентификации пользователя, поэтому он может притвориться этим пользователем для доступа к вашему серверу (поскольку у злоумышленника есть действительная информация для аутентификации пользователя, он пройдет проверку вашего сервера).
Как установить куки?
понялcookieформат,cookieпараметры свойства, то мы можем установитьcookie. Сначала давайте проясним:cookieОн может быть установлен как сервером, так и клиентом.
Файл cookie настройки на стороне сервера
Независимо от того, запрашиваете ли вы файл ресурсов (например, html/js/css/image) или отправляетеajaxзапрос, сервер вернетresponse. а такжеresponse headerодин из них называетсяset-cookie, который специально используется сервером для установкиcookieиз. Как показано на рисунке ниже, сервер возвращаетresponse headerиз 5set-cookieПоля, каждое из которых соответствуетcookie(Примечание. Вы не можете поместить несколькоcookieположить вset-cookieполе),set-cookieЗначение поля — обычная строка, каждаяcookieТакже устанавливаются параметры связанных свойств.
Уведомление:
Один
set-CookieМожно установить только одно полеcookie, если вы хотите установить несколько файлов cookie, вам нужно добавить одинаковыеset-Cookieполе.Сервер может установить все параметры для файлов cookie:
expires,domain,path,secure,HttpOnly
Клиент устанавливает файлы cookie
В веб-странице, то есть клиенте, мы также можем передатьjsкод для установкиcookie. Например, URL-адрес, который я сейчас открываю,http://dxw.st.sankuai.com/mp/, в консоли выполняем следующий код:
document.cookie = "name=Jonh; ";Просмотрите панель файлов cookie браузера, как показано ниже,cookieОн действительно успешно установлен, и параметр свойстваdomain,path,expiresиспользуются значения по умолчанию.
Затем выполните следующий код:
document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/";Просмотрите панель файлов cookie браузера, как показано ниже, новуюcookieНастройка выполнена успешно, и параметр свойстваdomain,path,expiresстать установленным значением.
Уведомление:
Клиент может установить следующие параметры файла cookie:
expires,domain,path,secure(условно: только еслиhttpsстраница протокола, настройки клиентаsecureтип файла cookie для успеха), но не может быть установленHttpOnlyопции.
Как установить несколько файлов cookie с помощью js
При настройке несколькихcookieКогда код js естественно написан так:
document.cookie = "name=Jonh; age=12; class=111";но вы обнаружите, что написание этого просто добавляет первыйcookie"имя=Джон", все последующиеcookieне были успешно добавлены. Таким образом, самый простой способ установить несколькоcookieметод выполняется повторноdocument.cookie = "key=name",следующим образом:
document.cookie = "name=Jonh";
document.cookie = "age=12";
document.cookie = "class=111";Как изменить и удалить
Изменить файлы cookie
изменитьcookie, просто переназначьте его, старое значение будет перезаписано новым значением. Но будьте осторожны, устанавливая новый файл cookie,path/domainЭти параметры должны сохранить старый файл cookie без изменений. В противном случае старое значение не изменяется, а добавляется новый файл cookie.
удалить куки
удалить одинcookieЭто также очень просто, и он также переназначается, пока новый файл cookieexpiresОпция установлена на точку в прошлом. Но также обратите внимание, чтоpath/domain/Эти параметры должны сохранить старый файл cookie без изменений.
кодировка куки
cookieна самом деле строка, но в этой строке逗号、分号、空格рассматривается как специальный символ. Поэтому, когда ключ и значение файла cookie содержат эти три специальных символа, их необходимо дополнительно закодировать, как правило, с помощьюescapeкодировать, читать сunescapeдля декодирования; конечно, вы также можете использоватьencodeURIComponent/decodeURIComponentилиencodeURI/decodeURI(Разницу между тремя можно найти в этой статье.).
var key = escape("name;value");
var value = escape("this is a value contain , and ;");
document.cookie= key + "=" + value + "; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/";Файлы cookie в междоменных запросах
Как упоминалось в статье, посвященной XHR: по умолчанию, когда происходит междоменное использование, файлы cookie не передаются на сервер в качестве своего рода учетных данных. Требуются дополнительные настройки. По конкретным причинам и тому, как его настроить, вы можете обратиться к этой моей статье:Вы действительно собираетесь использовать XMLHttpRequest?
Кроме того, о междоменном совместном использовании ресурсовCORSЯ настоятельно рекомендую всем прочитать эту статью г-на Жуана Ифэна.Подробное объяснение CORS для совместного использования ресурсов между доменами.
другие добавки
Когда cookie будет перезаписан: когда три поля имя/домен/путь совпадают;
-
Дополнительные примечания по домену (Ссылка 1/Ссылка 2):
Если домен задан явно, браузер сохранит то, на что он установлен, но если он не задан явно, браузер автоматически примет хост URL-адреса в качестве значения домена;
Новая спецификация, когда явно установлена домен, если значение Front немного, то браузер удалит эту точку во время обработки, поэтому последний браузер не является точкой существования (Примечание: большинство браузеров, но не все такое реализация)
-
В чем разница между точкой '.' и отсутствием точки '.':
С точкой: доступ к любому поддомену, включая родительский домен.
Без точки: можно получить доступ только к тому же доменному имени, к поддомену нельзя (но он особенный в IE, он поддерживает доступ к поддомену)
Суммировать
Давайте поговорим об этом здесь сегодня, если что-то не так, пожалуйста, поправьте меня~~
Наконец, некоторые ссылки прилагаются: