Tự làm cookie banner HTML/CSS/JS có hợp PDPL không?

Tự làm cookie banner HTML CSS có đáp ứng PDPL không?

Có, nếu banner của bạn không chỉ “hiện cho có” mà thực sự cho người dùng quyền lựa chọn trước khi bật cookie không cần thiết. Theo Luật Bảo vệ Dữ liệu Cá nhân 91/2025/QH15, doanh nghiệp cần có cơ sở xử lý phù hợp, minh bạch mục đích, và tôn trọng quyền rút lại/không đồng ý theo quy định.

Với website SME ở Việt Nam, cookie banner thường kéo theo 3 nghĩa vụ thực tế: thông báo rõ loại cookie, lưu trạng thái lựa chọn, và chỉ chạy script phân tích/remarketing sau khi có consent. Nếu làm sai, rủi ro không chỉ là UX kém mà còn có thể phát sinh nghĩa vụ tuân thủ và kiểm tra nội bộ khi có khiếu nại hoặc thanh tra.

Cấu trúc cookie banner HTML nên có gì?

Một banner tối thiểu nên có 4 phần: nội dung giải thích ngắn, nút “Chấp nhận”, nút “Từ chối”, nút “Tùy chỉnh”. Nếu website của bạn dùng analytics, pixel, heatmap hoặc chat widget bên thứ ba, hãy tách rõ cookie cần thiết và cookie không cần thiết.

Nên ưu tiên nội dung ngắn, dễ hiểu, không “đánh đố” người dùng. Ví dụ: “Chúng tôi dùng cookie cần thiết để vận hành website và cookie phân tích để đo lường truy cập. Bạn có thể chấp nhận, từ chối hoặc tùy chỉnh.”

Tự làm cookie banner HTML CSS JS như thế nào?

Cách an toàn nhất là dựng banner bằng HTML/CSS, rồi dùng JS để lưu lựa chọn vào localStorage hoặc cookie nội bộ, sau đó chặn toàn bộ script không cần thiết cho đến khi có consent. Đây là pattern phổ biến, dễ triển khai cho SME, và đủ tốt nếu bạn kiểm soát được toàn bộ tag trên site.

Ví dụ code cookie banner HTML/CSS/JS thuần

Dưới đây là mẫu tối giản có thể dùng ngay. Bạn nên chỉnh nội dung, nhóm cookie và script bên thứ ba theo hệ thống thực tế của mình.

<!-- HTML -->
<div id="cookie-banner" class="cookie-banner" hidden>
  <div class="cookie-banner__content">
    <p><strong>Chúng tôi dùng cookie</strong> để vận hành website, đo lường truy cập và cải thiện trải nghiệm. Bạn có thể chấp nhận, từ chối hoặc tùy chỉnh theo nhu cầu.</p>
    <a href="/chinh-sach-cookie" class="cookie-banner__link">Xem chính sách cookie</a>
  </div>
  <div class="cookie-banner__actions">
    <button id="cookie-reject" class="btn btn--ghost">Từ chối</button>
    <button id="cookie-manage" class="btn btn--secondary">Tùy chỉnh</button>
    <button id="cookie-accept" class="btn btn--primary">Chấp nhận</button>
  </div>
</div>

<!-- Placeholder cho analytics/pixel -->
<script>
  window.loadAnalytics = function () {
    if (window.__analyticsLoaded) return;
    window.__analyticsLoaded = true;
    const s = document.createElement('script');
    s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
    s.async = true;
    document.head.appendChild(s);
  };
</script>

/* CSS */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #111827;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.cookie-banner__content { max-width: 70%; }
.cookie-banner__link { color: #93c5fd; }
.cookie-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { padding: 10px 14px; border: 0; border-radius: 8px; cursor: pointer; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid #6b7280; }
.btn--secondary { background: #374151; color: #fff; }
.btn--primary { background: #2563eb; color: #fff; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; }
  .cookie-banner__content { max-width: 100%; }
  .cookie-banner__actions { width: 100%; }
}

// JS
const STORAGE_KEY = 'cookie_consent_v1';
const banner = document.getElementById('cookie-banner');
const acceptBtn = document.getElementById('cookie-accept');
const rejectBtn = document.getElementById('cookie-reject');

function saveConsent(value) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify({ value, ts: new Date().toISOString() }));
}

function getConsent() {
  const raw = localStorage.getItem(STORAGE_KEY);
  return raw ? JSON.parse(raw) : null;
}

function showBanner() { banner.hidden = false; }
function hideBanner() { banner.hidden = true; }

function applyConsent(value) {
  if (value === 'accepted') {
    window.loadAnalytics?.();
  }
}

const consent = getConsent();
if (!consent) showBanner();
else applyConsent(consent.value);

acceptBtn.addEventListener('click', () => {
  saveConsent('accepted');
  hideBanner();
  applyConsent('accepted');
});

rejectBtn.addEventListener('click', () => {
  saveConsent('rejected');
  hideBanner();
});

Chặn script theo consent cần lưu ý gì?

Điểm quan trọng là không chỉ ẩn banner, mà phải chặn việc tải script cho đến khi có lựa chọn phù hợp. Nếu bạn gắn Google Analytics, Meta Pixel, TikTok Pixel hoặc chat widget, hãy coi chúng là script chỉ được chạy sau consent nếu chúng không thuộc nhóm “cần thiết”.

Cách làm thực tế: để tag ở trạng thái “chưa kích hoạt”, rồi gọi hàm loadAnalytics() sau khi người dùng chấp nhận. Nếu bạn dùng Google Tag Manager, nên cấu hình trigger theo trạng thái consent thay vì thả toàn bộ tag ngay từ đầu. Đây là bước nhiều website Việt Nam hay bỏ sót.

Lưu lựa chọn người dùng thế nào cho đúng?

Ít nhất bạn nên lưu: trạng thái đồng ý/từ chối, thời điểm, phiên bản chính sách cookie, và danh mục cookie mà người dùng chọn. Dữ liệu này hữu ích khi cần chứng minh website đã ghi nhận lựa chọn theo quy trình nội bộ.

Nếu là hệ thống bán hàng, SaaS hoặc app có đăng nhập, bạn nên gắn consent với user ID đã băm hoặc mã nội bộ, nhưng vẫn phải hạn chế dữ liệu và chỉ lưu những gì cần thiết. Với lưu trữ qua localStorage, nhớ cho người dùng có cách thay đổi lựa chọn bất cứ lúc nào.

FAQ về tự làm cookie banner HTML CSS

Nếu bạn muốn triển khai nhanh hơn, consent.vn có thể giúp bạn chuẩn hóa banner, lưu bằng chứng đồng ý và luồng DSAR để tránh lệch giữa code và yêu cầu tuân thủ.

Nguồn: Luật 91/2025/QH15 trên thuvienphapluat.vn; Nghị định 13/2023/NĐ-CP trên thuvienphapluat.vn; cơ quan thực thi Bộ Công an/A05 trên bocongan.gov.vn.