前言

　　在跨域請求不同服務方或是兼容先前系統的頁面時，你可能想利用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）關注+私信回復："入群" 就可以邀請你進入軟件測試群學習交流~~

、介紹

網頁瀏覽器是目前世界上最普遍，最可攜的計算機環境。幾乎所有人都可以在計算機或是手機上使用網頁瀏覽器，以沒有基礎設施障礙的方式訪問程序。

在 PyCon US 2022 上，知名 Python 發行版 Anaconda 開發商近日宣布了可在瀏覽器端運行的 Python — PyScript。

根據官方的介紹，PyScript 是一個開發框架，該框架允許在瀏覽器中運行Python應用。為開發者提供了標準 HTML 中嵌入編寫 Python 代碼的能力、使用 Python 調用 JavaScript 函數庫，以及創建 Python Web 應用。它可以讓開發者在HTML中創建豐富的Python應用程序，且Python代碼可與JavaScript實現雙向通信。

官方表示，通過使用PyScript，Python開發者便不需要擔心程序部署問題，因為PyScript讓程序直接在網頁瀏覽器中運行，也就是說，可以在HTML文件中，分享開發成果，只要其他人在網頁瀏覽器中打開文件，該文件中的程序代碼就會開始運行。

2、原理及安裝

官網地址：

https://pyscript.net/

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

另外，PyScript 是基于 Pyodide來 構建的，Pyodide 由編譯成 WebAssembly 的 CPython 3.8 解釋器組成，允許在網頁瀏覽器中運行 Python。Pyodide 可以安裝來自 PyPi 的任何 Python 包。Pyodide 還包括一個外部函數接口，可以將 Python 包暴露給 JavaScript，并將瀏覽器 UI，包括 DOM，暴露給 Python。

使用前，需要先下載對應依賴的靜態資源文件(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文件，編寫示例代碼，類似如下：

<!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前端頁面，利用Python代碼實現打印當前時間的功能。

坦白來講，PyScript 作為一款新面市不久的框架，還存在很多不穩定的問題，分享給各位讀者，目的是希望大家能從不同的框架背后，學習借鑒到新的設計思路，取其精華，開闊視野。在沒有工作應用場景時，并不需要強制自己去使用，希望大家抱有一種理性的視角來看待新技術、新框架。

以上分享希望對你工作有所幫助、啟發，有被幫助到的朋友歡迎點贊，在看、轉發。

最后，關于軟件測試學習，offer選擇等等，都可以通過后臺私信交流。需要學習資料或者幫忙修改簡歷也可以私信！！也可百度搜索“特斯汀軟件測試騰訊課堂”或關注公眾號“特斯汀軟件測試”，里面涵蓋很多精彩免費視頻或干貨知識