Cookie not set in docker about bytexdigital.blazor.components.cookieconsent

[oiBio]

i also love this plugins, and use it in an docker environment (wasm) with traefik as a reverse proxy.
It works for windows and mac as expected, and i cant remember that i need to set anything specific

if you want to check yourself: https://ejobs24.de/

[RyanTT]

If the cookie was the issue, no need to try the JS 👍

[AlexanderZender]

Alright, in that case, this issue is solved. Thank you very much @RyanTT

[RyanTT]

Hi, thanks for using the library.

I've tried to think of what might be the reason for the behavior you're seeing, however I'm afraid with some debugging steps from your side I am unable to reproduce the issue on my end (since I don't experience this Docker specific issue and neither do I have a macOS based system to test on).

A few questions:

1. When speaking of "the cookie is not set on macOS with Safari", do you mean you're opening you're website that is hosted on a remote machine?
2. When talking about running inside docker and no cookie being set, do you host the Docker container locally or on a remote machine?
3. Do you use any kind of proxy server between your ASP.NET Core web server? NGINX Reverse Proxy, Cloudflare, etc.?
4. In any case where no cookie is set, have you tried checking the network calls your browser makes to see if the JS is potentially being blocked from being loaded?

The Safari issue might possibly be an issue with the JS (if the script is correctly loaded in the browser). The cookie not being set in Edge when hosting through Docker is something I'll investigate depending on whether it' a remote container or locally.

[AlexanderZender]

@RyanTT Thank you for your reply. I would be happy to assist to solve the issue, since this is a fantastic plugin for our project but also potentially others who might encounter a similar issue in the future.

To answer your questions:

1. MacOS is opening blazor in Visual Studio and debugging it locally. I haven't tried the docker setup on macOS, so far Windows 11 was used for the docker.
2. Currently only locally, but I can try to upload it to our development kubernetes server. Can a missing certificate be an issue potentially?
3. During debugging, I'm using the local IIS debug configuration. While on MacOS we have a Kestrel configuration.
   When running inside docker: during local docker deployment, there is no proxy I believe. When our project is running in production, we use a Kubernetes cluster, but the blazor pod is directly accessible without any middleware.
4. I will give this a try, and check it. Correct me if Im wrong, when the cookie could not be set, there should be a log message if I understood the code correctly?

Thank you for your support, we are using blazorboilerplate if you are familiar with that blazor template.

[AlexanderZender]

Update:

I tried locally debugging with Kestrel and IIS, both set the cookie accordingly.
I checked the local docker version, and as far as I can see nothing is being blocked:
The cookieconsent.js script:

[RyanTT]

Is your application Blazor WASM or Server based?

[AlexanderZender]

We are using the Blazor in Server based mode

[RyanTT]

2. an a missing certificate be an issue potentially?

Not sure if the browser might interfere in writing a cookie if the website is accessed via HTTP and the Secure flag is set on the cookie. Maybe try setting this to false
https://github.com/BytexDigital/BytexDigital.Blazor.Components.CookieConsent/blob/master/BytexDigital.Blazor.Components.CookieConsent/CookieConsentOptions.cs#LL254C30-L254C30

Though I don't think it's the root cause of the problem. It would be interesting to know whether the JS to set the cookie is actually being ran in the scenarios where no cookie is successfully set so we can pin down where the issue might lie.

To do this, you could uncomment the include of the JS file and instead make a custom JS file you include with this code that will log the attempt to write the cookie:

export let CookieConsent =
{
    ReadCookie: function (name) {
        console.log("Read cookie called.");
        return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || '';
    },

    RemoveCookie: function (name) {
        console.log("Remove cookie called.");
        document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    },

    SetCookie: function (cookieString) {
        console.log("Set cookie called:" + cookieString);
        document.cookie = cookieString;
    },

    ApplyPreferences: function (categories, services) {
        const activatableScriptTags = document.querySelectorAll("script[type='text/plain']");

        activatableScriptTags.forEach(originalScriptElement => {
            const requiredCategory = originalScriptElement.getAttribute("data-consent-category");

            if (!requiredCategory) return;

            if (categories.includes(requiredCategory)) {
                originalScriptElement.type = "text/javascript";
                originalScriptElement.removeAttribute("data-consent-category");

                let sourceUri = originalScriptElement.getAttribute("data-src");

                if (sourceUri) {
                    originalScriptElement.removeAttribute("data-src");
                } else {
                    sourceUri = originalScriptElement.src;
                }

                const newScriptElement = document.createElement("script");
                newScriptElement.textContent = originalScriptElement.innerHTML;

                const sourceAttributes = originalScriptElement.attributes;

                for (let i = 0; i < sourceAttributes.length; i++) {
                    const attributeName = sourceAttributes[i].nodeName;

                    newScriptElement.setAttribute(
                        attributeName,
                        originalScriptElement[attributeName] || originalScriptElement.getAttribute(attributeName));
                }

                if (sourceUri) {
                    newScriptElement.src = sourceUri;
                }

                originalScriptElement.parentNode.replaceChild(newScriptElement, originalScriptElement);
            }
        });
    }
};

[AlexanderZender]

I placed breakpoints within the browser JS at the SetCookie function to see what happens:

Left half is debugging, right half is docker.
Both execute the JS and reach the breakpoints, it is just that within docker the cookie isn't assigned somehow.
I will try setting the flag to false next.

Note, both versions are using HTTP.

[AlexanderZender]

@RyanTT Setting the CookieSecure to false did the trick, I will try to set it up within our kubernetes with certificates and see if that was the issue.

I tried to add your js console file, but the browser has the following problem:
Uncaught SyntaxError: Unexpected token 'export' (at custom_cookieconsent.js:1:1)

I will try to get it to work tomorrow,