XSS跨站脚本攻击

网络应用程序的安全漏洞攻击——XSS 攻击

Cross-Site scripting 跨站脚本

XSS 三种类型

反射型 XSS

反射型 XSS 只是简单地把用户输入的数据从服务器反射给用户浏览器，黑客设计一个 URL 引导用户访问才能开展攻击

url 中包含信息甚至 script 脚本，一旦点击这个链接，script 就会执行，黑客可能会在 script 中写入木马

比如 http://localhost:/index.html?a=<script>alter(1)</script>

const params = new URLSearchParams(location.search)
const name = params.get('a');
console.log(name);
document.write(name);

存储型 XSS（最严重）

在线聊天室或者评论区比较常见，不需要特定的链接 URL，黑客仅仅需要在文本框中输入一段 script 脚本，如果前后端都没有过滤，那么这段脚本会被存储到数据库中，以后所有浏览这个被感染页面的人都会被这个脚本攻击，脚本中可能会窃取 cookie 等信息，信息资源盗刷

DOM 型 XSS

也被称为客户端 XSS，利用 JS 与 HTML 的交互性质和 DOM 实现。

用户访问某个 URL 时，浏览器自动执行 JS 代码，恶有代码会被注入到当前页面，篡改内容或者盗取用户个人敏感信息

不会触发 HTTP 请求和响应过程，攻击不会传递到服务端，仅仅在客户端

预防 XSS

CSP（Content Security Policy）：通过设置响应报文头中的 CSP 策略，限制页面中可执行的脚本来源、样式表、图像、字体等，以此减少恶意代码等执行可能性

配置 CSP 规则

在服务端生成 CSP 规则，以 HTTP response header 的方式发送给浏览器如

<meta
  http-equiv="Content-Security-Policy"
  content="default-scr 'self'; script-src 'self' cdn.example.com; style-src 'self' fonts.googleapis.com"
/>

• default-src 只能从当前源加载资源，例如 HTML 页面、图片、音频、视频等
• script-src
• style-src

CSP 策略

防止 XSS 攻击

通过禁止外部脚本，例如第三方广告、恶意脚本等执行，防止 XSS 攻击

防止数据泄露

通过禁止外部资源加载，防止敏感数据被窃取或者篡改

防止点击劫持

通过禁止页面嵌入式 IFRAME，防止被钓鱼网站利用

解决方法：

简单——利用正则将> <解析成文本实体，就不会将其解析成 script 标签了，前后端都要处理

const textArea = document.createElement('textarea');
const content = document.createElement('div');
document.body.append(textArea, content);
window.addEventListener('keydown', (e) => {
  if (e.keyCode === 13) {
    // content.innerHTML = textArea.value;
    // 将<>变成字符实体，避免错误地执行黑客输入的脚本内容
    content.innerHTML = textArea.value
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
    textArea.value = '';
  }
});

成熟——使用第三方 xss 库