如何在用户同意前阻止各类Cookie的设置与存储？

Hey there! Let's walk through exactly how to block all non-essential cookies (including those from third-party tools like Google Analytics and Mouseflow) until your users give explicit consent—this is critical for meeting GDPR requirements. I'll cover both your PHP backend and JavaScript frontend since your site uses both stacks.

1. Start with a Hard Block on All Non-Essential Cookies #

First, we need to ensure no non-essential cookies get set automatically before consent. Note that essential cookies (like session IDs for login states or consent tracking itself) are exempt under GDPR, so those can stay active.

Server-Side (PHP) #

• Avoid calling setcookie() for any analytics, marketing, or non-essential cookies until you confirm the user has given consent.
• Use a dedicated consent cookie (we'll create this later) or session variable to check consent status on every request.

Example PHP snippet:

session_start();

// Check if user has accepted non-essential cookies
$hasConsent = isset($_COOKIE['cookie_consent']) && $_COOKIE['cookie_consent'] === 'accepted';

// Only set non-essential cookies if consent is confirmed
if ($hasConsent) {
    // Example: Set a user preference/analytics cookie
    setcookie('user_analytics_tracking', 'active', time() + 31536000, '/');
}

// Essential cookies (like PHPSESSID) are auto-set by session_start() and GDPR-compliant

Client-Side (JavaScript) #

Third-party scripts often try to set cookies the moment they load, so we need to intercept all cookie-setting attempts until consent is given. Override the default document.cookie setter to block these:

// Track consent status (default to false)
let userHasConsent = false;

// Save the original cookie setter to restore later
const originalCookieSetter = document.__lookupSetter__('cookie');

// Override the setter to block cookies until consent is given
document.__defineSetter__('cookie', function(cookieStr) {
    if (userHasConsent) {
        // Allow cookie setting if consent is confirmed
        originalCookieSetter.call(this, cookieStr);
    } else {
        // Optional: Log blocked cookies for debugging
        console.log(`Blocked cookie until consent: ${cookieStr}`);
    }
});

2. Delay Loading Third-Party Scripts #

Never load third-party scripts (GA, Mouseflow, chat tools) on initial page load. Instead, load them dynamically only after the user accepts cookies.

Example: Load Google Analytics After Consent #

function loadGoogleAnalytics() {
    const gaScript = document.createElement('script');
    gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=UA-YOUR-ID-HERE';
    gaScript.async = true;
    document.body.appendChild(gaScript);

    // Initialize GA once the script loads
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-YOUR-ID-HERE');
}

Example: Load Mouseflow After Consent #

function loadMouseflow() {
    const mfScript = document.createElement('script');
    mfScript.textContent = `
        window._mfq = window._mfq || [];
        (function() {
            var mf = document.createElement("script"); 
            mf.type = "text/javascript"; mf.async = true;
            mf.src = "//cdn.mouseflow.com/projects/YOUR-MOUSEFLOW-ID.js";
            document.getElementsByTagName("head")[0].appendChild(mf);
        })();
    `;
    document.body.appendChild(mfScript);
}

3. Build a Consent Popup That Triggers Everything #

Your consent popup needs to load immediately (no dependencies on cookies) and handle both accept and reject actions.

Key Popup Logic #

// Handle "Accept All" click
document.getElementById('accept-cookies').addEventListener('click', function() {
    // Update consent status
    userHasConsent = true;

    // Set a persistent consent cookie (this is an essential cookie!)
    document.cookie = 'cookie_consent=accepted; expires=' + new Date(Date.now() + 31536000000).toUTCString() + '; path=/; SameSite=Lax';

    // Hide the popup
    document.getElementById('cookie-consent-popup').style.display = 'none';

    // Load all third-party scripts
    loadGoogleAnalytics();
    loadMouseflow();
    loadChatScript(); // Add your chat tool's load function here
});

// Handle "Reject Non-Essential" click
document.getElementById('reject-cookies').addEventListener('click', function() {
    // Set consent cookie to "rejected"
    document.cookie = 'cookie_consent=rejected; expires=' + new Date(Date.now() + 31536000000).toUTCString() + '; path=/; SameSite=Lax';

    // Hide the popup
    document.getElementById('cookie-consent-popup').style.display = 'none';

    // Do NOT load third-party scripts or set non-essential cookies
});

// On page load, check if consent was already given
window.addEventListener('load', function() {
    const consentCookie = document.cookie.split('; ').find(row => row.startsWith('cookie_consent='));
    if (consentCookie) {
        const consentStatus = consentCookie.split('=')[1];
        if (consentStatus === 'accepted') {
            userHasConsent = true;
            loadGoogleAnalytics();
            loadMouseflow();
            loadChatScript();
        }
        // Hide popup if consent was already given
        document.getElementById('cookie-consent-popup').style.display = 'none';
    }
});

4. Critical GDPR Best Practices #

• Transparency: Your Cookie Policy must clearly list all cookies (essential, analytics, marketing) and their exact purposes.
• Right to Withdraw: Add a way for users to change their consent later (e.g., a footer link that reopens the consent popup).
• Test Thoroughly: Verify no non-essential cookies are set before consent, and that third-party scripts only load after acceptance.

内容的提问来源于stack exchange，提问作者Anup_Tripathi