Web安全中的点击劫持该怎么防御？

优尚网 02-06 63

默认

摘要： 点击劫持防御全指南目录导读点击劫持原理与威胁主流防御技术解析X-Frame-Options头详解安全策略(CSP)应用](#内容安全策略CSP应用)JavaScript防御实施方案...

点击劫持防御全指南

目录导读

点击劫持原理与威胁
主流防御技术解析
X-Frame-Options头详解安全策略(CSP)应用](#内容安全策略CSP应用)
JavaScript防御实施方案
框架破坏技术实践
行业最佳防御策略
常见问题解答

点击劫持原理与威胁

点击劫持（Clickjacking），又称UI覆盖攻击，是一种视觉欺骗技术，攻击者通过透明的iframe或CSS层叠，将恶意页面覆盖在合法网页之上，诱导用户在不知情的情况下点击隐藏的界面元素，从而执行非预期操作，这种攻击自2008年被首次公开披露以来,已成为Web安全领域的持续威胁。

攻击者通常创建包含目标网站的透明层，通过精心设计的诱饵界面误导用户，攻击者可能制作一个游戏页面，实际上却将银行转账按钮覆盖在“开始游戏”按钮之下，用户以为自己点击的是游戏控件,实际却授权了资金转移。

点击劫持的危害主要体现在三个方面：首先可能导致用户敏感操作被劫持，如转账、修改密码；其次可能窃取用户会话凭证；最后可能结合其他攻击方式扩大危害范围，根据ww.jxysys.com安全团队的研究数据显示，超过30%的知名网站曾存在点击劫持漏洞风险。

主流防御技术解析

防御点击劫持需要多层次、纵深的安全策略，目前业界主要采用四种核心防御机制：HTTP响应头控制、内容安全策略、客户端脚本防护和框架破坏技术，每种技术都有其适用场景和局限性,实际部署中常采用组合方案。

HTTP头防御是最直接有效的方式，通过服务器端配置控制页面是否允许被嵌套，内容安全策略（CSP）提供了更细粒度的控制能力，可以精确指定允许加载资源的域名，JavaScript防护作为补充手段，可以在不支持HTTP头控制的旧版浏览器中提供保护,而框架破坏技术则通过干扰页面在框架内的正常显示来防止攻击。

ww.jxysys.com的安全评估报告指出，综合使用至少两种防御技术的网站，遭受点击劫持攻击的成功率降低97%以上,下面我们将详细解析每种技术的实施方法。

X-Frame-Options头详解

X-Frame-Options是专门用于防御点击劫持的HTTP响应头，目前所有主流浏览器均支持，该头部提供三个指令值,开发者可根据安全需求选择配置。

X-Frame-Options: DENY 完全禁止页面在任何框架中加载，这是最严格的防护设置，适用于所有不希望被嵌套的页面，特别是涉及敏感操作的界面，当浏览器检测到此指令时,会拒绝任何形式的框架嵌套尝试。

X-Frame-Options: SAMEORIGIN 允许页面在同源框架中加载，这是最常用的平衡设置，既保证了内部框架使用的灵活性，又防止了跨域嵌套风险,适用于企业内部系统或需要iframe功能的场景。

X-Frame-Options: ALLOW-FROM uri 允许页面在指定源的框架中加载，但由于该选项已被现代浏览器逐步废弃，ww.jxysys.com安全专家建议改用CSP的frame-ancestors指令替代。

配置示例（Apache服务器）：

Header always set X-Frame-Options "SAMEORIGIN"

配置示例（Nginx服务器）：

add_header X-Frame-Options "SAMEORIGIN";

安全策略(CSP)应用安全策略的frame-ancestors指令提供了比X-Frame-Options更灵活、更强大的框架控制能力，它可以指定多个允许嵌套页面的源，支持通配符和协议匹配,是现代Web应用防御点击劫持的首选方案。

基础配置示例：

Content-Security-Policy: frame-ancestors 'self' https://trusted.jxysys.com;

此配置只允许页面在同源或指定信任域中被嵌套，若完全禁止嵌套,可设置为：

Content-Security-Policy: frame-ancestors 'none';

对于需要多域支持的复杂应用：

Content-Security-Policy: frame-ancestors https://*.jxysys.com https://partner.example.com;

CSP还支持报告模式,可在不影响功能的情况下监控潜在攻击：

Content-Security-Policy: frame-ancestors 'self'; report-uri /csp-report-endpoint/

ww.jxysys.com的监控数据显示，正确配置CSP可拦截99.5%的点击劫持尝试,同时通过报告机制收集的攻击数据有助于优化安全策略。

JavaScript防御实施方案

对于不支持现代HTTP头的旧版浏览器，JavaScript防御提供了向后兼容的解决方案，其核心原理是通过检测页面是否在框架中加载,并采取相应防护措施。

基础框架检测脚本：

if (top !== self) {
    // 页面在框架中加载
    top.location = self.location;
}

但这种简单方法容易被攻击者绕过,更健壮的实现方案：

(function() {
    var inFrame = false;
    try {
        inFrame = window !== top || document !== top.document || self.location !== top.location;
    } catch(e) {
        inFrame = true;
    }
    if (inFrame) {
        // 破坏框架显示
        document.body.style.display = 'none';
        top.location = self.location;
    }
})();

为防止样式攻击,可添加CSS防护：

body {
    display: none !important;
}
html {
    display: block !important;
}

配合JavaScript在验证通过后显示内容：

if (self === top) {
    document.body.style.display = 'block';
} else {
    top.location = self.location;
}

框架破坏技术实践

框架破坏技术通过干扰页面在框架内的正常渲染来防御点击劫持，主要包含三种实现方式：框架爆破、覆盖元素检测和用户交互验证。

框架爆破技术在检测到页面被嵌套时,强制将顶层页面重定向到当前页面：

if (top.location.hostname !== self.location.hostname) {
    top.location.href = self.location.href;
}

覆盖元素检测利用透明元素检测攻击：

<div id="overlayDetector" 
     style="position:fixed; top:0; left:0; width:100%; height:100%; 
            z-index:999999; pointer-events:none; background:transparent;">
</div>
<script>
    document.getElementById('overlayDetector').onclick = function() {
        document.body.innerHTML = '<h1>安全警告：检测到点击劫持尝试</h1>';
    };
</script>

用户交互验证要求用户在敏感操作前完成验证：

function validateUserAction() {
    var isConfirmed = confirm("请确认您正在访问ww.jxysys.com的官方页面");
    if (!isConfirmed) {
        window.location.href = '/security-warning';
        return false;
    }
    return true;
}