Cookies
если бы можно было находить людей с одинаковыми кукис, насколько бы у них были сходные характеры и интересы?
если бы можно было находить людей с одинаковыми кукис, насколько бы у них были сходные характеры и интересы?
Последние N лет делаю на фрилансе сайты. Намедни приходит от старого клиента претензия, что мол есть проблемы в моей работе двухлетней давности.
Получил он (клиент) жалобу на свой сайт по части GDPR - регламента об охране персональных данных. Не то, чтобы там какие-то чувствительные данные раскрыты, просто не было cookie баннера и чекер банально показал отслеживание пользователей по кукисам.
Так вот поскольку сайт делал я, хоть и два года назад, налицо оригинальная попытка повесить ответственность на меня со всеми вытекающими.
Финал диалога с клиентом (К) :
К: - по GDPR нарушениям большие штрафы и этого нельзя не знать, если работаешь в IT
Я: - я не юрист, я лишь разработчик
К: - без знания законов нельзя работать фрилансером. Вы как субъект несете ответственность за всё
Я: - спасибо за объяснение. В работе с вами мне действительно начинает так казаться
Через две недели клиент забрал проекты и прекратил сотрудничество.
А я так и не понял, наглость это была или тупость.
Вы навярняка видели на разных сайтах всплывающий блок снизу.
Выглядит он примерно так:
Давайте заверстаем нечто подобное =)
HTML
<div class="warning warning--active">
<div class="warning__text">На этом веб-сайте используются cookie.</div>
<button class="warning__apply" type="button">OK</button>
<a class="warning__read" href="https://ru.wikipedia.org/wiki/Cookie">Читать полностью</a>
</div>
Наш баннер будет состоять из текста, кнопки подтверждения и ссылки на поясняющий документ.
Основной CSS
.warning {
position: fixed;
bottom: 0;
left: 0;
display: none;
width: 100%;
}
.warning--active {
display: flex;
}
Позиционируем плашку в нижний левый угол и растягиваем ее по ширине.
JavaScript
В нашем скрипте нам необходимо:
— Убедиться, что блок есть — иначе остановить работу;
— Найти блок и кнопку подтверждения;
— Навесить на кнопку «Слушатель»;
— При клике на кнопку удалить класс warning--active с блока, тем самым скрыв его;
— Сохранить куки, которые будут говорить нам о том, что пользователь нажал на кнопку.
let container;
let apply;
const init = () => {
if (!who()) {
// останавливаем работу скрипта
return;
}
findElements();
subscribe();
};
Who
Если блока на странице нет — функция вернет false:
const who = () => document.querySelector(".warning");
findElements()
Находим сам блок и кнопку внутри:
const findElements = () => {
container = document.querySelector(".warning");
apply = container.querySelector(".warning__apply");
};
subscribe()
Добавляем кнопке обработчик события «клик»:
const subscribe = () => {
apply.addEventListener("click", onClick);
};
onClick()
const onClick = (event) => {
// Отменяем поведение по умолчанию
event.preventDefault();
// Прячем блок
hideContainer();
// Устанавливаем куки
setCookie();
};
hideContainer()
const hideContainer = () => {
container.classList.remove("warning--active");
};
В разделе основной css можно увидеть, что у класса warning задано свойство display: none;, а у warning--active — display: flex;
Удалив warning--active, мы скрываем блок.
setCookie()
const setCookie = () => {
document.cookie = "warning=true; max-age=2592000; path=/";
};
Установим куки, которые будут говорить нам о том, что пользователь принял согласие на использование кук.
2592000 — количество секунд в месяце
После установки куки предполагается, что блок больше не будет появляться на странице.
Этого можно достичь двумя способами
Через бэк
Просим бэкенд или самостоятельно (если вы и есть бекенд) не выводить блок если заданные вами куки есть у пользователя.
Автор статьи предпочитает способ через бэк =)
Через фронт
Перепишем функцию who(), которая вместо проверки на наличие блока будет искать куки:
const who = () => {
// если куки есть - вернет true
return getCookie('warning');
};
Реализацию функции getCookie можно посмотреть на learn.javascript.ru
Из HTML убираем класс warning--active
<div class="warningwarning--active">
По умолчанию блок будет скрыт. Покажем его если скрипт не нашел куки:
const showContainer = () => {
container.classList.add("warning--active");
};
const init = () => {
if (!who()) {
return;
}
findElements();
showContainer();
subscribe();
};
Все остальное без изменений.
Полный скрипт:
let container;
let apply;
const who = () => document.querySelector(".warning");
const findElements = () => {
container = document.querySelector(".warning");
apply = container.querySelector(".warning__apply");
};
const hideContainer = () => {
container.classList.remove("warning--active");
};
const setCookie = () => {
document.cookie = "warning=true; max-age=2592000; path=/";
};
const onClick = (event) => {
event.preventDefault();
hideContainer();
setCookie();
};
const subscribe = () => {
apply.addEventListener("click", onClick);
};
const init = () => {
if (!who()) {
return;
}
findElements();
subscribe();
};
init();
Или на codepen
Полный скрипт можно сократить до 8 строк
if (document.querySelector(".warning")) {
const container = document.querySelector(".warning");
const apply = container.querySelector(".warning__apply");
apply.addEventListener("click", () => {
container.classList.remove("warning--active");
document.cookie = "warning=true; max-age=2592000; path=/";
});
};
Все сайты: "Пользуясь нашим сайтом, вы соглашаетесь на использование сookies, бла-бла-бла..."
Сайт Артемия Лебедева: "Мы используем куки на всех своих сайтах, включая этот, потому что без кук вообще весь интернет работал бы через жопу".
"Мы используем куки на всех своих сайтах, включая этот, потому что без кук, вообще весь интернет работал бы через жопу (подробнее)"
А не вот эти все ваши "мы делаем мир лучше, потому что..."
Наткнулся на такое впервые, если есть ещё с удовольствием гляну в комментариях!
В душе не чаю какие теги нужны.
Оригинал и ещё чуть-чуть: https://www.wired.com/story/wired-cartoons-week-2/
Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.
Аналогичная ситауация с всплывающим окошком про кукисы. Кстати, есть предложение бойкотировать сайты, спамящие таким окошком, как смотрите?
В:Объясните, знающие. Везде ТРЕБУЕТСЯ поставить галочку напротив всяких согласий об обработке персональных данных телефона, ФИО и пр., участия в "акциях". Иной, технически, возможности купить товар нет. Насколько это беспредел? В магазинах вроде товар отпускают, без препонов. Даже счет можно оплатить в сбербанке без паспорта. Есть вообще возможность ПОТРЕБОВАТЬ оформить заказ без подобных дополнительных условий?
O:Это требование закона о персданных. Без твоего согласия обработка персданных запрещена.Если продаван соблюдает закон, то такой возможности нет, если ты указываешь свои данные на сайте
В: Закон налагает обязательства на меня, покупателя? А я не хочу подписывать. [...]То есть мне предоставляется не право, а обязательство, да ещё и об участии в сомнительной свистопляске с "партнёрами" моего продавца.О: На них, не на тебя. У тебя есть выбор согласиться или пойти на другую площадку. [...]
В:Ну вот приехали. ) Или в КНДР сразу?