Problems loading vue.js into iframe in an Ionic app

paolocezar91 · August 20, 2019, 2:42pm

I have an Ionic 4 (Angular) app that has to access some webviews. These webviews need authorization to be accessed. So I make a HTTP GET request with authorization, then I inject the HTML code in an iframe.

I have a Ionic Page with the following code:

  addPageToWebview(url) {
    const baseUrl = '***url***',
    iframe = document.querySelector('iframe');

    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write('');
    iframe.contentWindow.document.close();

    from(this.nativeHttp.get(url, {}, {})).pipe(
      map(({data}: any) => {
        let content = (data);
        content = content.replace('<head>', '<head><base href=' + baseUrl + '>');
        return content;
      })
    ).subscribe((content: string) => {
        iframe.contentWindow.document.write(content);
        loading.dismiss();
      });
  }

I’m using Cordova Native HTTP (because of CORS) to make a get request. The Authorization headers are set previously when the user logs in.

I then add the “base” tag, as is lacking in the loaded html. Debugging this on my device using chrome dev tools, I got this error:

Uncaught DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://portalsocio.eu-west-1.elasticbeanstalk.com/tabs/iframe' cannot be created in a document with origin 'http://localhost' and URL 'http://localhost/tabs/iframe'.

It seems this is a problem with window.history scope. Shouldn’t the iframe window object be separated from its parent window?

I can’t use the In App Browser or Webview as they don’t seem to have Authorization headers.

Would setting X-Frame-Options response headers on server side help in this case?I have an Ionic 4 app that has to access some webviews. These webviews need authorization to be accessed. So I make a HTTP GET request with authorization, then I inject the HTML code in the iframe.