零基礎(chǔ)學(xué)習(xí)HTML之html框架內(nèi)嵌框架和head頭信息設(shè)置

TML 框架

框架的作用就是把瀏覽器窗口劃分成多個(gè)子窗口。

每個(gè)子窗口可以載入各自的HTML文檔。

框架(frameset)與頁(yè)面主體body是同級(jí)的關(guān)系

1.框架的整體結(jié)構(gòu)

屬性屬性值說(shuō)明

rowspx , %上下分割窗口

colspx , % 左右分割窗口

srcurl指定要載入到框架的頁(yè)面地址

name指定框架名稱

例 1：上中下分割框架

</frameset>

例 2：左右分割框架

</frameset>

例 3：

</frameset>

2.設(shè)置框架的顯示方式

屬性屬性值說(shuō)明

scrolling yes、no、auto是否顯示滾動(dòng)條

noresize 禁止改變框架的尺寸大小

marginwidthpx框架內(nèi)左右的空白區(qū)域

marginheightpx框架內(nèi)上下的空白區(qū)域

frameborder1, 0是否顯示邊框

framespacing0框架與框架之間的空白

border0 邊框

3. <iframe> 內(nèi)嵌框架

屬性屬性值說(shuō)明

widthpx , %指定框架的寬度

heightpx , % 指定框架的高度

scrollingyes,no,auto是否顯示滾動(dòng)條

frameborder1, 0是否顯示邊框

head 頭信息

1.設(shè)置頁(yè)面標(biāo)題

2. 設(shè)置頁(yè)面編碼

utf-8 多國(guó)語(yǔ)言編碼

gb2312 中文簡(jiǎn)體編碼

3. 設(shè)置頁(yè)面關(guān)鍵字，內(nèi)容介紹

前言

　　在跨域請(qǐng)求不同服務(wù)方或是兼容先前系統(tǒng)的頁(yè)面時(shí)，你可能想利用AJAX從網(wǎng)頁(yè)上下載HTML并粘貼到div中，這將帶來(lái)不安全注入的問(wèn)題。

　　此時(shí)，通過(guò)iframe頁(yè)面嵌入可以很好地解決上述問(wèn)題。

本文帶您了解iframe內(nèi)聯(lián)框架，幫助您提高頁(yè)面集成效率和復(fù)用率，一次開(kāi)發(fā)，多次使用。同時(shí)，解決在使用iframe跨域訪問(wèn)時(shí)，第三方cookie暫存轉(zhuǎn)發(fā)問(wèn)題。

　　iframe安全嵌入方案

　　iframe嵌入是一種快速的表示集成方法，具有以下三方面優(yōu)點(diǎn)：

　　1.iframe是一個(gè)全新的獨(dú)立的宿主環(huán)境，用于隔離或者訪問(wèn)原始接口及對(duì)象，并能夠原封不動(dòng)地將嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)；

　　2.如果有多個(gè)網(wǎng)頁(yè)引用iframe，只需要修改iframe的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁(yè)面內(nèi)容的更改，方便快捷；

　　3.重載頁(yè)面時(shí)不需要重載整個(gè)頁(yè)面，只需要重載頁(yè)面中的一個(gè)框架頁(yè)。

　　例如，以vue工程為例，我們可以很輕松地嵌入iframe頁(yè)面，輕松實(shí)現(xiàn)頁(yè)面集成。

</div>

</template>

export default {

name: 'MyTestResource',

data() {

return{

iframeUrl: "",

}

created(){

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

　　在嵌入第三方服務(wù)頁(yè)面時(shí)，需要處理統(tǒng)一身份認(rèn)證和保持登錄狀態(tài)的問(wèn)題，下圖所示為iframe安全注入方案示例。

　　iframe安全注入服務(wù)流程為，用戶在本方服務(wù)頁(yè)面進(jìn)行登錄，本方服務(wù)向統(tǒng)一身份認(rèn)證平臺(tái)驗(yàn)證用戶服務(wù)權(quán)限并得到本方服務(wù)令牌。

　　當(dāng)用戶訪問(wèn)嵌入第三方服務(wù)的iframe頁(yè)面時(shí)，本方服務(wù)向統(tǒng)一身份認(rèn)證平臺(tái)驗(yàn)證用戶服務(wù)權(quán)限并得到第三方服務(wù)令牌，通過(guò)URL傳送給第三方服務(wù)，第三方服務(wù)解析后向統(tǒng)一身份認(rèn)證平臺(tái)驗(yàn)證該用戶權(quán)限令牌信息，若用戶權(quán)限令牌信息正確則提供服務(wù)。

　　其中第三方服務(wù)對(duì)iframe 嵌入可以通過(guò)如下配置方式實(shí)現(xiàn)。

　　IE瀏覽器配置

　　為了控制iframe嵌入的權(quán)限，需要在Headers里面加入X-Frame-Options字段，其有三種值可以配置，具體如下表格所示。

　　Chrome、Edge瀏覽器配置

　　經(jīng)過(guò)測(cè)試發(fā)現(xiàn)X-Frame-Options 對(duì)Chrome及Edge瀏覽器不起作用，需要配置Content-Security-Policy: frame-ancestors 對(duì)iframe 頁(yè)面嵌入進(jìn)行安全控制。

　　X-Frame-Options及 Content-Security-Policy 可以同時(shí)配置多個(gè)白名單，具體如下：

　　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

　　對(duì)于Nginx、apache 、IIS、tomcat 等不同的中間件有不同的配置方法，再次不再贅述，讀者可以根據(jù)需要的場(chǎng)景進(jìn)行不同配置。

　　瀏覽器訪問(wèn)iframe問(wèn)題

　　我們?cè)谠L問(wèn)iframe 嵌入頁(yè)面的時(shí)候，從本系統(tǒng)前端調(diào)用系統(tǒng)后臺(tái)服務(wù)后，sendRedirect到第三方系統(tǒng)后臺(tái)服務(wù)，對(duì)X-Frame-Options頭進(jìn)行了驗(yàn)證后，正常應(yīng)該跳轉(zhuǎn)到請(qǐng)求頁(yè)面并對(duì)本系統(tǒng)瀏覽器進(jìn)行內(nèi)容響應(yīng)。

　　實(shí)際使用過(guò)程中卻發(fā)生了奇怪的現(xiàn)象，第三方服務(wù)驗(yàn)證X-Frame-Options跨站驗(yàn)證后，302 跳轉(zhuǎn)到了請(qǐng)求頁(yè)面，又302 調(diào)用了登出接口，截止302 調(diào)用了登錄接口，最終為用戶響應(yīng)了登錄頁(yè)面，如下圖所示。

　　猜測(cè)一下，問(wèn)題可能出在以下幾個(gè)方面：

　　1.第三方服務(wù)調(diào)用統(tǒng)一安全認(rèn)證服務(wù)失敗，跳轉(zhuǎn)登錄頁(yè)面，但是并沒(méi)有安全認(rèn)證失敗的響應(yīng)信息；

　　2.第三方服務(wù)沒(méi)有用戶信息，跳轉(zhuǎn)登錄頁(yè)面；

　　3.第三方請(qǐng)求跳轉(zhuǎn)頁(yè)面時(shí)，對(duì)用戶信息進(jìn)行了基于瀏覽器信息的再次認(rèn)證，失敗并跳轉(zhuǎn)登錄頁(yè)面。

　　經(jīng)過(guò)驗(yàn)證更換其他瀏覽器后，頁(yè)面可以正常訪問(wèn)，說(shuō)明統(tǒng)一安全認(rèn)證無(wú)問(wèn)題，且用戶信息也驗(yàn)證正常，因此問(wèn)題應(yīng)該是第三種情況。

　　瀏覽器訪問(wèn)iframe解決方案

　　經(jīng)過(guò)分析發(fā)現(xiàn)，Chrome內(nèi)核51版本開(kāi)始，其對(duì)于Cookie的控制新增加了一個(gè)SameSite屬性，用來(lái)防止CSRF攻擊和用戶追蹤。

　　由第三方提供iframe嵌入頁(yè)面服務(wù)的Cookie在Chrome內(nèi)核被認(rèn)為是第三方Cookie，瀏覽器默認(rèn)會(huì)禁止第三方Cookie跨域傳送，這里就涉及到瀏覽器Cookie 的SameSite屬性。

　　SameSite 可以有下面三種值：

　　1.Strict僅允許一方請(qǐng)求攜帶 Cookie，即瀏覽器將只發(fā)送相同站點(diǎn)請(qǐng)求的 Cookie，即當(dāng)前網(wǎng)頁(yè) URL 與請(qǐng)求目標(biāo) URL 完全一致；

　　2.Lax允許部分第三方請(qǐng)求攜帶 Cookie；

　　3.None無(wú)論是否跨站都會(huì)發(fā)送 Cookie。

　　通過(guò)下面表格，我們可以清晰看到，不同請(qǐng)求類型下，SameSit屬性對(duì)第三方Cookie 的響應(yīng)方式。

　　從上表可以看出，對(duì)大部分 web 應(yīng)用而言，Post 表單、iframe、AJAX這三種情況從以前的跨站會(huì)發(fā)送三方Cookie，變成了不發(fā)送。

　　故這三種情況跨站給第三方發(fā)送Cookie需要在設(shè)置的時(shí)候?qū)ameSite設(shè)置為None。

　　通過(guò)研究，我們發(fā)現(xiàn)可以通過(guò)配置Chrome 、Edge瀏覽器SameSite 屬性可以有效解決該問(wèn)題。

　　低于91版本的Chrome瀏覽器

　　Chrome中訪問(wèn)地址chrome://flags/ 搜索samesite 將same-site-by-default-cookies，和SameSite by default cookies這兩項(xiàng)設(shè)置為Disabled后重啟瀏覽器再運(yùn)行項(xiàng)目即可解決。該設(shè)置默認(rèn)情況下會(huì)將未指定SameSite屬性的請(qǐng)求看做SameSite=Lax來(lái)處理。

　　Chrome及Edge瀏覽器

　　打開(kāi)瀏覽器快捷方式的屬性，在目標(biāo)后添加

　　--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure ，點(diǎn)擊應(yīng)用、確定按鈕，重啟瀏覽器后生效。

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

　　通過(guò)執(zhí)行腳本直接生成有效的快捷方式

chcp 65001

echo 正在創(chuàng)建桌面快捷方式，請(qǐng)勿關(guān)閉本窗口.

::設(shè)置程序或文件的完整路徑（必選）

set Program=%cd%\chrome.exe

::設(shè)置快捷方式名稱（必選）

set LnkName=SSSChrome

::設(shè)置程序的工作路徑，一般為程序主目錄，此項(xiàng)若留空，腳本將自行分析路徑

set WorkDir=%cd%

::設(shè)置快捷方式顯示的說(shuō)明（可選）

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)請(qǐng)求，由原來(lái)的4個(gè)302 后跳轉(zhuǎn)到登錄頁(yè)面變?yōu)?個(gè)302 跳轉(zhuǎn)后正常進(jìn)入功能頁(yè)面，解決了請(qǐng)求第三方iframe時(shí)不發(fā)送Cookie 造成第三方服務(wù)認(rèn)證通過(guò)跳轉(zhuǎn)登錄頁(yè)面的問(wèn)題。

　　總結(jié)

　　本文介紹了iframe內(nèi)聯(lián)框架，幫助您安全地嵌入iframe頁(yè)面并提高頁(yè)面集成效率和復(fù)用率，達(dá)到代碼的高復(fù)用和良好的用戶體驗(yàn)。

　　請(qǐng)求第三方iframe時(shí)，能夠?qū)frame進(jìn)行請(qǐng)求頭驗(yàn)證及統(tǒng)一安全驗(yàn)證，實(shí)現(xiàn)iframe頁(yè)面安全嵌入。針對(duì)瀏覽器訪問(wèn)第三方iframe時(shí)存在的第三方Cookie 不能正常發(fā)送問(wèn)題，提供了可行的解決方案，可以為頁(yè)面嵌入使用方面提供有效的借鑒。

最后：

1）關(guān)注+私信回復(fù)：“測(cè)試”，可以免費(fèi)領(lǐng)取一份10G軟件測(cè)試工程師面試寶典文檔資料。以及相對(duì)應(yīng)的視頻學(xué)習(xí)教程免費(fèi)分享！，其中包括了有基礎(chǔ)知識(shí)、Linux必備、Mysql數(shù)據(jù)庫(kù)、抓包工具、接口測(cè)試工具、測(cè)試進(jìn)階-Python編程、Web自動(dòng)化測(cè)試、APP自動(dòng)化測(cè)試、接口自動(dòng)化測(cè)試、測(cè)試高級(jí)持續(xù)集成、測(cè)試架構(gòu)開(kāi)發(fā)測(cè)試框架、性能測(cè)試等。

2）關(guān)注+私信回復(fù)："入群" 就可以邀請(qǐng)你進(jìn)入軟件測(cè)試群學(xué)習(xí)交流~~

、介紹

網(wǎng)頁(yè)瀏覽器是目前世界上最普遍，最可攜的計(jì)算機(jī)環(huán)境。幾乎所有人都可以在計(jì)算機(jī)或是手機(jī)上使用網(wǎng)頁(yè)瀏覽器，以沒(méi)有基礎(chǔ)設(shè)施障礙的方式訪問(wèn)程序。

在 PyCon US 2022 上，知名 Python 發(fā)行版 Anaconda 開(kāi)發(fā)商近日宣布了可在瀏覽器端運(yùn)行的 Python — PyScript。

根據(jù)官方的介紹，PyScript 是一個(gè)開(kāi)發(fā)框架，該框架允許在瀏覽器中運(yùn)行Python應(yīng)用。為開(kāi)發(fā)者提供了標(biāo)準(zhǔn) HTML 中嵌入編寫(xiě) Python 代碼的能力、使用 Python 調(diào)用 JavaScript 函數(shù)庫(kù)，以及創(chuàng)建 Python Web 應(yīng)用。它可以讓開(kāi)發(fā)者在HTML中創(chuàng)建豐富的Python應(yīng)用程序，且Python代碼可與JavaScript實(shí)現(xiàn)雙向通信。

官方表示，通過(guò)使用PyScript，Python開(kāi)發(fā)者便不需要擔(dān)心程序部署問(wèn)題，因?yàn)镻yScript讓程序直接在網(wǎng)頁(yè)瀏覽器中運(yùn)行，也就是說(shuō)，可以在HTML文件中，分享開(kāi)發(fā)成果，只要其他人在網(wǎng)頁(yè)瀏覽器中打開(kāi)文件，該文件中的程序代碼就會(huì)開(kāi)始運(yùn)行。

2、原理及安裝

官網(wǎng)地址：

https://pyscript.net/

由于PyScript目前仍在alpha測(cè)試階段，讀者感興趣的話，可以從pyscript.net下載嘗鮮。

另外，PyScript 是基于 Pyodide來(lái) 構(gòu)建的，Pyodide 由編譯成 WebAssembly 的 CPython 3.8 解釋器組成，允許在網(wǎng)頁(yè)瀏覽器中運(yùn)行 Python。Pyodide 可以安裝來(lái)自 PyPi 的任何 Python 包。Pyodide 還包括一個(gè)外部函數(shù)接口，可以將 Python 包暴露給 JavaScript，并將瀏覽器 UI，包括 DOM，暴露給 Python。

使用前，需要先下載對(duì)應(yīng)依賴的靜態(tài)資源文件(CSS、JS)，第一種方式直接將文件下載到本地再引入

<link rel="stylesheet" href="path/to/pyscript.css" />
<script defer src="path/to/pyscript.js"></script>

另外一種方式，直接在線引入

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

3、使用示例

用VSCODE或者PyCharm，或者其他任一你喜歡的編輯器，新建HTML文件，編寫(xiě)示例代碼，類似如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>PyScript Hello World</title>

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>

  <body>
    Hello world! <br>
    This is the current date and time, as computed by Python:
    <py-script>
    from datetime import datetime
    now = datetime.now()
    now.strftime("%m/%d/%Y, %H:%M:%S")
    </py-script>
  </body>
</html>

該示例用于在HTML前端頁(yè)面，利用Python代碼實(shí)現(xiàn)打印當(dāng)前時(shí)間的功能。

坦白來(lái)講，PyScript 作為一款新面市不久的框架，還存在很多不穩(wěn)定的問(wèn)題，分享給各位讀者，目的是希望大家能從不同的框架背后，學(xué)習(xí)借鑒到新的設(shè)計(jì)思路，取其精華，開(kāi)闊視野。在沒(méi)有工作應(yīng)用場(chǎng)景時(shí)，并不需要強(qiáng)制自己去使用，希望大家抱有一種理性的視角來(lái)看待新技術(shù)、新框架。

以上分享希望對(duì)你工作有所幫助、啟發(fā)，有被幫助到的朋友歡迎點(diǎn)贊，在看、轉(zhuǎn)發(fā)。

最后，關(guān)于軟件測(cè)試學(xué)習(xí)，offer選擇等等，都可以通過(guò)后臺(tái)私信交流。需要學(xué)習(xí)資料或者幫忙修改簡(jiǎn)歷也可以私信！！也可百度搜索“特斯汀軟件測(cè)試騰訊課堂”或關(guān)注公眾號(hào)“特斯汀軟件測(cè)試”，里面涵蓋很多精彩免費(fèi)視頻或干貨知識(shí)

在線咨詢

上一篇：Web UI開(kāi)發(fā)神器—Kendo UI for jQuery數(shù)據(jù)管理之過(guò)濾操作
下一篇：css怎么引入html

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

零基礎(chǔ)學(xué)習(xí)HTML之html框架內(nèi)嵌框架和head頭信息設(shè)置

最后：

您的項(xiàng)目需求