Загрузка iframe через запрос get в угловых 5

Question

Я встраиваю панель управления графаной в мое угловое приложение. У меня есть следующий компонент в моем угловом приложении.

test.component.html

<div class="dashboard">
    <iframe width="100%" height="100%" [src]="url | safe" style="border:none;"></iframe>
</div>

Это в основном графана iframe

Я хотел добавить несколько заголовков auth перед загрузкой iframe, поэтому вместо прямой загрузки iframe я добавил код, чтобы сделать запрос get в iframe.

Вот код, который я добавил в test.component.ts

    ngOnInit() {

        this.get(this.url).subscribe(blob => this.iframe.nativeElement.src = blob);
    }

    get(url: string): Observable<any> {
        const options = {
            headers: new HttpHeaders({
                'X-WEBAUTH-USER': 'niranjan'
            }),
            responseType: 'blob' as 'json'
        }

        return new Observable((observer: Subscriber<any>) => {
            let objectUrl: string = null;

            this.http
                .get(url, options)
                .subscribe(m => {
                    objectUrl = URL.createObjectURL(m);
                    observer.next(objectUrl);
                });

            return () => {
                if (objectUrl) {
                    URL.revokeObjectURL(objectUrl);
                    objectUrl = null;
                }
            };
        });
    }

и изменил мой test.component.html на следующий

<div class="dashboard">
    <iframe #iframe width="100%" height="100%" style="border:none;"></iframe>
</div>

Во втором сценарии загружается iframe, но запросы к css, шрифтам, изображениям и другим запросам отдыха не выполняются, поэтому я не получаю весь пользовательский интерфейс grafana. Я хочу визуализировать тот же графический интерфейс через запрос get для iframe, есть ли способ сделать это в Angular 5.