CODEWITHSUNDEEP
htmlreactjsiframe
eneski
eneski

Reputation: 1665

wrong behaviour of the dynamically populated iframe

I would like to embed a web page into my web page. The page that will be embedded requires token for authentication. Instead of sending the token via query params, I would like to send it in the Authorization Header. I modified the iframe population as specified in the following code.

import React, { Component } from 'react'
import axios from 'axios'

export default class CustomService extends Component {
    constructor(props) {
        super(props);
        this.theFrame = React.createRef();
    }

    render() {
        const token = localStorage.getItem("token"),
            header = { 'Authorization': 'Bearer ' + token },
            url = "http://localhost:4000";

        axios.get(url, { headers: header })
            .then((response) => {
                let doc = this.theFrame.current.contentDocument;
                doc.open();
                doc.write(response.data);
                doc.close();
            })
            .catch((error) => {
                console.log(error);
            });


        return <div>
            <div>
                <iframe style={{ width: "100vw", height: "50vh" }} ref={this.theFrame} title="headers set manually for this iframe"></iframe>
            </div>
        </div>
    }
}

When the code executes, I get the following error on the console. Even though the content of the iframe is correct, the styling has not been applied. enter image description here

Any help appreciated, thanks in advance.

Upvotes: 0

Views: 1061

Answers (1)

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4489

Well, you perform an HTTP request using Axios, then you get the result and put the result as a content of the iFrame. This part, even if maybe is not a good idea by itself, seems to be OK, as you wrote in your question.

Now, the HTML document you loaded in this way in your iFrame, as you said, contains some style, and the styles refers to some file that may be served by http://localhost:4000 (unless you declared them in a <style> tag or unless they are served by another host).

To solve your problem you have to ensure, at least, what follows:

  • Are these files protected by some kind of authentication too?
  • Can these files be used inside an iFrame?
  • In the HTML page you loaded, can these file be resolved by the browser?

Observations about the points you should check, in order:

  • If the files are protected with the same logic of the initial request, you have to implement the same logic also for the styles files
  • Check if the server that provide you the CSS have any kind of limitations in this sense
  • Since you are not setting the URL of your iFrame, the CSS file src attribute should specify the host, or, another solution, the page should specify a base URL for the resources.

Now, back to my initial consideration, are you sure that the way you are using to solve this problem is the best and only option you have?

If the only problem is the base URL, well, simply add this tag as explained here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

Upvotes: 1

Related Questions