const http = require('http');
function handleReequest(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
  res.write('<script>alert("反射型 XSS 攻击")</script>');
  res.end();
}
 
const server = new http.Server();
server.listen(8001, '127.0.0.1');
server.on('request', handleReequest);

<input type="text" id="input">
<button id="btn">Submit</button> 
<script>
  const input = document.getElementById('input');
  const btn = document.getElementById('btn');
 
  let val;
  input.addEventListener('change', (e) => {
    val = e.target.value;
  },false);
  btn.addEventListener('click', (e) => {
    fetch('http://localhost:8001/save', {
      method: 'POST',
      body: val
    });
  }, false);
</script>

const http = require('http');
let userInput = '';
 
function handleReequest(req, res) {
  const method = req.method;
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
  if (method === 'POST' && req.url === '/save'){
    let body = '';
    req.on('data',chunk => {
      body += chunk;
    });
    req.on('end', () => {
      if (body) {
        userInput = body;
      }
      res.end();
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
    res.write(userInput); //将输入的脚本内容返回给前端页面
    res.end();
  }
}
 
const server = new http.Server();
server.listen(8001, '127.0.0.1');
server.on('request', handleReequest);

<h2>XSS: </h2>
<input type="text" id="input">
<button id="btn">Submit</button>
<div id="div"></div>
<script>
  const input = document.getElementById('input');
  const btn = document.getElementById('btn');
  const div = document.getElementById('div');
  let val;
  input.addEventListener('change', (e) => {
    val = e.target.value;
  }, false);
  btn.addEventListener('click', () => {
    div.innerHTML = `<a href=${val}>testLink</a>`
  }, false);
</script>

'' onclick=alert(/xss/)

<a href onlick="alert(/xss/)">testLink</a>

// vuejs 中的 decodingMap
// 在 vuejs 中，如果输入带 script 标签的内容，会直接过滤掉
const decodingMap = {
 '<': '<',
 '>': '>',
 '"': '"',
 '&': '&',
 '
 ': '\n'
}

res.setHeader('Set-Cookie', ['mycookie=222', 'test=3333; expires=Sat, 21 Jul 2018 00:00:00 GMT;']);

res.setHeader('Set-Cookie', ['user=22333; expires=Sat, 21 Jul 2018 00:00:00 GMT;']);

<p>CSRF 攻击者准备的网站：</p>
<img src="/UploadFiles/2021-04-02/87343">

页面 A 使用了一个 img 标签，其地址指向了删除用户帖子的链接：

可以看到，当登录用户访问攻击者的网站时，会向 www.c.com 发起一个删除用户帖子的请求。此时若用户在切换到 www.c.com 的帖子页面刷新，会发现ID 为 87343 的帖子已经被删除。
由于 Cookie 中包含了用户的认证信息，当用户访问攻击者准备的攻击环境时，攻击者就可以对服务器发起 CSRF 攻击。在这个攻击过程中，攻击者借助受害者的 Cookie 骗取服务器的信任，但并不能拿到 Cookie，也看不到 Cookie 的内容。而对于服务器返回的结果，由于浏览器同源策略的限制，攻击者也无法进行解析。因此，攻击者无法从返回的结果中得到任何东西，他所能做的就是给服务器发送请求，以执行请求中所描述的命令，在服务器端直接改变数据的值，而非窃取服务器中的数据。
但若 CSRF 攻击的目标并不需要使用 Cookie，则也不必顾虑浏览器的 Cookie 策略了。
4.CSRF 攻击的防范
当前，对 CSRF 攻击的防范措施主要有如下几种方式。
4.1 验证码
验证码被认为是对抗 CSRF 攻击最简洁而有效的防御方法。
从上述示例中可以看出，CSRF 攻击往往是在用户不知情的情况下构造了网络请求。而验证码会强制用户必须与应用进行交互，才能完成最终请求。因为通常情况下，验证码能够很好地遏制 CSRF 攻击。
但验证码并不是万能的，因为出于用户考虑，不能给网站所有的操作都加上验证码。因此，验证码只能作为防御 CSRF 的一种辅助手段，而不能作为最主要的解决方案。
4.2 Referer Check
根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。通过 Referer Check，可以检查请求是否来自合法的”源”。
比如，如果用户要删除自己的帖子，那么先要登录 www.c.com，然后找到对应的页面，发起删除帖子的请求。此时，Referer 的值是 http://www.c.com；当请求是从 www.a.com 发起时，Referer 的值是 http://www.a.com 了。因此，要防御 CSRF 攻击，只需要对于每一个删帖请求验证其 Referer 值，如果是以 www.c.com 开头的域名，则说明该请求是来自网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是 CSRF 攻击，可以拒绝该请求。
针对上文的例子，可以在服务端增加如下代码：


if (req.headers.referer !== 'http://www.c.com:8002/') {
  res.write('csrf 攻击');
  return;
}


Referer Check 不仅能防范 CSRF 攻击，另一个应用场景是 “防止图片盗链”。
4.3 添加 token 验证(token==令牌)
CSRF 攻击之所以能够成功，是因为攻击者可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 Cookie 中，因此攻击者可以在不知道这些验证信息的情况下直接利用用户自己的 Cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入攻击者所不能伪造的信息，并且该信息不存在于 Cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。
总结
本文主要介绍了 XSS 和 CSRF 的攻击原理和防御措施。当然，在 Web 安全领域，除了这两种常见的攻击方式，也存在这 SQL 注入等其它攻击方式，这不在本文的讨论范围之内，如果你对其感兴趣，可以阅读SQL注入技术专题的专栏详细了解相关信息。最后，总结一下 XSS 攻击和 CSRF 攻击的常见防御措施：
1.防御XSS攻击

  
HttpOnly 防止劫取 Cookie
  
用户的输入检查
  
服务端的输出检查

2.防御CSRF攻击

  
验证码
  
Referer Check
  
Token 验证

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。