在Web应用开发中，XSS（跨站脚本攻击）和CSRF（跨站请求伪造）是两种常见的网络安全威胁。XSS攻击允许攻击者在用户的浏览器中注入恶意脚本，而CSRF攻击则利用用户的登录会话在未经授权的情况下执行操作。以下是使用JavaScript来有效防御这两种攻击的实战策略与最佳实践。

XSS攻击防御

1. 对用户输入进行编码

在将用户输入插入到HTML文档中之前，对其进行编码是非常重要的。这可以通过以下几种方式实现：

  • 使用textContent属性而不是innerHTML来插入文本内容。
  • 使用DOMPurify库来清理和净化HTML内容。
// 使用textContent属性
document.getElementById('output').textContent = userInput;

// 使用DOMPurify库
const clean = DOMPurify.sanitize(dirtyInput);
document.getElementById('output').innerHTML = clean;

2. 使用内容安全策略（CSP）

内容安全策略（CSP）是一种安全标准，用于帮助检测和减轻某些类型的攻击，包括XSS攻击。通过定义哪些动态资源被允许加载，CSP可以防止恶意脚本执行。

// 设置CSP
document.head.appendChild(document.createElement('meta')).httpEquiv = 'Content-Security-Policy';
document.head.querySelector('meta').content = "default-src 'self'; script-src 'self' https://trusted.cdn.com;";

3. 验证和清理所有用户输入

确保在服务器端和客户端都验证用户输入，并且始终清理输入以防止注入攻击。

// 服务器端验证
function validateInput(input) {
  // 实现验证逻辑
}

// 客户端清理
function cleanInput(input) {
  // 实现清理逻辑
}

CSRF攻击防御

1. 使用CSRF令牌

CSRF令牌是一种常用的防御CSRF攻击的方法。它要求在每次表单提交时都包含一个唯一的令牌，服务器会验证这个令牌的有效性。

// 生成CSRF令牌
function generateCSRFToken() {
  // 实现令牌生成逻辑
}

// 在表单中包含令牌
document.getElementById('csrfToken').value = generateCSRFToken();

2. 设置HTTP头

通过设置HTTP头，可以防止CSRF攻击。例如，使用X-CSRF-Token头来验证请求。

// 设置HTTP头
app.use((req, res, next) => {
  res.setHeader('X-CSRF-Token', req.csrfToken());
});

3. 使用SameSite Cookie属性

SameSite属性可以用来防止CSRF攻击，通过限制第三方网站访问带有该属性的cookie。

// 设置SameSite属性
document.cookie = "XSRF-TOKEN=token; SameSite=Lax";

总结

通过上述策略和最佳实践，你可以有效地使用JavaScript来防御XSS和CSRF攻击。记住，安全是一个持续的过程，需要不断地更新和改进你的防御措施。