we安全对于web前端从事人员也是一个特别重要的一个知识点，也是面试的时候，面试官经常问的安全前端问题。掌握一些web安全知识，提供安全防范意识，今天就会从几个方面说起前端web攻击和防御的常用手段

常见的web攻击方式　　

　　1.XSS

　　　　XSS（Cross Site Scripting）跨站脚本攻击，因为缩写和css重叠，所以能叫XSS，跨脚本攻击是指通过存在安全漏洞的web网站注册用户的浏览器内非法的非本站点HTML标签或javascript进行一种攻击。

　　　跨站脚本攻击有可能造成以下影响

　　　　　　1.利用虚假输入表单骗取用户个人信息

　　　　　　2.利用脚本窃取用户的cookie值，被害者在不知情况的下，帮助攻击者发送恶意请求

　　　　　　 3.显示伪造的文章活图片

　　　　XSS攻击分类：

　　　　　　反射型 -url参数直接注入　　　

普通 http://localhost:3000/?form-china

 alert尝试

  :3000/?form=<scrupt>slert(1)</script>  如果有弹出，说明网站有漏洞，黑客就可以对网站发送攻击  

　　　　　 获取cookie　　　　　

 　　　　　　　通过访问你的网址，在url参数攻击，获取到cookie域名伪造 https://dwz.cn/    用盗取的网址，修改一个简易的网址，发送攻击，也能访问，信息也能保存，又称伪装型网站 伪造cookie入侵，

　　　　　存储型 存储到DB后读取注入

　　　　　　跨脚本注入，通过脚本注入代码。用户比如发送评论，用户的信息都会在黑客网站显示，就可以拿到你所需要的数据

　　　XSS攻击的危害-Scripting能干啥就能干啥　　

　　　　　　1.获取页面数据

                      2.获取Cookies

                      3.劫持前端逻辑

                      4.发送请求

                      5.偷取网站的任意数据

                      6.偷取用户的资料

                      7.偷取用户的秘钥和登录转态

                      8.欺骗用户

　　　防范手段

　　　　HEAD ctx.set(‘X-XSS-Protection‘,0) //禁止XSS过滤

　　　　　　0：禁止XSS过滤　　　　

　　　　　　1： 启用XSS过滤(通常浏览器是默认的)，如果检测到跨脚本攻击，浏览器将清除页面(删除不安全的部分) mode=block 启用XSS过滤，如果检测到攻击，浏览器将不再会清除页面，而是阻止页面加载report=<reporting-URL>(Chromium only)=启用XSS过滤，如果检测到跨站脚攻击，浏览器将清除并使用、

　　　　CSP

　　　　　　内容安全策略(CSP,Content Security Policy)是一个附加的安全层，用于帮助检测和缓解那些类型的攻击，包括跨站脚本(XSS)和数据注入等攻击，这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途

　　　　　　CSP本质就是建立白名单，开发者明确告诉浏览器那些外部资源可以加载和执行，我们只需要配置规则，如何拦截是由浏览器自己实现的，我们可以通过这种方式来尽量减少XSS攻击　

　　

Content-Security-Policy: default-src ‘self‘ 只允许加载本站资源 Content-security-Policy: img-src https:// 只允许加载https协议图片 Content-security-Policy:child-src ‘none‘ 不允许加载任何来源框架 例如 ctx.set(‘Content-security-Policy‘,‘default-src‘)

　　　　黑名单

　　　　　　用户输入永远不可信任的，最普遍的做法就是转义输入的内容，对于引号，尖括号，斜杠进行转义

　　　　　　　　　　　　　　　　　　　　　　　　　　function escape(str) { str = str.replace(/&/g, ‘&‘); str = str.replace(/</g, ‘<‘); str = str.replace(/>/g, ‘>‘); str = str.replace(/"/g, ‘&quto;‘); str = str.replace(/‘/g, "‘"); str = str.replace(/`/g, ‘`‘); str = str.replace(/\//g, ‘/‘); str = str.replace(/<\/script>/,‘‘) return str }