Authentication doesn't work when using an iframe in angular

[drobi36]

Hello,

I'm using a docker container to host code-server and everything works well when using it in a browser, including the password authentication. However, if I use the link to the code-server site in an iframe in in angular , it displays the login, but will not login once entering the password. It just remains on the password page and does not redirect.

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
  selector: 'app-code-editor',
  templateUrl: './code-editor.component.html',
  styleUrls: ['./code-editor.component.css']
})
export class CodeEditorComponent {
  url: any = "";
 
  constructor(private domSanitizer: DomSanitizer) {

  }

  ngOnInit(): void {
    this.url = this.domSanitizer.bypassSecurityTrustResourceUrl("http://10.0.1.131:8088");
  }

}

[code-asher]

Any errors in the browser console? Can you check the network requests and see what they are returning?

[gokulanprofsoft]

We are experiencing the same issue in our environment. Password-based authentication works correctly when accessing code-server directly in the browser, but when code-server is embedded within an iframe, the login page is displayed and authentication does not complete successfully after entering the password. We investigated browser iframe restrictions and authentication redirect behavior, but have not found a viable workaround yet. We would appreciate any updates or recommendations from the community regarding this issue.

[code-asher]

It could be because we set SameSite: lax:

cookies will be sent in a first-party context and also sent along with top-level navigations

I think iframes are considered 3rd-party context (assuming the domain is different from the parent), probably since the parent can access the cookies.

If I am right about this, to fix we likely need to use SameSite: none (which will also require Secure) on the cookie instead.