HTML5的XSS防护策略

HTML5的XSS攻击基础概念

XSS（跨站脚本攻击）通过注入恶意脚本到网页中执行。HTML5新增的特性如contentEditable、postMessage等扩大了攻击面。典型的存储型XSS攻击流程：

1. 攻击者提交恶意内容到数据库
2. 服务器返回包含恶意脚本的页面
3. 用户浏览器执行恶意代码

// 典型XSS注入示例
const userInput = '<script>alert("XSS")</script>';
document.getElementById('comment').innerHTML = userInput;

内容安全策略（CSP）

CSP通过HTTP头或meta标签定义可信内容来源，是现代浏览器最重要的防护手段。完整策略示例：

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://trusted.cdn.com 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src *;
  media-src media1.com media2.com;
  frame-src youtube.com;
  report-uri /csp-violation-report;

关键指令说明：

• default-src：默认资源加载策略
• script-src：控制脚本执行权限
• style-src：限制CSS加载源
• report-uri：违规报告地址

输入过滤与输出编码

客户端过滤示例

function sanitizeInput(input) {
  const div = document.createElement('div');
  div.textContent = input;
  return div.innerHTML
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

服务端Node.js处理

const escapeHtml = require('escape-html');

app.post('/comment', (req, res) => {
  const safeContent = escapeHtml(req.body.content);
  // 存储到数据库
});

HTML5安全API应用

Sandbox属性强化iframe安全

<iframe 
  src="untrusted.html" 
  sandbox="allow-scripts allow-same-origin"
  referrerpolicy="no-referrer">
</iframe>

安全上下文限制

// 检测是否在安全上下文执行
if (window.isSecureContext) {
  // 允许访问敏感API如Service Worker
}

数据绑定与模板引擎防护

Angular自动转义机制

<!-- 自动转义 -->
<p>{{ userControlledInput }}</p>

<!-- 明确标记可信HTML -->
<p [innerHTML]="trustedHtml"></p>

Vue.js的v-html防护

new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color:red">Red Text</span>'
  },
  methods: {
    sanitize(html) {
      // 使用DOMPurify等库处理
    }
  }
})

现代浏览器安全机制

Trusted Types API

// 启用Trusted Types
Content-Security-Policy: require-trusted-types-for 'script';

// 创建策略
const policy = trustedTypes.createPolicy('escapePolicy', {
  createHTML: input => DOMPurify.sanitize(input)
});

document.getElementById('user-content').innerHTML = policy.createHTML(untrustedInput);

Subresource Integrity（SRI）

<script 
  src="https://example.com/script.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous">
</script>

表单与用户输入防护

输入类型验证

<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required>

<!-- 禁用自动填充 -->
<input type="text" autocomplete="off">

文件上传防护

// 检查文件类型和内容
function validateFile(file) {
  const validTypes = ['image/jpeg', 'image/png'];
  return validTypes.includes(file.type) && 
         file.size < 2 * 1024 * 1024;
}

DOM操作安全实践

安全节点创建

// 不安全的字符串拼接
document.body.innerHTML = '<div>' + userInput + '</div>';

// 安全的DOM操作
const div = document.createElement('div');
div.textContent = userInput;
document.body.appendChild(div);

事件处理防护

// 不安全的onclick绑定
element.setAttribute('onclick', userInput);

// 安全的事件监听
element.addEventListener('click', () => {
  // 受控逻辑
});

同源策略与跨域安全

CORS精细控制

Access-Control-Allow-Origin: https://trusted-site.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

postMessage安全验证

// 接收消息时验证来源
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://expected-origin.com') return;
  // 处理消息
});

客户端存储安全

Web Storage访问控制

// 敏感数据不应存储在localStorage
if (data.includes('password')) {
  throw new Error('Sensitive data prohibited');
}

// 使用sessionStorage替代
sessionStorage.setItem('tempData', encryptedData);

IndexedDB安全实践

// 使用加密存储
const encryptData = (data) => {
  // 使用Web Crypto API加密
};

db.transaction('store').objectStore('data').add({
  id: 1,
  content: encryptData(sensitiveInfo)
});

漏洞检测与响应

XSS Auditor替代方案

// 监控DOM修改
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      checkForMaliciousNodes(mutation.addedNodes);
    }
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

违规报告收集

// CSP违规报告处理
window.addEventListener('securitypolicyviolation', (e) => {
  fetch('/report-endpoint', {
    method: 'POST',
    body: JSON.stringify({
      violatedDirective: e.violatedDirective,
      blockedURI: e.blockedURI,
      lineNumber: e.lineNumber
    })
  });
});