How to set consent cookie in Blazor Server

Question

I have a Blazor 3.1 App with Identity where I want to implement a cookie consent banner.

In classic ASP .NET Core, there is a nice template for a cookie consent banner.

    @using Microsoft.AspNetCore.Http.Features

    @{
        var consentFeature = Context.Features.Get<ITrackingConsentFeature>();
        var showBanner = !consentFeature?.CanTrack ?? false;
        var cookieString = consentFeature?.CreateConsentCookie();
    }

    @if (showBanner)
    {
        <div class="container">
            <div id="cookieConsent" class="alert alert-info alert-dismissible fade show" role="alert">
                Use this space to summarize your privacy and cookie use policy. <a class="alert-link" asp-area="" asp-controller="Home" asp-action="Privacy">Learn More</a>.
                <button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string="@cookieString">
                    <span aria-hidden="true">Accept</span>
                </button>
            </div>
        </div>
        <script>
            (function () {
                var button = document.querySelector("#cookieConsent button[data-cookie-string]");
                button.addEventListener("click", function (event) {
                    document.cookie = button.dataset.cookieString;
                }, false);
            })();
        </script>
    }

If you are placing this partial in the layout, you have a perfect working cookie consent banner. If configured appropriately, users cant even login to the Identity Framework until they consent.

Because Blazor does not know a HttpContext, this template is not working. Is there a boilerplate way or do I have to create this feature this by myself?

score 13 · Accepted Answer · edited Aug 25 '21 at 12:58

13

I just solved this in a Blazor 3.1 app yesterday! I opted to use JS Interop and it was super easy.

My web app has multiple front ends, including MVC, Razor Pages and Blazor, so you can open the main solution file and then check out the Blazor project:

https://github.com/shahedc/NetLearnerApp

Things to note in the Blazor project;

I implemented the partial view as a razor component
look for /_CookieConsentPartial.razor in the Shared folder
MainLayout.razor uses this razor component
The _Host.cshtml file includes my js interop file
Look for netLearnerJsInterop.js in wwwroot
the js Interop file contains the document.cookie usage
the razor component uses JSRuntime.InvokeVoidAsync to call the JS method to accept the GDPR consent message and store the cookie

edited Aug 25 '21 at 12:58

Dharman

30,962
25
85
135

answered Dec 30 '19 at 11:59

Shahed C - MSFT

2,831
23
26

1

Wow, very nice and works well. 99,999% the same as in "classic" Razor Pages/Views. – Ned Flanders Dec 30 '19 at 23:02
Thanks, please Mark as Answer if this was what you needed. Have a great day! – Shahed C - MSFT Dec 31 '19 at 02:38
It may be notable that it works only in `@RenderMode.Server`. Otherwise, the `HttpContext` is null on the second call of `OnInitialized` and will throw an _"Object reference not set to an instance of an object."_ Exception. – Ned Flanders Jan 04 '20 at 16:02
Thanks for the extra info. I’ll look into creating a more robust example or handling different render modes if possible. – Shahed C - MSFT Jan 05 '20 at 04:16
There must also be another issue. Produktion behaves very different from dev environment. – Ned Flanders Jan 05 '20 at 14:57
Where are you hosting it? Do you have WebSockets enabled on the server? (e.g. app service settings in Azure) https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/server – Shahed C - MSFT Jan 07 '20 at 01:36
This was the issue. Apache was missing the modules for websockets – Ned Flanders Jan 07 '20 at 07:34
This subject popped up again. The cookie consent works very fine in different browsers in prod. But when I run the check, at google PageSpeed Insights, it throws `Unhandled exception in circuit`. I can also see the yellow error bar in the screenshot taken by the checker. – Ned Flanders Jan 12 '20 at 13:25
Per the stackoverflow rules for answers, this answer really needs to contain relevant code examples directly. Links change and/or go bad over time and even that aside a link to your large github project is much more difficult to figure out than if you excerpt the parts of code you're talking about. Please correct this. – TheAtomicOption Mar 09 '21 at 15:34

score 2 · Answer 2 · answered Dec 30 '19 at 11:34

To set cookies on the client, you still need Javascript Interop.

See this answer: How do I create a cookie client side using blazor

Alternatively, you could store the information you need in the Local Storage using this library, without having to write any Javascript:

https://github.com/Blazored/LocalStorage

score 1 · Answer 3 · answered Jul 16 '21 at 09:47

You can use this GDPR Consent component from Nuget.

However it is only helping you to save work on UI side. User chosen Cookie settings is stored in Local storage which can be read out any time. But it does not restricts any Cookies or Tracking scripts automatically. That must be done by the app developer!

See it in action on demo page. GDPR Consent demo

score 1 · Answer 4 · answered Oct 05 '22 at 21:02

Microsoft has released this article explaining a relatively simple way to implement a GDPR compliant using the CookiePolicyOptions Class and CookiePolicyAppBuilderExtensions.UseCookiePolicy Method. There appears to be dynamic validation to determine if consent is required.

builder.Services.Configure<CookiePolicyOptions>(options => {
    // This lambda determines whether user consent for non-essential 
    // cookies is needed for a given request.
    options.CheckConsentNeeded = context => true;

    options.MinimumSameSitePolicy = SameSiteMode.None; });

Post: EU General Data Protection Regulation (GDPR) support in ASP.NET Core

How to set consent cookie in Blazor Server

4 Answers4