HTML元素Iframe嵌入跨域界面(React代码)

背景：

使用Iframe嵌入别的域的界面，涉及安全、跨域等问题

代码：

import React, { Component } from 'react';
class A extends Component {
    // xxx;
    
  render() {
    return (
            <div className="xxx">
                <iframe
                    style={{width:'100%',border:'0px',height:xxx}}
                    sandbox="allow-scripts allow-forms allow-same-origin"
                    scrolling="auto"
                    src={tempReportHerf}
                />
            </div>
            );
  }
}

问题及解决：

1、配置sandbox 配置允许运行script & form才能运行iframe中嵌入的界面。

2、对于配置了安全认证的页面(Https)等，首先需要配置证书，可登陆要嵌入的页面获取证书后安装到浏览器。

3、对于apache，修改对于Iframe的配置项在httpd.conf文件中，内容为“Header always append X-Frame-Options SAMEORIGIN”。配置不生效，去除该行配置。

4、spring-security.xml文件，其iframe配置项与apache中的配置项重复。但是，因为该配置项是spring安全框架默认配置项，无法直接删除，所以需要把配置项修改为关闭。需要把配置行修改为如<headers><frame-options disabled="true"/></headers>，禁用掉frame-options。

5、如iframe嵌入的页面没有配置正式证书，单独访问时会出现如下提示：

解决

(1) iframe元素上方给出"如首次进入或者页面无法正常加载，请点击"的超链接，目标和iframe指向的src一致，用户主动触发一次

(2)申请正式证书

 

 

参考博客：

https://blog.csdn.net/lp18036194881/article/details/79541100