介面操作劫持與HTML5安全的圖文詳解
一、介面操作劫持
1）ClickJacking
#ClickJacking點擊劫持，這是一種視覺上的欺騙。
攻擊者使用一個透明的、看不見的iframe，覆蓋在網頁的某個位置上，誘使用戶點擊iframe。
2）TapJacking
現在行動裝置的使用率越來越高，針對行動裝置的特點，衍生出了TapJacking（觸控螢幕劫持）。
手機上的螢幕範圍有限，手機瀏覽器為了節省空間，可以隱藏網址列，手機上的視覺欺騙會更容易實作。
1. 第一張中最上方顯示了瀏覽器網址欄，同時攻擊者在頁面中畫出了一個假的網址列；
2. 第二張中真實的瀏覽器網址列已經自動隱藏了，此時頁面中只剩下假的網址列；
3. 第三張中是瀏覽器網址列被正常隱藏的情況。
這種針對視覺效果的攻擊可以被利用來釣魚和詐欺。
3）X-Frame-Options
#針對傳統的介面劫持，透過禁止iframe來防範。
HTTP頭中有一個回應頭##X-Frame-Options#，有三個值可以選擇：
1. DENY：該頁不允許載入任何iframe頁面。
2. SAMEORIGIN：此頁面可以載入相同網域的 iframe頁面。
3. ALLOW-FROM uri：此頁面可以載入指定來源的 iframe頁面。
二、HTML5安全性HTML5中新增的一些標籤和屬性，使得XSS等Web攻擊產生了新的變化，在HTML5 Security Cheatsheet中總結了這些變更。
1）隱藏URL惡意程式碼
#反射型XSS中，會將惡意程式碼寫在URL參數中，這樣的話，使用者也能看到惡意程式碼，例如下面的連結：http://www.csrf.net/csrf.html?id=<script>111</script>可以透過window.history來操作
瀏覽器的歷史記錄。
pushState()有三個參數：狀態物件、標題，可選的URL位址。
history.pushState({},"", location.href.split('?').shift());執行上面那段程式碼後就會將參數隱藏。
偽造瀏覽器歷史記錄。
for(i=0; i<10; i++)
history.pushState({},"", "/"+i+".html");
2）HTML5下的殭屍網路
殭屍網路（Botnet）是指在大量的電腦中植入特定的惡意程序，使控制者能夠透過若干電腦直接向其他電腦發送指令，進行網路攻擊。
Web Worker技術和CORS處理機制，再透過Web蠕蟲傳播。
Web Worker是一種多執行緒機制，可以非同步執行惡意CORS處理機制工作在瀏覽器層面，如果伺服器不允許跨站，瀏覽器將攔截伺服器回傳的結果，也就是說跨域請求，伺服器也會正常回應。那么就可以事先写好一段异步请求的脚本（worker.js），然后通过Web Worker来执行这段脚本，不断的向目标服务器发起请求。
var worker_loc = 'worker.js';//封装了ajax请求的脚本
var target = '
//可实例化多个
Web Workervar workers = [];for (i = 0; i < 1; i++) {
workers[i] = new Worker(worker_loc);
workers[i].postMessage(target);//跨域消息传递}以上是介面操作劫持與HTML5安全的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Stock Market GPT
人工智慧支援投資研究，做出更明智的決策
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在HTML5中製作具有自定義控件的音頻播放器？
Sep 16, 2025 am 04:21 AM
首先創建隱藏的audio元素並構建自定義控件UI，然後通過JavaScript將播放、暫停、進度調節和音量控制等功能與音頻API連接，實現完全個性化的音頻播放器。
如何在HTML5中使用服務器量事件（SSE）？
Sep 21, 2025 am 06:11 AM
SSEenablesreal-time,unidirectionalserver-to-clientupdatesviaHTTP;useEventSourceinJavaScripttoconnect,handlemessageswithonmessage,setserverresponsetypetotext/event-stream,formatdatawith"data:"and"\n\n",andoptionallyincludeeventIDsf
如何使用ARIA角色在HTML5中可訪問？
Sep 21, 2025 am 04:41 AM
ARIAenhanceswebaccessibilitybyaddingsemanticmeaningtoelementswhennativeHTMLisinsufficient.UseARIAroleslikerole="button",aria-expanded,andaria-labelforcustomcomponentsordynamiccontent,butalwaysprefernativeHTMLelementssuchasbuttonornav.Update
如何管理HTML5中可訪問性的焦點？
Sep 21, 2025 am 05:27 AM
UsesemanticHTMLelementslikeandfornativefocusabilityandkeyboardsupport.EnsurelogicaltaborderandvisiblefocusindicatorsviaCSS.Programmaticallymanagefocusindynamiccontentlikemodalsusingelement.focus(),trappingfocusinsideandreturningitafterclosure.ApplyAR
如何在HTML5中正確使用元素？
Sep 17, 2025 am 06:33 AM
ThemenelementInhtml5 representsDatesandTimesInamachine-regrableFormat，增強Accostibilityandseo; usetheDateTateTeTeTeTeTimeAttributeWithiso-FormattedValueSprovidesprovidesemanticmanticmanticmanticmanticmantingmanticmanting，特別是Forhuman-Fryman-Frighan-FriendliendTextortations，EnsuringConsistringConsistentInterIntertentertentertentertrationbybymac
如何根據HTML5中的正則表達式驗證形式場？
Sep 22, 2025 am 05:11 AM
UsEthepatternattributeInhtml5InputElementStavalIdateAgainStareGex，SustAsForpassWordsRequiringNumbers，大寫，小寫，小寫和最小值； pairwithTitleForuserGuuserGuiDanceNanceNanceAgeAgeAgeAncuiredeNandAnceAndEnceAneandRequiredFornonOn-enon-emptement-emptentement-emptentement。
如何製作HTML5圖像圖響應
Sep 17, 2025 am 04:34 AM
要使HTML5圖像映射響應式，可通過JavaScript動態縮放坐標或使用CSS絕對定位覆蓋元素；首先確保圖像本身響應式，然後在頁面加載和窗口調整時通過JavaScript根據原始與當前尺寸比例重新計算area區域坐標，或改用百分比定位的透明鏈接覆蓋在圖像上來實現跨設備適配，最終保證交互區域隨圖像正確縮放，兩種方法各有適用場景，JavaScript方案兼容原有結構，CSS方案更簡潔無需腳本，應根據項目需求選擇，且均需測試多屏效果並確保觸控區域足夠大，推薦複雜地圖用JavaScript法，簡單佈局
