ASP.Net Core Antiforgery、Angular 和 IFRAMES

Question

Let's assume you have another website that wants to display your Angular application inside an IFRAME on one of their pages. How do you configure ASP.Net Core Antiforgery to work properly?

Answer 1

I spent a reasonable amount of time trying to piece this together, so this is my attempt to help others trying to figure out how to get anti-forgery tokens working with ASP.Net Core 6 and Angular application being displayed inside an IFRAME on another website.

This assumes you have already configured ASP.Net Core Antiforgery to work with Angular SPA .

ASP.Net Core Antiforgery, Angular and IFRAMES

Let's assume you have another website that wants to display your Angular application inside an IFRAME on one of their pages. You will encounter a couple of issues to get this working. Let's tackle them one at a time.

Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'.

By default, when you call service.GetAndStoreTokens(context) , the Antiforgery service sets a response header called X-Frame-Options to te value SAMEORIGIN . According to MDN , "The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame> , <iframe> , <embed> or <object> . Sites can use this to avoid click-jacking attacks, by ensuring that their content is not embedded into other sites."

In order to get past this issue, you need to turn off this behavior when setting up the Antiforgery service:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAntiforgery(options =>
{
    options.HeaderName = "X-XSRF-TOKEN";
    // suppress setting X-Frame-Options to SAMEORIGIN
    options.SuppressXFrameOptionsHeader = true;
});

Now your web page displays inside the IFRAME, but none of the POST requests work properly. That's because there are no cookies are being passed to it.

Cookies not being sent into IFRAME

According to this excellent article, "this is a relatively new problem, as up until recently cookies would be sent through cross-site requests. It all changed when the default value for the SameSite cookie attribute was changed by Google Chrome -- introducing new default behavior that prevents these cookies from going through cross-site requests."

If you watch the network traffic, you'll notice that the cookies that come down with you application entry point are marked as SameSite:Strict . This means they will only get sent if the request comes from a client directly connected to your site. They don't get sent to the IFRAME, so your Angular application is unable to read them and send it back in the HEADER of your API request.

To resolve this problem, you need to fix both of your cookies. Both of them need to be updated to SameSite:None (cookie can be sent to any site) and Secure:true (can only be delivered over HTTPS), which will allow the cookie to flow into the IFRAME.

First, update the Antiforgery service to fix the properties on the default cookie:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAntiforgery(options =>
{
    options.HeaderName = "X-XSRF-TOKEN";
    // suppress setting X-Frame-Options to SAMEORIGIN
    options.SuppressXFrameOptionsHeader = true;
    // allow cookie to be sent to IFRAME
    options.Cookie.SameSite = SameSiteMode.None;
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
});

Then update the cookie being sent to the Angular application:

var app = builder.Build();
app.MapControllers();

var service = app.Services.GetRequiredService<IAntiforgery>();

app.Use(async (context, next) =>
{
    var path = context.Request.Path;
    if (path.Equals("/default.html", StringComparison.CurrentCultureIgnoreCase))
    {
        // generate .AspNetCore.Antiforgery authentication cookie
        var tokenSet = service.GetAndStoreTokens(context);
        var token = tokenSet.RequestToken;
        // duplicate the .AspNetCore.Antiforgery authentication and create a cookie called XSRF-TOKEN
        if (token != null)
        {
            context.Response.Cookies.Append("XSRF-TOKEN", token, new CookieOptions
            {
                Path = "/",
                HttpOnly = false,
                // allow cookie to be sent to IFRAME
                SameSite = SameSiteMode.None,
                Secure = true
            });
        }
    }

    await next(context);
});

At this point, the application should display properly in the IFRAME and be able to interact with the Web API. I hope this helps!