iframe 用法 iframe传递参数

当跨域请求不同的服务提供商或者兼容以前系统的页面时,可能要用AJAX从网页下载HTML粘贴到div中,这样会带来不安全注入的问题。

此时,通过iframe页面嵌入可以很好地解决上述问题。

本文带你了解iframe内联框架,它可以帮助你提高页面集成的效率和复用率,一次开发,多次使用。同时解决了使用iframe进行跨域访问时第三方cookie的临时存储和转发问题。

iframe 用法 iframe传递参数

Iframe安全嵌入方案

Iframe嵌入是一种快速的表示集成方法,具有以下三个优点:

1.iframe是一个全新的独立宿主环境,用来隔离或访问原有的接口和对象,可以原封不动的显示嵌入的网页;

2.如果有多个引用iframe的网页,只需要修改iframe的内容,就可以改变每个被调用页面的内容,方便快捷;

3.当重载一个页面时,不需要重载整个页面,只需要重载页面中的一个框架页面。

比如以vue项目为例,我们可以轻松嵌入iframe页面,轻松实现页面集成。

& lt模板& gt

& ltdiv style = & # 34填充顶部:10px高度:自动& # 34;& gt

& ltiframe id = & # 39大型机& # 39;name = & # 39大型机& # 39;ref = & # 39大型机& # 39;:src = & # 34iframeUrl & # 34target = & # 34_ blank & # 34高度= & # 39;1000像素& # 39;frameborder = & # 340"宽度= & # 34;100%"& gt& lt/iframe & gt;

& lt/div & gt;

& lt/template & gt;

& lt脚本& gt

导出默认值{

姓名:& # 39;MyTestResource & # 39,

data() {

返回{

iframe URL:& # 34;",

}

},

已创建(){

this.iframeUrl = http://40。+ "xxx-ev/ev/xxx/RedirectITA?toUrl = zycx & resource code = BBB & token = & # 34;+ getLocalStorageToken()

},

在嵌入第三方服务页面时,需要处理统一认证和维护登录状态的问题。下图显示了iframe安全注入方案的一个示例。

iframe安全注入服务流程是用户登录我们的服务页面,我们的服务向统一身份认证平台验证用户的服务权限,获取我们的服务令牌。

当用户访问嵌入在第三方服务中的iframe页面时,我们的服务向统一认证平台验证用户的服务权限,获得第三方服务令牌,通过URL传递给第三方服务。第三方服务解析后向统一认证平台验证用户的权限令牌信息,如果用户的权限令牌信息正确,则提供服务。

第三方服务嵌入iframe可以通过以下配置方法实现。

IE浏览器配置

为了控制iframe嵌入的权限,需要在头中添加X-Frame-Options字段,该字段有三个值可以配置,如下表所示。

Chrome和Edge浏览器配置

经过测试,发现X-Frame-Options对Chrome和Edge浏览器不起作用,需要配置content-security-policy:Frame-ancestors来安全控制iframe页面嵌入。

X-Frame-Options和Content-Security-Policy可以同时配置多个白名单,如下所示:

内容-安全-策略:

帧-祖先http://aaa.com http://bbb.com http://ccc.com

x框架选项:

允许-从http://aaa.com、http://bbb.com、http://ccc.com

Nginx、apache、IIS、tomcat等不同的中间件有不同的配置方法。,就不再赘述了,读者可以根据需要的场景进行不同的配置。

浏览器访问iframe问题

当我们访问iframe嵌入式页面时,从本系统前端调用系统后台服务后,sendRedirect转到第三方系统后台服务,验证X-Frame-Options头后,应该正常跳转到请求页面,响应本系统浏览器的内容。

然而在实际使用过程中出现了一个奇怪的现象。第三方服务验证X-Frame-Options跨站验证后,302跳转到请求页面,302调用注销界面,302调用登录界面,最终为用户响应登录页面,如下图所示。

猜测,问题可能出在以下几个方面:

1.第三方服务调用统一安全认证服务失败,跳转到登录页面,但没有安全认证失败的响应消息;

2.第三方服务没有用户信息,跳转到登录页面;

3.当第三方请求跳转页面时,基于浏览器信息再次认证用户信息,失败后跳转到登录页面。

经过其他浏览器验证替换后,可以正常访问页面,说明统一安全认证没有问题,用户信息验证正常,所以问题应该是第三种情况。

浏览器访问iframe解决方案

经过分析发现,从51版本的Chrome内核开始,增加了一个SameSite属性来控制Cookie,防止CSRF攻击和用户追踪。

第三方提供的内嵌iframe页面服务的cookie在Chrome内核中被认为是第三方cookie,浏览器会默认禁止第三方cookie跨域传输,这就涉及到浏览器cookie的SameSite属性。

SameSite可以有以下三个值:

1.Strict只允许一方请求cookie,即浏览器只会发送同一站点请求的cookie,即当前网页URL与请求的目标URL完全相同;

2.Lax允许一些第三方请求Cookie;

3.无论是否跨站点,都不会发送Cookie。

通过下表,我们可以清楚地看到在不同的请求类型下,SameSit属性是如何响应第三方Cookie的。

从上表可以看出,对于大多数web应用来说,Post form、iframe、AJAX已经从跨站点发送三方Cookie变成了不发送。

因此,在这三种情况下向第三方发送Cookie时,有必要将SameSite设置为None。

我们通过研究发现,通过配置Chrome和Edge浏览器的SameSite属性,可以有效解决这个问题。

91之前的Chrome浏览器

Chrome chrome中的访问地址://flags/ Search samesite将same-site-by-default-cookies和same site by-default cookies设置为Disabled,然后重启浏览器并运行项目。默认情况下,该设置将未指定SameSite属性的请求视为SameSite=Lax。

Chrome和Edge浏览器

打开浏览器快捷方式的属性,并将其添加到目标之后。

-disable-features = samesitebydefaultcookies,cookieswitoussamesitemustbesecure,点击应用和确定,重启浏览器后生效。

"c:\ Program Files(x86)\ Microsoft \ Edge \ Application \ m sedge . exe & # 34;

通过执行脚本直接生成有效的快捷方式。

chcp 65001

Echo正在创建桌面快捷方式,请不要关闭此窗口。

*设置程序或文件的完整路径(必需)

set Program=%cd%\chrome.exe

*设置快捷方式名称(必填)

set LnkName = SSSChrome

*设置程序的工作路径,通常是程序主目录。如果此项是left 空,脚本会自己分析路径。

设置工作目录=%cd%

*设置快捷显示的描述(可选)

设置desc = ssch Rome

如果没有定义WorkDir调用:GetWorkDir & # 34% Program % & # 34

(echo Set wsh shell = CreateObject(& # 34;WScript。壳牌& # 34;)

echo strDesKtop=WshShell。特殊文件夹(& # 34;桌面& # 34;)

echo Set oShellLink=WshShell。createshortcut(strdesktop^&"\%LnkName%。lnk & # 34)

艾可·奥谢尔林克。TargetPath = & # 34% Program % & # 34

艾可·奥谢尔林克。参数= & # 34;-disable-features = SameSiteByDefaultCookies,cookies withoutsameitemustbesecure & # 34;

艾可·奥谢尔林克。WorkingDirectory = & # 34% WorkDir % & # 34

艾可·奥谢尔林克。WindowStyle=1

艾可·奥谢尔林克。描述= & # 34;% desc % & # 34;

艾可·奥谢尔林克。保存)>makelnk.vbs

Echo桌面快捷方式创建成功!

makelnk.vbs

del /f /q makelnk.vbs

出口

转到:eof

:GetWorkDir

设置工作目录=%~dp1

设置工作目录= %工作目录:~,-1%

转到:eof

从下图可以看出,响应请求,将原来的4次302跳转到登录页面改为2次302跳转正常进入功能页面,解决了第三方服务认证在请求第三方iframe时跳转到登录页面不发送Cookie的问题。

摘要

本文介绍了iframe内联框架,帮助您安全嵌入iframe页面,提高页面集成效率和重用率,实现高代码重用和良好的用户体验。

在请求第三方iframe时,可以对iframe进行请求头验证和统一安全验证,实现iframe页面的安全嵌入。针对浏览器访问第三方iframe时无法正常发送第三方Cookie的问题,提出了一种可行的解决方案,为页面嵌入提供了有效的参考。

最后:

1)关注+私信回复:“测试”,即可免费获得10G软件测试工程师面试书一本。并且相应的视频学习教程免费分享!,包括基础知识、Linux essentials、Mysql数据库、抓包工具、接口测试工具、高级测试——Python编程、Web自动化测试、APP自动化测试、接口自动化测试、高级持续集成测试、测试框架开发测试、性能测试等。

2)关注+私信回复:& # 34;加入这个团体& # 34;我可以邀请你进入软件测试群学习交流~ ~

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论