动态填充的 iframe 的错误行为

Question

我想在我的网页中嵌入一个网页。将嵌入的页面需要令牌进行身份验证。我不想通过查询参数发送令牌，而是在授权标头中发送它。我按照以下代码中的指定修改了 iframe 填充。

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 的内容是正确的，也没有应用样式。

任何帮助表示赞赏，在此先感谢。

Answer 1

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

现在，正如您所说，您以这种方式在 iFrame 中加载的 HTML 文档包含一些样式，并且这些样式引用了可能由 http://localhost:4000 提供的某些文件（除非您在 <style> 中声明它们标记或除非它们由其他主机提供服务）。

要解决您的问题，您至少必须确保以下内容：

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

关于你应该检查的点的观察，按顺序：

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

现在，回到我最初的考虑，你确定你用来解决这个问题的方法是你最好的也是唯一的选择吗？

如果唯一的问题是基本 URL，那么只需按照此处的说明添加此标记：

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