嵌入方案

常见问题汇总

1. 跨域-> nginx配置代理

2. 前端资源文件需要有统一前缀,否则读取不到统一前缀配nginx

如umi框架

3. 域名不一致的安全问题解决方案

    add_header Content-Security-Policy "frame-ancestors http://xxx:8100/auth";

4.鉴权方案

地址栏拼接token的方式打开系统 http://10.111.111.111:8111/ma?token=eyJ0eXAiOiJKV1QiLCJhb

2.调用对方接口返回一个地址

得到地址后看单独能否打开,如果单独能打开,但是嵌入后打不开,考虑iframe安全配置问题 x-frame-option 属性 X-Frame-Options 是一个 HTTP 响应头，设置 X-Frame-Options HTTP 响应头为 DENY 或 SAMEORIGIN，用于控制页面是否可以被嵌入到 <iframe>, <frame>, <embed>, 或 <object> 等元素中。这有助于防止点击劫持攻击。

DENY 或 SAMEORIGIN 分别是什么意思？

DENY:
- 当设置为 DENY 时，页面不能被嵌入到任何 <iframe>, <frame>, <embed>, 或 <object> 中，无论这些元素是在同一个网站上还是在其他网站上。
- 这意味着其他任何网站都不能将此页面嵌入到它们的页面中。
- 例如, 如果 example.com/page 设置了 X-Frame-Options: DENY, 那么无论是 example.com 还是 other-site.com, 都不能在其页面中嵌入 example.com/page。
SAMEORIGIN:
- 当设置为 SAMEORIGIN 时, 页面只能被同一源 (origin) 的页面嵌入。
- 这意味着只有与内容相同的协议、域名和端口的页面才能嵌入这个页面。其他所有的外部源都不能嵌入。
- 例如, 如果 example.com/page 设置了 X-Frame-Options: SAMEORIGIN, 那么只有 example.com 上的其他页面可以嵌入它。其他域名，如 other-site.com, 不能嵌入这个页面。

5. Nginx:

在 Nginx 配置文件的 server 或 location 区块中添加：

add_header X-Frame-Options "DENY";

或者：

add_header X-Frame-Options "SAMEORIGIN";

然后重启 Nginx。

  location /aaa/ {
            proxy_http_version 1.1;
            proxy_set_header Connection "";
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://11.232.11.1:8020/aaa/;
        }

6. 样式冲突问题

样式遮挡

<iframe 
    id='iframe' 
    ref="iframe" scrolling="yes" 
    frameBorder="0" 
    style={{ width: '100%', marginTop: '-56px',

另: 排查问题的方式

另:代码示例

代码示例

 state = {
    iFrameHeight: '0px',
    positionCode: xxx,
    url:''
  };
componentWillReceiveProps(nextProps: any) {
    this.setState({
      positionCode: xx,
      url: xx;
    });
     if(document.getElementById('iframe')){
        document.getElementById('iframe')?.contentWindow?.document.addEventListener('click', () => {
        document.getElementById('iframe')?.contentWindow?.parent.document.body.click()
      })
     }
  }
   renderIfram() {
    return (
        <iframe
            id='iframe'
            ref="iframe"
            scrolling="yes"
            frameBorder="0"
            style={{
              width: '100%',
              marginTop: '-56px',
              height: this.state.iFrameHeight,
              overflow: 'visible',
              float: 'right',
            }}
            onLoad={() => {
              // iframe高度不超过content的高度即可
              const h = document.documentElement.clientHeight - 20;
              this.setState({
                iFrameHeight: `${h}px`,
              });
            }}
            src={`/xxx`}
          />)
    }

iframe 实现页面嵌入功能问题汇总