Angular 2 - Inject custom headers on iframe

Question

I'm getting crazy trying to inject request custom header (something like 'AUTH-TOKEN':'SomeToken123') to an on Angular 4.

I need to pass to the iframe page some required custom header parameters.

Anyone can please help me?

foo.component.html

<iframe [hidden]="isLoading" class="full" #iframe [src]="secureSrc" (load)="onIframeLoad()" frameborder="0" ></iframe>

component.ts

@Component({
    selector: 'app-foo',
    templateUrl: './foo.component.html'
})

export class FooComponent implements OnInit {

    @ViewChild('iframe') iframe: ElementRef;
    public isLoading: Boolean;
    public secureSrc: SafeResourceUrl;

    constructor(
        private sanitizer: DomSanitizer,
        private renderer: Renderer2,
        private router: Router
    ) {  }

    public ngOnInit() {
        this.isLoading = true;

        this.secureSrc = this.getIframeURL();
    }

    private getIframeURL(): SafeResourceUrl {
        return this.sanitizer
            .bypassSecurityTrustResourceUrl('https://iframe.address');
    }

    public onIframeLoad(): void {
        if (typeof this.iframe !== 'undefined') {

            // Once iFrame Loaded
            if (typeof this.token !== 'undefined') {
                this.iframe
                    .nativeElement
                    .contentWindow
                    .postMessage({
                        externalCommand: 'some-action',
                        parameter : 'action parameter'
                    }, '*');
            }

            this.isLoading = false;
        }
    }
}

Thank you!

Answer 1

You can do it like this:

1. Create a service that will send http get request along with headers, and expects blob response.
2. Use that service in your component to set src of an iframe.
3. Remove [src]="secureSrc" from iframe and leave only #iframe

.

// service
import { Injectable } from '@angular/core';
import { ResponseContentType, Http, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';

@Injectable()
export class UrlHelperService {
    constructor(private http: Http) {
    }

    get(url: string): Observable<any> {
        let options = new RequestOptions();
        options.headers = new Headers();
        options.headers.append('AUTH-TOKEN', 'SomeToken123');
        options.responseType = ResponseContentType.Blob;

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

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

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

// component
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { UrlHelperService } from './url-helper.service';  

@Component({
  selector: '',
  templateUrl: './my-app.component.html'
})   
export class MyAppComponent implements OnInit {
  @ViewChild('iframe') iframe: ElementRef;

  constructor(private urlHelperService: UrlHelperService) { }

  ngOnInit() {
    this.urlHelperService.get('http://localhost/api/file/123')
      .subscribe(blob => this.iframe.nativeElement.src = blob);
  }
}