fix: browser uses DomSanitizer for iframe, key-based reload instead of URL hack

This commit is contained in:
Butterfly Dev 2026-04-07 04:01:56 +00:00
parent ef1b8dfa4e
commit cecca9f90f
2 changed files with 16 additions and 3 deletions

View File

@ -17,7 +17,8 @@
<!-- Content -->
<div class="browser-content">
<iframe
[src]="url()"
[src]="safeUrl()"
[attr.key]="reloadKey()"
class="browser-frame"
sandbox="allow-same-origin allow-scripts allow-forms"
(load)="onLoad()"

View File

@ -1,5 +1,6 @@
import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@Component({
selector: 'app-browser',
@ -12,6 +13,15 @@ export class BrowserComponent {
readonly url = signal('https://www.wikipedia.org');
readonly inputUrl = signal('https://www.wikipedia.org');
readonly isLoading = signal(false);
/** Used to force iframe reload without URL hacks. */
readonly reloadKey = signal(0);
constructor(private sanitizer: DomSanitizer) {}
/** Sanitized URL safe for iframe [src] binding. */
readonly safeUrl = signal<SafeResourceUrl>(
this.sanitizer.bypassSecurityTrustResourceUrl('https://www.wikipedia.org'),
);
navigate(): void {
let target = this.inputUrl().trim();
@ -20,6 +30,8 @@ export class BrowserComponent {
}
this.inputUrl.set(target);
this.url.set(target);
this.safeUrl.set(this.sanitizer.bypassSecurityTrustResourceUrl(target));
this.isLoading.set(true);
}
onUrlKeydown(event: KeyboardEvent): void {
@ -34,7 +46,7 @@ export class BrowserComponent {
refresh(): void {
this.isLoading.set(true);
this.url.set(this.url() + ' '); // Force iframe reload
setTimeout(() => this.url.set(this.inputUrl()), 50);
// Bump the key to force Angular to recreate the iframe element.
this.reloadKey.update((k) => k + 1);
}
}