背景:最近工作上遇到个两个不同产品间嵌入的问题。A产品(www.aaa.com)需要使用B产品(www.bbb.coom)的某个功能。于是在A产品中通过iframe嵌入B产品的页面。
一、X-Frame-Options
通过iframe嵌入页面后,首先碰到的问题是如下报错,原因是B产品因为安全性的考虑设置了X-Frame-Options,禁止其他页面通过iframe引入。
解决办法就是设置B产品允许被A产品引用。X-Frame-Options响应头的属性有如下三种:
1、DENY:不能被嵌入到任何iframe。
2、SAMEORIGIN:页面只能被本站页面嵌入。
3、ALLOW-FROM uri:只能被嵌入到指定域名的框架中。
二、单点登录(Single Sign On)
可以正常请求到B产品的页面后,由于没有登录会自动跳到B产品的登陆页面去,需要登陆B产品才能继续使用(这里也是可能无法登陆的),这对于A产品用户肯定是不能接受的,于是我们需要配置上单点登录。单点登录的概念和如何配置就不展开说明了,这里大概说下在当前场景下的登录流程。
1、用户访问产品A并成功登录,访问包含引用B产品的页面。
2、B产品没有登录,前端会跳转B的登陆校验地址,由于已经配置了单点登录,后端会重定向到A产品的登录页面。
3、由于A产