Secure Site

This site is protected from clickjacking attacks.

在此範例中,JavaScript 檢查目前視窗 (window.self) 是否不是最頂層視窗 (window.top)。如果不是,它會將最頂層的視窗重新導向到目前視窗的 URL,從而有效地突破 iframe。

2.使用事件偵聽器增強訊框清除
您可以透過使用事件偵聽器持續檢查頁面是否被框架來進一步增強框架破壞技術。

例子:

            Enhanced Frame Busting        

Secure Site

This site is protected from clickjacking attacks.

在此範例中,在 DOMContentLoaded、load 和 resize 事件上呼叫 PreventClickjacking 函數,以確保持續保護。

伺服器端保護

雖然 JavaScript 方法很有用,但實作伺服器端保護可以提供額外的安全層。以下是如何在 Apache 和 Nginx 中設定 HTTP 標頭以防止點擊劫持:

1. X-Frame-Options 標頭
X-Frame-Options 標頭可讓您指定您的網站是否可以嵌入 iframe 中。共有三個選項:

DENY:阻止任何網域嵌入您的頁面。
SAMEORIGIN:僅允許來自同一來源的嵌入。
ALLOW-FROM uri:允許從指定的 URI 嵌入。
例:

X-Frame-Options: DENY

Apache 設定
將此標頭新增至您的伺服器設定:

# ApacheHeader always set X-Frame-Options \\\"DENY\\\"

Nginx 設定
將此標頭新增至您的伺服器設定:

2.內容安全策略 (CSP) 框架祖先
CSP 透過frame-ancestors 指令提供了更靈活的方法,該指令指定可以使用 iframe 嵌入頁面的有效父級。

例子:

Content-Security-Policy: frame-ancestors \\'self\\'

Apache 設定
將此標頭新增至您的伺服器設定:

例子:

# ApacheHeader always set Content-Security-Policy \\\"frame-ancestors \\'self\\'\\\"

Nginx 設定
將此標頭新增至您的伺服器設定:

# Nginxadd_header Content-Security-Policy \\\"frame-ancestors \\'self\\'\\\";

結論

點擊劫持對Web 安全性構成嚴重威脅,但透過實施JavaScript 框架破壞技術和伺服器端保護(例如X-Frame-Options 和Content-Security-Policy 標頭),您可以有效地保護您的Web 應用程式。使用提供的範例來增強網站的安全性並為使用者提供更安全的體驗。

","image":"http://www.luping.net/uploads/20240801/172248708366ab112bdc1ec.jpg","datePublished":"2024-08-01T12:38:03+08:00","dateModified":"2024-08-01T12:38:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 防止 JavaScript 中的點擊劫持攻擊

防止 JavaScript 中的點擊劫持攻擊

發佈於2024-08-01
瀏覽:623

Preventing Clickjacking Attacks in JavaScript

點擊劫持,也稱為 UI 糾正,是一種攻擊類型,惡意行為者透過在 iframe 中嵌入網頁來誘騙用戶點擊與他們感知的內容不同的內容。這可能會導致未經授權的操作並危及用戶安全。在本部落格中,我們將探討如何使用 JavaScript 和 Apache 和 Nginx 的伺服器配置以及使用者友好的範例來防止點擊劫持攻擊。

了解點擊劫持

點擊劫持涉及在合法網頁元素上放置透明或不透明的 iframe,導致用戶在不知不覺中執行更改設定或轉移資金等操作。

現實世界的例子

考慮這樣一種情況:攻擊者將銀行網站的隱藏 iframe 嵌入到受信任的網頁中。當用戶點擊看似無害的按鈕時,他們實際上可能正在授權銀行交易。

以下是易受攻擊頁面的範例:



    
    
    Clickjacking Example


    

Welcome to Our Site

使用 JavaScript 防止點擊劫持

為了防止點擊劫持攻擊,您可以使用 JavaScript 來確保您的網站不會被陷害。以下是有關如何實施此保護的分步指南:

1. JavaScript 架構破壞
框架破壞涉及使用 JavaScript 來偵測您的網站是否在 iframe 內載入並突破它。

例子:



    
    
    Frame Busting Example
    


    

Secure Site

This site is protected from clickjacking attacks.

在此範例中,JavaScript 檢查目前視窗 (window.self) 是否不是最頂層視窗 (window.top)。如果不是,它會將最頂層的視窗重新導向到目前視窗的 URL,從而有效地突破 iframe。

2.使用事件偵聽器增強訊框清除
您可以透過使用事件偵聽器持續檢查頁面是否被框架來進一步增強框架破壞技術。

例子:



    
    
    Enhanced Frame Busting
    


    

Secure Site

This site is protected from clickjacking attacks.

在此範例中,在 DOMContentLoaded、load 和 resize 事件上呼叫 PreventClickjacking 函數,以確保持續保護。

伺服器端保護

雖然 JavaScript 方法很有用,但實作伺服器端保護可以提供額外的安全層。以下是如何在 Apache 和 Nginx 中設定 HTTP 標頭以防止點擊劫持:

1. X-Frame-Options 標頭
X-Frame-Options 標頭可讓您指定您的網站是否可以嵌入 iframe 中。共有三個選項:

DENY:阻止任何網域嵌入您的頁面。
SAMEORIGIN:僅允許來自同一來源的嵌入。
ALLOW-FROM uri:允許從指定的 URI 嵌入。
例:

X-Frame-Options: DENY

Apache 設定
將此標頭新增至您的伺服器設定:

# Apache
Header always set X-Frame-Options "DENY"

Nginx 設定
將此標頭新增至您的伺服器設定:

2.內容安全策略 (CSP) 框架祖先
CSP 透過frame-ancestors 指令提供了更靈活的方法,該指令指定可以使用 iframe 嵌入頁面的有效父級。

例子:

Content-Security-Policy: frame-ancestors 'self'

Apache 設定
將此標頭新增至您的伺服器設定:

例子:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

Nginx 設定
將此標頭新增至您的伺服器設定:

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

結論

點擊劫持對Web 安全性構成嚴重威脅,但透過實施JavaScript 框架破壞技術和伺服器端保護(例如X-Frame-Options 和Content-Security-Policy 標頭),您可以有效地保護您的Web 應用程式。使用提供的範例來增強網站的安全性並為使用者提供更安全的體驗。

版本聲明 本文轉載於:https://dev.to/rigalpatel001/preventing-clickjacking-attacks-in-javascript-39pj?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何避免Go語言切片時的內存洩漏?
    如何避免Go語言切片時的內存洩漏?
    ,a [j:] ...雖然通常有效,但如果使用指針,可能會導致內存洩漏。這是因為原始的備份陣列保持完整,這意味著新切片外部指針引用的任何對象仍然可能佔據內存。 copy(a [i:] 對於k,n:= len(a)-j i,len(a); k
    程式設計 發佈於2025-07-05
  • 如何同步迭代並從PHP中的兩個等級陣列打印值?
    如何同步迭代並從PHP中的兩個等級陣列打印值?
    同步的迭代和打印值來自相同大小的兩個數組使用兩個數組相等大小的selectbox時,一個包含country代碼的數組,另一個包含鄉村代碼,另一個包含其相應名稱的數組,可能會因不當提供了exply for for for the uncore for the forsion for for ytry...
    程式設計 發佈於2025-07-05
  • 如何從Python中的字符串中刪除表情符號:固定常見錯誤的初學者指南?
    如何從Python中的字符串中刪除表情符號:固定常見錯誤的初學者指南?
    從python import codecs import codecs import codecs 導入 text = codecs.decode('這狗\ u0001f602'.encode('utf-8'),'utf-8') 印刷(文字)#帶有...
    程式設計 發佈於2025-07-05
  • PHP陣列鍵值異常:了解07和08的好奇情況
    PHP陣列鍵值異常:了解07和08的好奇情況
    PHP數組鍵值問題,使用07&08 在給定數月的數組中,鍵值07和08呈現令人困惑的行為時,就會出現一個不尋常的問題。運行print_r($月份)返回意外結果:鍵“ 07”丟失,而鍵“ 08”分配給了9月的值。 此問題源於PHP對領先零的解釋。當一個數字帶有0(例如07或08)的前綴時,PHP...
    程式設計 發佈於2025-07-05
  • Go web應用何時關閉數據庫連接?
    Go web應用何時關閉數據庫連接?
    在GO Web Applications中管理數據庫連接很少,考慮以下簡化的web應用程序代碼:出現的問題:何時應在DB連接上調用Close()方法? ,該特定方案將自動關閉程序時,該程序將在EXITS EXITS EXITS出現時自動關閉。但是,其他考慮因素可能保證手動處理。 選項1:隱式關閉終...
    程式設計 發佈於2025-07-05
  • MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    在兩個條件下插入或更新或更新 solution:的答案在於mysql的插入中...在重複鍵更新語法上。如果不存在匹配行或更新現有行,則此功能強大的功能可以通過插入新行來進行有效的數據操作。如果違反了唯一的密鑰約束。 實現所需的行為,該表必須具有唯一的鍵定義(在這種情況下為'名稱'...
    程式設計 發佈於2025-07-05
  • 如何使用替換指令在GO MOD中解析模塊路徑差異?
    如何使用替換指令在GO MOD中解析模塊路徑差異?
    在使用GO MOD時,在GO MOD 中克服模塊路徑差異時,可能會遇到衝突,其中3個Party Package將另一個PAXPANCE帶有導入式套件之間的另一個軟件包,並在導入式套件之間導入另一個軟件包。如迴聲消息所證明的那樣: go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...
    程式設計 發佈於2025-07-05
  • 左連接為何在右表WHERE子句過濾時像內連接?
    左連接為何在右表WHERE子句過濾時像內連接?
    左JOIN CONUNDRUM:WITCHING小時在數據庫Wizard的領域中變成內在的加入很有趣,當將c.foobar條件放置在上面的Where子句中時,據說左聯接似乎會轉換為內部連接。僅當滿足A.Foo和C.Foobar標準時,才會返回結果。 為什麼要變形?關鍵在於其中的子句。當左聯接的右側...
    程式設計 發佈於2025-07-05
  • 如何在Chrome中居中選擇框文本?
    如何在Chrome中居中選擇框文本?
    選擇框的文本對齊:局部chrome-inly-ly-ly-lyly solument 您可能希望將文本中心集中在選擇框中,以獲取優化的原因或提高可訪問性。但是,在CSS中的選擇元素中手動添加一個文本 - 對屬性可能無法正常工作。 初始嘗試 state)</option> < o...
    程式設計 發佈於2025-07-05
  • 如何將來自三個MySQL表的數據組合到新表中?
    如何將來自三個MySQL表的數據組合到新表中?
    mysql:從三個表和列的新表創建新表 答案:為了實現這一目標,您可以利用一個3-way Join。 選擇p。 *,d.content作為年齡 來自人為p的人 加入d.person_id = p.id上的d的詳細信息 加入T.Id = d.detail_id的分類法 其中t.taxonomy ...
    程式設計 發佈於2025-07-05
  • Python元類工作原理及類創建與定制
    Python元類工作原理及類創建與定制
    python中的metaclasses是什麼? Metaclasses負責在Python中創建類對象。就像類創建實例一樣,元類也創建類。他們提供了對類創建過程的控制層,允許自定義類行為和屬性。 在Python中理解類作為對象的概念,類是描述用於創建新實例或對象的藍圖的對象。這意味著類本身是使用...
    程式設計 發佈於2025-07-05
  • Python中嵌套函數與閉包的區別是什麼
    Python中嵌套函數與閉包的區別是什麼
    嵌套函數與python 在python中的嵌套函數不被考慮閉合,因為它們不符合以下要求:不訪問局部範圍scliables to incling scliables在封裝範圍外執行範圍的局部範圍。 make_printer(msg): DEF打印機(): 打印(味精) ...
    程式設計 發佈於2025-07-05
  • Java中假喚醒真的會發生嗎?
    Java中假喚醒真的會發生嗎?
    在Java中的浪費喚醒:真實性或神話? 在Java同步中偽裝喚醒的概念已經是討論的主題。儘管存在這種行為的潛力,但問題仍然存在:它們實際上是在實踐中發生的嗎? Linux的喚醒機制根據Wikipedia關於偽造喚醒的文章,linux實現了pthread_cond_wait()功能的Linux實現,...
    程式設計 發佈於2025-07-05
  • 在程序退出之前,我需要在C ++中明確刪除堆的堆分配嗎?
    在程序退出之前,我需要在C ++中明確刪除堆的堆分配嗎?
    在C中的顯式刪除 在C中的動態內存分配時,開發人員通常會想知道是否有必要在heap-procal extrable exit exit上進行手動調用“ delete”操作員,但開發人員通常會想知道是否需要手動調用“ delete”操作員。本文深入研究了這個主題。 在C主函數中,使用了動態分配變量(...
    程式設計 發佈於2025-07-05
  • 如何使用node-mysql在單個查詢中執行多個SQL語句?
    如何使用node-mysql在單個查詢中執行多個SQL語句?
    Multi-Statement Query Support in Node-MySQLIn Node.js, the question arises when executing multiple SQL statements in a single query using the node-mys...
    程式設計 發佈於2025-07-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3