Setting cuookie user preferences in Android/iOS in ifame in MAUI BlazorWebView

Question

I am building a MAUI Blazor app (using BlazorWebView) and have the need to use an iframe on a Blazor page to embed a page from a website. I have control of the site in the iframe and have set the cookie settings for SameSite set to none and Secure to true. It works well in Windows as the cookies are received and sent back to the iframe as expected. However the cookies are being blocked by user preferences in Android (and I suspect iOS). I have set the user preferences in Chrome on the android device to allow all cookies, but I am not sure how, or if it is possible to set the cookie user preferences for the iframe, which I believe an instance of the default WebView of the operating system. Cookies do work on Android in a MAUI WebView, and I think that it is possible to get them working on iOS, but I would really like to use an iframe in the BlazorWebView.

Thank you in advance.

Answer 1

Hi @Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) ,

Sorry for the delay. The cookies are being set within the website that is in the iframe. I confirmed that they are getting saved in windows within the Maui blazor app, and also in a razor website that includes the iframe, running in chrome on android. To test the iframe I created a simple razor pages site that has the following code for the Index,cshtml.cs, which simply sets a TestCookie to true on the first get request. Cookies are set to SameSiteMode.None and CookieSecurePolicy.Always in the website running inside of the iframe. This is the code in Index,cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace iframesubtest.Pages
{
public class IndexModel : PageModel
{
static int count = 0;
[BindProperty]
public string TestCookieValue { get; set; } = false.ToString();
private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)  
    {  
        _logger = logger;  
    }  

    public void OnGet()  
    {  
        if (count == 0)  
        {  
            HttpContext.Response.Cookies.Delete("TestCookie");  
            HttpContext.Response.Cookies.Append("TestCookie", true.ToString(), new CookieOptions() { HttpOnly = true, IsEssential = true, SameSite = SameSiteMode.None });  
        }  
        else if (HttpContext?.Request?.Cookies != null)  
        {  
            TestCookieValue = HttpContext.Request.Cookies["TestCookie"] ?? false.ToString();  
        }  
        count++;  
    }  
}  

}

Then I simply included the site in an iframe in both a maui blazor app, and another razor pages website. The code was the same in both cases as below:

<iframe src="https://iframetest.theatertoolkit.com" height="300px" width="500px" />

When I place the iframe in another razor pages website, and view the website in chrome, the cookie gets passed back in the response and saved properly as you can see in this screenshot.

Then the cookie is passed in the subsequent request when I refresh the page as seen in this screenshot.

But in the Maui Blazor app, with the iframe in a blazor component, the cookie is not save properly as you can see in the following screenshot, with cookies highlighted in yellow and the exclamation points next to the cookies. Hovering over the exclamation points display the text "This Set-Cookie was blocked due to user preferences".

The cookie is of course not sent on any subsequent requests because it was never set. It is my understanding that an iframe in a blazor component in a BlazorWebView is rendered using the native web view of the operating system (but this is way outside of my area of expertise). Since the iframe is for a different domain, any cookies would be considered third-party cookies. I have done some digging around and I believe that it can be fixed be enabling third party cookies in the android web view, but since it is being rendered by the BlazorWebView I do not know how to accomplish this. I believe that it needs to be done through the CookieManager as follows: CookieManager.getInstance().setAcceptThirdPartyCookies(webView,true).

Thank you in advance for any assistance or insight that you might be able to provide,
Kevin

Answer 2

I figured out the answer, for anyone who might also have this question. You just need to add the following code to the CreatePlatformView() method in the BlazorWebViewHandler.Android.cs file in the BlazorWebView project of the maui repository (you can add it anywhere after the blazorAndroidWebView variable is set). Unfortunately I didn't see any way to do this without compiling the maui source and I couldn't find anything similar for iOS because apple doesn't allow changing the cookie permissions in the WKWebView. Anyway, here is the code that I added, which worked for me:

var cookieManager = CookieManager.Instance;
if (cookieManager != null)
{
cookieManager.SetAcceptThirdPartyCookies(blazorAndroidWebView, true);
}