Prevent Angular 15 iframe update browser history

Question

I have an Angular 15 app with an iframe where I render html content from file. Since this content may be changed by user I update src value. This affects browser history stack. I was googling and found here Angular 7 iframe history back button trouble how to solve the issue. There is only one problem. My src variable is base64 content.

This is what I was using before and it renders fine but affects location stack:

.html

<div class="form-data">
    <iframe width="100%" height="100%" [src]="layoutPath"></iframe>
</div>

.ts

private dbLayout: string;
layoutPath: SafeHtml;

ngOnInit() {
    this.myService.getLayoutFromApi$().subscribe(result => this.dbLayout = result);
}

userChangeSomeContentOfHtml(someUserContent: string) {
    const base64Layout = Base64.encode(dbLayout+ someUserContent);
    this.layoutPath = this.sanitizer.bypassSecurityTrustResourceUrl("data:text/html;base64," + base64Layout);
    }
}

According to solution from above link I updated my code to this:

.html

<div class="form-data">
    <iframe #iframe width="100%" height="100%"></iframe>
</div>

.ts

private dbLayout: string;

ngOnInit() {
    this.myService.getLayoutFromApi$().subscribe(result => this.dbLayout = result);
}

userChangeSomeContentOfHtml(someUserContent: string) {
    const base64Layout = Base64.encode(dbLayout+ someUserContent);
    const layouthPath = this.sanitizer.bypassSecurityTrustResourceUrl("data:text/html;base64," + base64Layout);
    this.iframe.nativeElement.contentWindow.location.replace(layoutPath);
    }
}

Unfortunately variable layoutPath is base64 and location.replace leads me to nowhere.

How can I solve this location stack bypass with a base64 content?