防止 XSS - JavaScript

什么是 XSS ？

跨站脚本攻击（Cross Site Scripting，XSS）是指通过“注入”恶意脚本，使其“注入”的脚本在浏览器上执行，并以用户的身份执行某些操作的攻击方式。 攻击者可以利用浏览器对 Web 页面动态HTML 的处理能力，加入恶意脚本，以达到其不良目的，常见危害如窃取用户信息，伪造用户操作等。

如何防止 XSS 攻击？

1. 对用户输入做过滤

1.1 过滤用户输入的HTML标签

通过在服务端使用输入白名单，只允许合法的HTML标签和属性，从而避免恶意脚本的注入。

// 使用第三方模块 sanitize-html
const sanitizeHtml = require('sanitize-html');

const htmlInput = '<div>hello</div><script>alert("XSS attack")</script>';
const options = {
  allowedTags: [ 'p', 'em', 'strong', 'a' ], // 允许的标签
  allowedAttributes: { // 允许的属性
    'a': [ 'href' ],
    'img': [ 'src' ]
  }
}
const filteredHtml = sanitizeHtml(htmlInput, options);

console.log(filteredHtml);
// <div>hello</div>

1.2 过滤用户输入的非字母和数字字符

一些字符如 <、>、& 等，有特殊含义，需要被 HTML 实体化，否则会产生意想不到的结果。

function escapeHtml(htmlString) {
  return htmlString.replace(/[<>"'&]/g, (match) => {
    switch (match) {
      case '<': return '&lt;';
      case '>': return '&gt;';
      case '"': return '&quot;';
      case '\'': return '&#39;';
      case '&': return '&amp;';
    }
  });
}

const htmlInput = '<div>hello</div><script>alert("XSS attack")</script>';
const escapedHtml = escapeHtml(htmlInput);

console.log(escapedHtml);
// &lt;div&gt;hello&lt;/div&gt;&lt;script&gt;alert(&quot;XSS attack&quot;)&lt;/script&gt;

2. 输出内容时做转义

一些被攻击者输入的HTML内容，、包括用户名，评论等，需要在页面上展示，但是在展示前，需要对其进行HTML实体转义。

function escapeHtml(htmlString) {
  return htmlString.replace(/[<>"'&]/g, (match) => {
    switch (match) {
      case '<': return '&lt;';
      case '>': return '&gt;';
      case '"': return '&quot;';
      case '\'': return '&#39;';
      case '&': return '&amp;';
    }
  });
}

const currentUser = '<script>console.log("XSS attack");</script>';
const escapedCurrentUser = escapeHtml(currentUser);

const userGreeting = `Hello, ${escapedCurrentUser}`;
console.log(userGreeting);
// Hello, &lt;script&gt;console.log(&quot;XSS attack&quot;);&lt;/script&gt;

总结

XSS 攻击是一种常见的 Web 安全威胁，但是通过对用户输入做过滤和对内容做转义，可以大大减小 XSS 的危害。除了上述方法，还有 CSP、X-XSS-Protection、双重Cookie 等防范 XSS 攻击的措施，开发者在编写 Web 应用时要严格遵循安全编码的规定，做好相关的安全防护工作。