前言

　　在跨域请求不同服务方或是兼容先前系统的页面时，你可能想利用AJAX从网页上下载HTML并粘贴到div中，这将带来不安全注入的问题。

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

本文带您了解iframe内联框架，帮助您提高页面集成效率和复用率，一次开发，多次使用。同时，解决在使用iframe跨域访问时，第三方cookie暂存转发问题。

　　iframe安全嵌入方案

　　iframe嵌入是一种快速的表示集成方法，具有以下三方面优点：

　　1.iframe是一个全新的独立的宿主环境，用于隔离或者访问原始接口及对象，并能够原封不动地将嵌入的网页展现出来；

　　2.如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

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

　　例如，以vue工程为例，我们可以很轻松地嵌入iframe页面，轻松实现页面集成。

<template>

<div style="padding-top:10px;height:auto">

<iframe id='mainFrame' name='mainFrame' ref='mainFrame' :src="iframeUrl" target="_blank" height='1000px' frameborder="0" width="100%" ></iframe>

</div>

</template>

<script>

export default {

name: 'MyTestResource',

data() {

return{

iframeUrl: "",

}

},

created(){

this.iframeUrl = http://40. + "xxx-ev/ev/xxx/RedirectITA?toUrl=zycx&resouceCode=BBB&token=" + getLocalStorageToken()

},

　　在嵌入第三方服务页面时，需要处理统一身份认证和保持登录状态的问题，下图所示为iframe安全注入方案示例。

　　iframe安全注入服务流程为，用户在本方服务页面进行登录，本方服务向统一身份认证平台验证用户服务权限并得到本方服务令牌。

　　当用户访问嵌入第三方服务的iframe页面时，本方服务向统一身份认证平台验证用户服务权限并得到第三方服务令牌，通过URL传送给第三方服务，第三方服务解析后向统一身份认证平台验证该用户权限令牌信息，若用户权限令牌信息正确则提供服务。

　　其中第三方服务对iframe 嵌入可以通过如下配置方式实现。

　　IE浏览器配置

　　为了控制iframe嵌入的权限，需要在Headers里面加入X-Frame-Options字段，其有三种值可以配置，具体如下表格所示。

　　Chrome、Edge浏览器配置

　　经过测试发现X-Frame-Options 对Chrome及Edge浏览器不起作用，需要配置Content-Security-Policy: frame-ancestors 对iframe 页面嵌入进行安全控制。

　　X-Frame-Options及 Content-Security-Policy 可以同时配置多个白名单，具体如下：

　　Content-Security-Policy:

　　frame-ancestors http://aaa.com http://bbb.com http://ccc.com

　　X-Frame-Options:

　　ALLOW-FROM 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解决方案

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

　　由第三方提供iframe嵌入页面服务的Cookie在Chrome内核被认为是第三方Cookie，浏览器默认会禁止第三方Cookie跨域传送，这里就涉及到浏览器Cookie 的SameSite属性。

　　SameSite 可以有下面三种值：

　　1.Strict仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致；

　　2.Lax允许部分第三方请求携带 Cookie；

　　3.None无论是否跨站都会发送 Cookie。

　　通过下面表格，我们可以清晰看到，不同请求类型下，SameSit属性对第三方Cookie 的响应方式。

　　从上表可以看出，对大部分 web 应用而言，Post 表单、iframe、AJAX这三种情况从以前的跨站会发送三方Cookie，变成了不发送。

　　故这三种情况跨站给第三方发送Cookie需要在设置的时候将SameSite设置为None。

　　通过研究，我们发现可以通过配置Chrome 、Edge浏览器SameSite 属性可以有效解决该问题。

　　低于91版本的Chrome浏览器

　　Chrome中访问地址chrome://flags/ 搜索samesite 将same-site-by-default-cookies，和SameSite by default cookies这两项设置为Disabled后重启浏览器再运行项目即可解决。该设置默认情况下会将未指定SameSite属性的请求看做SameSite=Lax来处理。

　　Chrome及Edge浏览器

　　打开浏览器快捷方式的属性，在目标后添加

　　--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure ，点击应用、确定按钮，重启浏览器后生效。

　　"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"

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

chcp 65001

echo 正在创建桌面快捷方式，请勿关闭本窗口.

::设置程序或文件的完整路径（必选）

set Program=%cd%\chrome.exe

::设置快捷方式名称（必选）

set LnkName=SSSChrome

::设置程序的工作路径，一般为程序主目录，此项若留空，脚本将自行分析路径

set WorkDir=%cd%

::设置快捷方式显示的说明（可选）

set Desc=SSSChrome

if not defined WorkDir call:GetWorkDir "%Program%"

(echo Set WshShell=CreateObject("WScript.Shell"^)

echo strDesKtop=WshShell.SpecialFolders("DesKtop"^)

echo Set oShellLink=WshShell.CreateShortcut(strDesKtop^&"\%LnkName%.lnk"^)

echo oShellLink.TargetPath="%Program%"

echo oShellLink.Arguments="--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure"

echo oShellLink.WorkingDirectory="%WorkDir%"

echo oShellLink.WindowStyle=1

echo oShellLink.Description="%Desc%"

echo oShellLink.Save)>makelnk.vbs

echo 桌面快捷方式创建成功！

makelnk.vbs

del /f /q makelnk.vbs

exit

goto :eof

:GetWorkDir

set WorkDir=%~dp1

set WorkDir=%WorkDir:~,-1%

goto :eof

　　从下图我们可以看到，响应请求，由原来的4个302 后跳转到登录页面变为2个302 跳转后正常进入功能页面，解决了请求第三方iframe时不发送Cookie 造成第三方服务认证通过跳转登录页面的问题。

　　总结

　　本文介绍了iframe内联框架，帮助您安全地嵌入iframe页面并提高页面集成效率和复用率，达到代码的高复用和良好的用户体验。

　　请求第三方iframe时，能够对iframe进行请求头验证及统一安全验证，实现iframe页面安全嵌入。针对浏览器访问第三方iframe时存在的第三方Cookie 不能正常发送问题，提供了可行的解决方案，可以为页面嵌入使用方面提供有效的借鉴。

最后：

1）关注+私信回复：“测试”，可以免费领取一份10G软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享！，其中包括了有基础知识、Linux必备、Mysql数据库、抓包工具、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试等。

2）关注+私信回复："入群" 就可以邀请你进入软件测试群学习交流~~

多数PHP程序都使用HTML表单从用户那里获取数据并计算结果。

HTML表单的一些基本原则

• 选择适合于收集的数据类型和提供交互方式的控件。
• 清楚标记每一个控件，这样用户就可以理解其功能。
• 尽可能将标签对齐。将控件的左边缘对齐。
• 将相关的标签分组，并且通过设计中使用空白将每一个分组分开。
• 表单上的控件顺序应该类似于用户操作他们的顺序。

创建基本HTML表单

首先创造一个基本的HTML大纲，包含表单控件；然后将控件进行合并（HTML表单必须包括一个提交按钮，用户单击它可以将表单数据发送到服务器。）一个单独的HTML页面可以包含多个表单。

• 创建HTML结构

包含表单的HTML结构和和普通的HTML结构一样。

<HTML>
  <HEAD>
  <TITLE>标题放在这</TITLE>
  </HEAD>
<BODY>
  表单页面放在这
  </BODY>
  </HTML>

在包含表单的HTML页面中可以使用任何HTML标签。基本的表单使用FROM标签来说明。该标签中METHOD属性接收GET或POST两个值中的一个。ACTION属性子明PHP脚本的url，该脚本可以收集通过表单收集的数据，可以是绝对路径或者相对路径。

<FORM METHOD="method" ACTION="url"> 
  中间可以放置表单控件
  </FORM>

• 合并控件

两个常用的基本控件：文本框和提交按钮。

文本框：允许用户键入信息以发送给PHP脚本。NAME属性为文本提供名称，PHP脚本可以通过名称准确访问其内容，因此它应该是唯一的且符合PHP变量命名规则（但不需要$符号），单标签。VALUE属性指明出现在提交按钮上面的标题。创建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按钮：允许用户将一个表单的内容发送到服务器，一个HTML表单对应应该有一个提交按钮。

示例：一个完整的HTML表单。

<HTML>
  <HEAD>
  <TITLE>标题</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>

• 使用多个表单

可以在一个HTML页面中包含多个表单，注意下一个表单的FORM开始之前需要结束前一个FORM表单。

<HTML>
  <HEAD>
  <TITLE>标题</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>

创建表单控件

• 创建自定义的文本框

文本框的属性中，TYPE和NAME是必须的，其余是可选属性。SIZE属性用于设置文本框的可视大小；MAXLENGTH指明用户键入字符的最大长度；VALUE给出了一个最初显示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">

• 创建文本区域

文本区域可以输入多行文本。NAME和ROWS属性是必须的。ROWS属性表明了文本区域内可以看到的文本行数，充满时会滚动。COLS属性指明可见文本列数与行数类似。WRAP属性指明文本区域内单词换行的方式，可以指定如下值。该标签为双标签。

<inputarea name="" rows="" cols="" wrap="">

• 创建密码框

创建密码框的语法与文本框相同，但要将TYPE属性指定为PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">

• 创建复选框

取两个值中的一个，即二选一。TYPE属性是必须的，checked属性出现，该复选框默认情况会被选定。value属性指定复选框被选定情况下被发送到服务器的值，默认发送on值。法如下：

<input type="checkbox" name="" checked value="">

• 创建单选按钮

语法与复选框属性含义相同，但是TYPE属性的值必须是RADIO，NAME属性是必须的。

<input type="radio" name="" checked value="">

• 创建列表框

用户可以选择一个或者多个选项，它是一个滚动菜单。

<select name="" multipile size="">options go here</select>

name属性是必须的，multipile属性指明用户可以通过按下crtl键并单击多个选项来选择它们

列表框的单选行为可作为单选按钮。

<option selected value="text"></options>

• 创建隐藏域

<input type="hidden" name="text"value="">

• 实现上传文件的HTML表单

<input type="FILE" name="name" accept="time" value="text">

其中type属性是必须的。格式通过使用MIME码指定。常用的格式如下：

超文本标记语言文本 .html,.html text/html

　　普通文本 ：txt text/plain

　　word文档：application/msword

　　RTF文本 ：rtf application/rtf

　　GIF图形 ：gif image/gif

　　JPEG图形 ：jpeg,

　　jpg： image/jpeg

　　au声音文件：au audio/basic

　　MIDI音乐文件 ：mid,.midi audio/midi,audio/x-midi

　　RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　压缩文件.rar application/octet-stream

　　压缩文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

更多提交表单的信息

• 使用图像提交数据

<input type="image" src="url" name="text" align="align">

• 创建重置按钮

<input type="reset" value="text">

一部分：HTML简介

什么是HTML？

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构：

• <!DOCTYPE html>：这是文档类型声明，它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
• <html>：HTML文档的根元素。所有其他元素都包含在<html>标签内。
• <head>：包含与文档相关的元信息，如页面标题、字符集声明和外部样式表链接。
• <title>：定义网页的标题，显示在浏览器标签页上。
• <body>：包含网页的主要内容，如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：

<p>这是一个段落。</p>

<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。

HTML注释

在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾，如下所示：

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：

• <p>：定义一个段落。
• <h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
• <strong>：定义强调文本，通常以粗体显示。
• <em>：定义强调文本，通常以斜体显示。
• <a>：定义超链接，允许用户点击跳转到其他页面。

示例：

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。

示例：

htmlCopy code
<img src="image.jpg" alt="图像描述">

• src：指定图像文件的路径。
• alt：提供图像的替代文本，用于无法加载图像时的文字描述。

链接

通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。

示例：

<a href="https://www.example.com">访问示例网站</a>

• href：指定链接的目标URL。

列表

HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

无序列表

无序列表使用<ul>标签定义，每个列表项使用<li>标签。

示例：

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义，每个列表项使用<li>标签。

示例：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。

示例：

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表单

HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：

<form>元素

<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>

• action：指定表单数据提交的目标URL。
• method：指定提交方法，通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签，type属性设置为"text"。

示例：

<input type="text" name="username" placeholder="用户名">

• type：指定字段类型。
• name：指定字段的名称。
• placeholder：设置文本框的占位符文本。

密码框

密码框使用<input>标签，type属性设置为"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签，type属性设置为"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

• name：指定单选按钮组的名称。
• value：指定每个选项的值。

复选框

复选框使用<input>标签，type属性设置为"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。

示例：

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>

• name：指定下拉列表的名称。
• 每个<option>标签表示一个选项，使用value属性定义选项的值。

第四部分：HTML样式和CSS

HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例：

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表：

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。