前言

　　在跨域請求不同服務方或是兼容先前系統的頁面時，你可能想利用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有所幫助，讓你能夠開始創建自己的網頁。繼續學習和實踐，你將成為一個熟練的網頁開發者。