关于Web安全，我们最早听到最多的就是SQL注入。例如用户在系统登录界面输入用户名和密码，提交以后，后端直接拿到数据就拼接SQL语句去查询数据库。如果在输入时进行了恶意的SQL拼装，那么最后生成的SQL就有问题，黑客就可以从数据库中拖出关键信息。
我们可以通过在后端用PDO扩展的方式访问数据库和对用户输入数据进行多重验证的方式来避免SQL注入。本文先不做重点来讨论。
而现在前端我们遇到的web安全问题比较典型的有XSS攻击和CSRF攻击这两种。本次主要来说说对于这两种攻击，先解释其实现原理还有我们都有哪些方法可以来应对。
一、XSS(Cross-site Scripting, 跨站脚本攻击)
避免与CSS重名，所以简写成XSS了。原理就是通过发布文章、发布评论等方式，将一段恶意的JS代码输入进去。然后别人再看这篇文章、评论时，之前注入的这段恶意JS代码就执行了。JS代码一旦执行就跟网页原有的JS有同样的权限，可以获取cookie等。
解决办法有四个：
1.CSP(Content-Security-Policy)
内容安全策略是http协议中协议头的一个字段，也可以通过html的meta标签进行控制。只要在返回的http头中定义：
'Content-type':'text/html',
'Content-Security-Policy':'default-src http: https:'
那么返回的html文件就只能通过http和https外链加载js脚本的方式来执行js代码，而不能执行内联的js代码。这样就防止了恶意内联js代码的执行。此外这个标签还可以设置加载哪些域名下的js文件等，更多信息请查阅 MDN CSP文档
2.对cookie设置http-only
可以对cookie设置http-only来禁止通过JS访问cookie，减少XSS攻击。
3.对用户输入的内容进行escape验证
目前已经有一些npm库例如xss-escape,通过把有XSS攻击危险的字符转换成html实体字符，再放到后端存储，下次在前端渲染的时候，浏览器就不会把实体字符当做脚本来执行了，而是当成实体编码解码之后进行显示。
4.后端对有XSS嫌疑的内容进行过滤
目前已经有一些npm库例如xss-escape,通过把有XSS攻击危险的字符转换成html实体字符，再放到后端存储，下次在web前端渲染的时候，浏览器就不会把实体字符当做脚本来执行了，而是当成实体编码解码之后进行显示。
二、CSRF(Cross-site request forgery，跨站请求伪造)
CSRF是借用了当前操作者的身份来偷偷完成了某个请求操作，而不是为了拿到用户信息。所以这两种攻击都是以Cross-site开始，可以一起来记忆。其原理是利用了浏览器再访问某个特定域名时会一直带着这个域名的cookie，那么如果用户访问了某个不安全的网站，网页中有一段js命令执行了一个第三方网站的请求，如果用户之前登录过这个第三方网站的话，黑客就可以利用用户的身份来请求这个第三方网站，完成一些私密的操作。
所以当前在涉及现金交易是都是需要输入密码或者指纹验证，防止第三方伪造请求。
敏感的接口使用POST请求而不是GET请求也能够一定程度预防CSRF。
还有就是对cookie设置same-site属性，规定浏览器不能在跨域请求中携带Cookie，来减少CSRF攻击。