动态填充的iframe的错误行为 [英] wrong behaviour of the dynamically populated iframe

问题描述

我想将网页嵌入到我的网页中.将要嵌入的页面需要令牌进行身份验证.我希望通过授权标头发送令牌，而不是通过查询参数发送令牌.我按照以下代码中的说明修改了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>
    }
}

执行代码时，在控制台上出现以下错误.即使iframe的内容正确，也未应用样式.

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.

任何帮助表示感谢，谢谢.

Any help appreciated, thanks in advance.

推荐答案

好，您使用Axios执行HTTP请求，然后获得结果并将结果作为iFrame的内容.正如您在问题中所写的那样，即使这本身并不是一个好主意，这部分也似乎还可以.

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.

现在，如您所说，您以这种方式加载到iFrame中的HTML文档包含一些样式，这些样式指的是 http://localhost:4000 (除非您在< style> 标记中声明了它们，或者除非它们由其他主机提供).

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:

• 这些文件也受到某种身份验证的保护吗?
• 这些文件可以在iFrame中使用吗?
• 在您加载的HTML页面中，浏览器可以解析这些文件吗?

关于您应检查的点的观察，顺序为:

Observations about the points you should check, in order:

• 如果文件受到与初始请求相同的逻辑保护，则您还必须为样式文件实现相同的逻辑
• 在这种意义上，检查为您提供CSS的服务器是否有任何限制
• 由于您未设置iFrame的URL，因此CSS文件 src 属性应指定主机，或者，在另一种解决方案中，页面应指定资源的基本URL.

• 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?

如果唯一的问题是基本URL，那么只需按照以下说明添加此标记即可:

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

这篇关于动态填充的iframe的错误行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！