整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
前言
在跨域請求不同服務(wù)方或是兼容先前系統(tǒng)的頁面時，你可能想利用AJAX從網(wǎng)頁上下載HTML并粘貼到div中，這將帶來不安全注入的問題。
此時，通過iframe頁面嵌入可以很好地解決上述問題。
本文帶您了解iframe內(nèi)聯(lián)框架，幫助您提高頁面集成效率和復(fù)用率，一次開發(fā)，多次使用。同時，解決在使用iframe跨域訪問時，第三方cookie暫存轉(zhuǎn)發(fā)問題。
iframe安全嵌入方案
iframe嵌入是一種快速的表示集成方法，具有以下三方面優(yōu)點：
1.iframe是一個全新的獨立的宿主環(huán)境，用于隔離或者訪問原始接口及對象，并能夠原封不動地將嵌入的網(wǎng)頁展現(xiàn)出來；
2.如果有多個網(wǎng)頁引用iframe，只需要修改iframe的內(nèi)容，就可以實現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改，方便快捷；
3.重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁。
例如，以vue工程為例，我們可以很輕松地嵌入iframe頁面，輕松實現(xiàn)頁面集成。
<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()
},
在嵌入第三方服務(wù)頁面時，需要處理統(tǒng)一身份認證和保持登錄狀態(tài)的問題，下圖所示為iframe安全注入方案示例。
iframe安全注入服務(wù)流程為，用戶在本方服務(wù)頁面進行登錄，本方服務(wù)向統(tǒng)一身份認證平臺驗證用戶服務(wù)權(quán)限并得到本方服務(wù)令牌。
當(dāng)用戶訪問嵌入第三方服務(wù)的iframe頁面時，本方服務(wù)向統(tǒng)一身份認證平臺驗證用戶服務(wù)權(quán)限并得到第三方服務(wù)令牌，通過URL傳送給第三方服務(wù)，第三方服務(wù)解析后向統(tǒng)一身份認證平臺驗證該用戶權(quán)限令牌信息，若用戶權(quán)限令牌信息正確則提供服務(wù)。
其中第三方服務(wù)對iframe 嵌入可以通過如下配置方式實現(xiàn)。
IE瀏覽器配置
為了控制iframe嵌入的權(quán)限，需要在Headers里面加入X-Frame-Options字段，其有三種值可以配置，具體如下表格所示。
Chrome、Edge瀏覽器配置
經(jīng)過測試發(fā)現(xiàn)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 等不同的中間件有不同的配置方法，再次不再贅述，讀者可以根據(jù)需要的場景進行不同配置。
瀏覽器訪問iframe問題
我們在訪問iframe 嵌入頁面的時候，從本系統(tǒng)前端調(diào)用系統(tǒng)后臺服務(wù)后，sendRedirect到第三方系統(tǒng)后臺服務(wù)，對X-Frame-Options頭進行了驗證后，正常應(yīng)該跳轉(zhuǎn)到請求頁面并對本系統(tǒng)瀏覽器進行內(nèi)容響應(yīng)。
實際使用過程中卻發(fā)生了奇怪的現(xiàn)象，第三方服務(wù)驗證X-Frame-Options跨站驗證后，302 跳轉(zhuǎn)到了請求頁面，又302 調(diào)用了登出接口，截止302 調(diào)用了登錄接口，最終為用戶響應(yīng)了登錄頁面，如下圖所示。
猜測一下，問題可能出在以下幾個方面：
1.第三方服務(wù)調(diào)用統(tǒng)一安全認證服務(wù)失敗，跳轉(zhuǎn)登錄頁面，但是并沒有安全認證失敗的響應(yīng)信息；
2.第三方服務(wù)沒有用戶信息，跳轉(zhuǎn)登錄頁面；
3.第三方請求跳轉(zhuǎn)頁面時，對用戶信息進行了基于瀏覽器信息的再次認證，失敗并跳轉(zhuǎn)登錄頁面。
經(jīng)過驗證更換其他瀏覽器后，頁面可以正常訪問，說明統(tǒng)一安全認證無問題，且用戶信息也驗證正常，因此問題應(yīng)該是第三種情況。
瀏覽器訪問iframe解決方案
經(jīng)過分析發(fā)現(xiàn)，Chrome內(nèi)核51版本開始，其對于Cookie的控制新增加了一個SameSite屬性，用來防止CSRF攻擊和用戶追蹤。
由第三方提供iframe嵌入頁面服務(wù)的Cookie在Chrome內(nèi)核被認為是第三方Cookie，瀏覽器默認會禁止第三方Cookie跨域傳送，這里就涉及到瀏覽器Cookie 的SameSite屬性。
SameSite 可以有下面三種值：
1.Strict僅允許一方請求攜帶 Cookie，即瀏覽器將只發(fā)送相同站點請求的 Cookie，即當(dāng)前網(wǎng)頁 URL 與請求目標(biāo) URL 完全一致；
2.Lax允許部分第三方請求攜帶 Cookie；
3.None無論是否跨站都會發(fā)送 Cookie。
通過下面表格，我們可以清晰看到，不同請求類型下，SameSit屬性對第三方Cookie 的響應(yīng)方式。
從上表可以看出，對大部分 web 應(yīng)用而言，Post 表單、iframe、AJAX這三種情況從以前的跨站會發(fā)送三方Cookie，變成了不發(fā)送。
故這三種情況跨站給第三方發(fā)送Cookie需要在設(shè)置的時候?qū)ameSite設(shè)置為None。
通過研究，我們發(fā)現(xiàn)可以通過配置Chrome 、Edge瀏覽器SameSite 屬性可以有效解決該問題。
低于91版本的Chrome瀏覽器
Chrome中訪問地址chrome://flags/ 搜索samesite 將same-site-by-default-cookies，和SameSite by default cookies這兩項設(shè)置為Disabled后重啟瀏覽器再運行項目即可解決。該設(shè)置默認情況下會將未指定SameSite屬性的請求看做SameSite=Lax來處理。
Chrome及Edge瀏覽器
打開瀏覽器快捷方式的屬性，在目標(biāo)后添加
--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure ，點擊應(yīng)用、確定按鈕，重啟瀏覽器后生效。
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe"
通過執(zhí)行腳本直接生成有效的快捷方式
chcp 65001
echo 正在創(chuàng)建桌面快捷方式，請勿關(guān)閉本窗口.
::設(shè)置程序或文件的完整路徑（必選）
set Program=%cd%\chrome.exe
::設(shè)置快捷方式名稱（必選）
set LnkName=SSSChrome
::設(shè)置程序的工作路徑，一般為程序主目錄，此項若留空，腳本將自行分析路徑
set WorkDir=%cd%
::設(shè)置快捷方式顯示的說明（可選）
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 桌面快捷方式創(chuàng)建成功！
makelnk.vbs
del /f /q makelnk.vbs
exit
goto :eof
:GetWorkDir
set WorkDir=%~dp1
set WorkDir=%WorkDir:~,-1%
goto :eof
從下圖我們可以看到，響應(yīng)請求，由原來的4個302 后跳轉(zhuǎn)到登錄頁面變?yōu)?個302 跳轉(zhuǎn)后正常進入功能頁面，解決了請求第三方iframe時不發(fā)送Cookie 造成第三方服務(wù)認證通過跳轉(zhuǎn)登錄頁面的問題。
總結(jié)
本文介紹了iframe內(nèi)聯(lián)框架，幫助您安全地嵌入iframe頁面并提高頁面集成效率和復(fù)用率，達到代碼的高復(fù)用和良好的用戶體驗。
請求第三方iframe時，能夠?qū)frame進行請求頭驗證及統(tǒng)一安全驗證，實現(xiàn)iframe頁面安全嵌入。針對瀏覽器訪問第三方iframe時存在的第三方Cookie 不能正常發(fā)送問題，提供了可行的解決方案，可以為頁面嵌入使用方面提供有效的借鑒。
1）關(guān)注+私信回復(fù)：“測試”，可以免費領(lǐng)取一份10G軟件測試工程師面試寶典文檔資料。以及相對應(yīng)的視頻學(xué)習(xí)教程免費分享！，其中包括了有基礎(chǔ)知識、Linux必備、Mysql數(shù)據(jù)庫、抓包工具、接口測試工具、測試進階-Python編程、Web自動化測試、APP自動化測試、接口自動化測試、測試高級持續(xù)集成、測試架構(gòu)開發(fā)測試框架、性能測試等。
2）關(guān)注+私信回復(fù)："入群" 就可以邀請你進入軟件測試群學(xué)習(xí)交流~~
多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計算結(jié)果。
首先創(chuàng)造一個基本的HTML大綱，包含表單控件；然后將控件進行合并（HTML表單必須包括一個提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個單獨的HTML頁面可以包含多個表單。
包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。
<HTML>
<HEAD>
<TITLE>標(biāo)題放在這</TITLE>
</HEAD>
<BODY>
表單頁面放在這
</BODY>
</HTML>在包含表單的HTML頁面中可以使用任何HTML標(biāo)簽。基本的表單使用FROM標(biāo)簽來說明。該標(biāo)簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數(shù)據(jù)，可以是絕對路徑或者相對路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>兩個常用的基本控件：文本框和提交按鈕。
文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準(zhǔn)確訪問其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：
<INPUT TYPE = "TEXT" NAME="text">提交按鈕：允許用戶將一個表單的內(nèi)容發(fā)送到服務(wù)器，一個HTML表單對應(yīng)應(yīng)該有一個提交按鈕。
示例：一個完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</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開始之前需要結(jié)束前一個FORM表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</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屬性用于設(shè)置文本框的可視大??；MAXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時會滾動。COLS屬性指明可見文本列數(shù)與行數(shù)類似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。
值 | 說明 |
off | 禁止單詞換行但用戶可以輸入換行符強制換行 |
virtual/soft | 各行顯示為換行，但是換行并沒有被發(fā)送到服務(wù)器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">創(chuàng)建密碼框的語法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">取兩個值中的一個，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認情況會被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認發(fā)送on值。法如下：
<input type="checkbox" name="" checked value="">語法與復(fù)選框?qū)傩院x相同，但是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=""><input type="FILE" name="name" accept="time" value="text">其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下：
超文本標(biāo)記語言文本 .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代表超文本標(biāo)記語言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁的標(biāo)記語言。HTML文件包含一組標(biāo)簽，這些標(biāo)簽用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標(biāo)記中的指示呈現(xiàn)網(wǎng)頁內(nèi)容。
HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。
每個HTML文檔都應(yīng)該遵循以下基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
<!-- 內(nèi)容在這里 -->
</body>
</html>
讓我們逐步解釋這個結(jié)構(gòu)：
HTML標(biāo)簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標(biāo)簽通常成對出現(xiàn)，有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽。例如：
<p>這是一個段落。</p>
<p>是開始標(biāo)簽，</p>是結(jié)束標(biāo)簽，文本位于兩個標(biāo)簽之間。標(biāo)簽定義了元素的類型和結(jié)構(gòu)。
有些HTML標(biāo)簽是自封閉的，不需要結(jié)束標(biāo)簽，例如<img>用于插入圖像。
在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用<!--開頭和-->結(jié)尾，如下所示：
<!-- 這是一個注釋 -->
注釋通常用于添加文檔說明、調(diào)試代碼或標(biāo)記未來的修改。
HTML中的文本通常包含在段落、標(biāo)題、列表等元素中。以下是一些常見的文本元素：
示例：
<p>這是一個段落。</p>
<h1>這是一個標(biāo)題</h1>
<p><strong>這是強調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網(wǎng)站</a></p>
要在網(wǎng)頁中插入圖像，可以使用<img>標(biāo)簽。它是一個自封閉標(biāo)簽，需要指定圖像的src屬性來指定圖像文件的路徑。
示例：
htmlCopy code
<img src="image.jpg" alt="圖像描述">
通過使用<a>標(biāo)簽，可以在網(wǎng)頁中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標(biāo)URL。
示例：
<a href="https://www.example.com">訪問示例網(wǎng)站</a>
HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。
無序列表使用<ul>標(biāo)簽定義，每個列表項使用<li>標(biāo)簽。
示例：
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
有序列表使用<ol>標(biāo)簽定義，每個列表項使用<li>標(biāo)簽。
示例：
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
定義列表使用<dl>標(biāo)簽定義，每個定義項目使用<dt>標(biāo)簽定義術(shù)語，使用<dd>標(biāo)簽定義描述。
示例：
<dl>
<dt>術(shù)語1</dt>
<dd>描述1</dd>
<dt>術(shù)語2</dt>
<dd>描述2</dd>
</dl>
HTML表單允許用戶與網(wǎng)頁進行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：
<form>元素用于創(chuàng)建表單，可以包含文本字段、復(fù)選框、單選按鈕、下拉列表等。
示例：
<form action="submit.php" method="post">
<!-- 表單元素在這里 -->
</form>
輸入字段用于接收用戶輸入的數(shù)據(jù)，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復(fù)選框等。
文本框使用<input>標(biāo)簽，type屬性設(shè)置為"text"。
示例：
<input type="text" name="username" placeholder="用戶名">
密碼框使用<input>標(biāo)簽，type屬性設(shè)置為"password"。
示例：
htmlCopy code
<input type="password" name="password" placeholder="密碼">
單選按鈕使用<input>標(biāo)簽，type屬性設(shè)置為"radio"。
示例：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
復(fù)選框使用<input>標(biāo)簽，type屬性設(shè)置為"checkbox"。
示例：
<input type="checkbox" name="subscribe" value="yes">訂閱新聞
下拉列表使用<select>和<option>標(biāo)簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項。
示例：
<select name="country">
<option value="us">美國</option>
<option value="ca">加拿大</option>
<option value="uk">英國</option>
</select>
HTML用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。
可以在HTML元素內(nèi)部使用style屬性來定義內(nèi)聯(lián)樣式。
示例：
<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>
外部樣式表將樣式規(guī)則保存在獨立的CSS文件中，并通過<link>標(biāo)簽將其鏈接到HTML文檔。
示例（style.css）：
/* style.css */
p {
color: blue;
font-size: 16px;
}
在HTML中鏈接外部樣式表：
<link rel="stylesheet" type="text/css" href="style.css">
這使得可以在整個網(wǎng)站上共享相同的樣式。
HTML是構(gòu)建現(xiàn)代網(wǎng)頁的基礎(chǔ)。通過學(xué)習(xí)HTML的基本語法和元素，你可以創(chuàng)建吸引人且功能強大的網(wǎng)頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現(xiàn)內(nèi)容和實現(xiàn)用戶交互。
這篇文章提供了HTML的基礎(chǔ)知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網(wǎng)頁。繼續(xù)學(xué)習(xí)和實踐，你將成為一個熟練的網(wǎng)頁開發(fā)者。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
