---
order: 1
---
# 将SuccBI页面嵌入到第三方系统

页面嵌入的方式有很多种，最简单有效的是用iframe来嵌入。在第三方系统的页面中配置一个HTML的iframe元素，并配置src属性为如下url以实现页面嵌入：

```html
<iframe src="{第三方系统部署地址}/sso?redirectUrl=https://example.com/examples/ana/example1.dash"></iframe>
```

:::tip

- 若是需要在不同域名下嵌入SuccBI，需要完成[跨域](#cors)相关配置。
- 若需要让用户免登录访问SuccBI，需要配置[单点登录](#sso)。

:::

## 单点登录 {#sso}

- **如果第三方系统没有提供单点登录方案**，SuccBI内置下面两种方案来供第三方系统进行扩展开发配置：

  1. [证书授信应用开发](./dev-ca-token.md#server)
  2. [IP授信应用开发](./dev-ip-token.md#embed)

- **如果第三方系统提供了单点登录方案**，SuccBI还提供了多种单点登录机制的快速配置（包括OAuth2协议、数字证书令牌等），还可以通过扩展开发提供个性化的单点登录机制，请参照[单点登录](../../devops/sso/README.md)。

## 跨域问题{#cors}

### iframe中跨域嵌入SuccBI页面{#cors-iframe}

1. 若是访问第三方系统使用的是`https`协议，需要保证访问SuccBI也是用`https`协议。
2. 将SuccBI**系统设置**>**安全设置**>**安全等保**>[禁止被嵌入外站Iframe](../../devops/sys-settings/security/securityconf.md/#prohibit-embedded-iframe)取消勾选
   ![系统设置](./images/cors-iframe-settings.png)
   实现原理是针对请求设置响应头：[X-Frame-Options](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options)
3. 若是Chrome80以上版本浏览器中使用，还需要针对SuccBI部署环境处理[samesite问题](./faq/cookie-samesite.md)。

### 第三方系统ajax跨域访问SuccBI{#cors-requests}

大型业务场景往往由多个系统组成，由于业务需求第三方系统页面有时候需要使用`ajax请求`跨域请求SuccBI所存储数据。跨域要点如下：

1. 若是需要带上cookie，需要针对`XMLHttpRequest`设置`withCredentials=true`。
2. 需要在SuccBI系统设置中设置允许跨域，并将访问第三方系统的域名设置为信任域名：
   **系统设置**>**安全设置**>**安全等保**> [启用跨域](../../devops/sys-settings/security/securityconf.md/#cross-domain):
   ![系统设置](./images/cors-request-settings.png)
3. 若是Chrome80以上版本浏览器中使用，还需要针对SuccBI部署环境处理[samesite问题](./faq/cookie-samesite.md)。