原文链接：https://juejin.im/post/5e84b14151882573be11b795对于前端童鞋来说，网络安全多半是听过，没听过。如今，在前端如火如荼的时代，大部分东西都越来越成熟，随时可用。云服务、框架等已经帮我们做了安全防范。我们不需要太在意前端的网络安全。作为一名前端爱好者，最近Review了这部分知识，做一个简单的总结，一路呈现给评委们，请大家注意查收。XSS攻击Cross-SiteScripting（跨站脚本攻击）简称XSS，是一种代码注入攻击。攻击者在目标网站上注入恶意脚本以在用户的??浏览器上运行。利用这些恶意脚本，攻击者可以获得Cookies、SessionID等用户敏感信息，从而危及数据安全。根据攻击来源，XSS攻击可分为存储型、反射型和DOM型三种。它可以节省其他用户查看帖子或评论的时间。服务器返回恶意代码，拼接到客户端页面。恶意代码可能会通过自身执行或用户点击执行的方式弹出广告或获取cookie等用户隐私信息，并向攻击者数据库报告。1.2反射攻击反射攻击主要发生在带诱导链接的按钮邮件等，攻击者在某些链接的参数中加入恶意代码，诱导用户点击。用户通过点击将请求参数传递给服务器。服务器获取参数并将它们连接起来。为客户端执行恶意代码，冒充用户进行权限操作或窃取用户cookie等个人隐私信息，并上报给攻击者数据库。1.3DOM攻击攻击者构造一个包含恶意代码的特殊URL。用户打开带有恶意代码的URL。用户浏览器收到响应后解析并执行，前端JavaScript将URL中的恶意代码取出并执行。恶意代码窃取用户数据并发送到攻击者网站，或冒充用户调用目标网站的接口执行攻击者指定的操作。DOM型和反射型都是通过诱导用户点击链接来执行的，都是暂时的，但是反射型属于服务端的安全漏洞，DOM型属于客户端的安全漏洞2.如何实现为了防止对客户端输入的内容进行xss攻击，对用户进行安全字符转义，服务端对提交的内容进行安全转义。服务端渲染启用模板引擎自带的HTML转义功能。避免内联事件，尽量不要使用onLoad="onload('{{data}}')",onClick="go('{{action}}')"来拼接内联事件。在JavaScript中通过.addEventlistener()进行事件绑定更安全。避免拼接HTML。在前端使用拼接HTML的方法是很危险的。如果框架允许，使用createElement、setAttribute等方法来实现。或者使用更成熟的渲染框架，比如Vue/React等，时刻保持警惕。当插入位置是DOM属性、链接等时，一定要打起精神，严防死守。通过CSP、输入长度配置、接口安全措施等方式，增加攻击难度，降低攻击后果。主动检测和发现，使用XSS攻击字符串和自动扫描工具来发现潜在的XSS漏洞。尽量避免第三方跨域向服务器提交内容HTTP-onlyCookie：禁止JavaScript读取某些敏感cookie，攻击者完成XSS注入后无法窃取此cookie。Captcha：防止脚本冒充用户提交危险操作。CSRF攻击CSRF（Cross-siterequestforgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，并在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站获取的注册凭证绕过后台用户验证，达到冒充用户对被攻击网站进行操作的目的。1.1主动攻击受害人访问a.com，在浏览器中留下a.com的登录状态。攻击者诱导受害者访问第三方网站b.com。第三方网站b.com有访问a.com界面的恶意代码（删除/添加/修改等），当受害者点击b.com时，b.com拿走a.com的登录凭证冒充受害用户对a.com进行恶意操作。1.2被动攻击攻击者在a.com发布带有恶意链接的帖子或评论（向a.com提交诱导img/form/a标签并进行增删改）当其他登录状态的受害者点击该网站的恶意链接时评论冒充受害者登录凭证发起攻击CSRF主要是冒用受害者的登录凭证发起恶意增删改查，不会窃取受害者的隐私信息。二、如何防止CSRF攻击1、禁止第三方网站获取cookie，如设置Chrome的SameSite属性。缺点：试用阶段SameSite兼容性不是很好理想2.服务端通过RefererHeader和OriginHeader进行同源验证缺点1：攻击者可以部分修改或隐藏referer
