背景我出去面试的时候，经常会被问到一些安全问题。安全涉及的领域非常多，我也只了解一些粗浅的知识。每次面试前都要找资料复习，很麻烦。所以我根据之前搜集的一些资料和面试经验，系统的整理了一下，希望对大家有所帮助。文中首先简单介绍几种常见的攻击方式：SQL注入XSSCSRF点击劫持中间人攻击1.SQL注入这是一种比较简单的攻击方式。如果后台人员不加防范地利用用户输入的数据拼装SQL查询语句，遇到一些恶意输入，最终生成的SQL就会出现问题。比如在地址栏输入：articlrs/index.php?id=1发送get请求，调用的查询语句为：sql="SELECT*FROMarticlesWHEREid=",$id下正常情况下，返回id=1的文章。如果攻击者想获取所有的文章，语句可以改成：articlrs/index.php?id=-1OR1=1这样就可以了，为什么呢？这是因为id=-1始终为假，1=1始终为真，所有where语句始终为真。所以where条件相当于没有where条件，那么查询结果就相当于整个表的内容，攻击达到目的。目前的系统普遍增加了过滤和校验机制，可以有效的防止SQL注入问题。2、XSSXSS的全称是cross-sitescriptingattack。攻击的目的是通过代码注入来实现的。我们有一个社交网站，让每个人都可以访问彼此的空间。该网站可能会这样做：input>form>Whatyouentered:{{{text}}}h2>如果你使用的是Chrome浏览器，你会收到浏览器的警告：像Chrome这样的浏览器可以自动帮助用户抵御攻击，非常贴心。但是不代表只要我用了Chrome就万事大吉了，我应该防，我不得不防。一般来说，防御XSS攻击有两种方式：字符翻译CSP（ContentSecurityPolicy）1.字符翻译的方法是对输入输出内容进行转义，对引号、尖括号、斜杠等字符进行转义.&替换为：&<替换为：<>替换为：>”替换为："'替换为：'/替换为：/攻击代码可以转义：翻译成：这些字符替换后，恶意代码就失效了，不容易发生XSS攻击，对于正常输入，大致可以翻译成在某些情况下，光靠翻译是不够的，例如：clickmea>如果链接中有javacript:开头的协议，浏览器会执行如下链接点击时的代码，此时转义没有用，url协议需要白名，只允许http、https、http、mailto等安全协议。包括图片src属性imgsrc="{{xss}}",iframeiframesrc="{{xss}}"都会有这样的问题，都是需要白名单处理的.如此粗糙的翻译会破坏原来的格式。在这种情况下，更合适的策略是使用白名单来过滤标签和属性。小结：说完字符翻译，再来看CSP。2.CSPCSP，内容安全策略。本质也是一个白名单。通过设置白名单，我们可以设置浏览器允许加载哪些外部资源。启用CSP有两种方式：在HTTPHeader中设置Content-Security-Policy和设置meta标签。只要配置正确的规则，即使网站存在漏洞，也不会执行恶意代码。CSP兼容性：CSP文档地址：https://developer.mozilla.org...3、CSRFCSRF的全称是CrossSiteRequestForgery（跨站请求伪造）。做一点事。CSRF的发生其实是基于cookie的特性。我们登录一个http://tao.com购物网站后，cookie会有登录的标志，这时候请求http://tao.com/pay?id=123&mon...会有一个cookie，服务器就会知道自己已经登录了。如果http://tao.com请求其他域名的API，比如http://tx.com/api，cookie是不会带进去的，这样是浏览器同源策略的限制。但是此时在其他域名的页面中，请求http://tao.com/pay?id=123&mon...会带上tao.com的cookie。这就是CSRF攻击发生的理论基础。如何防御CSRF防御CSRF的有效方法是在各个层级增加权限验证。比如现在的购物网站，只要涉及到现金交易，就必须输入密码或扫码验证。此外，敏感接口应使用POST请求，而不是GET。4.点击劫持click-jacking，又称UI-overlay攻击。这也是问得比较多的一个问题，也是我们最常见的情况。攻击方法是在一些操作的按钮上加一个透明的iframe。一按，你就进坑了。如何防御点击劫持常用的方法有两种：1、使用HTTP头防御，通过配置nginx发送X-Frame-Options响应头。此HTTP响应标头用于防御嵌套在iframe中的点击劫持攻击。这会阻止浏览器呈现嵌入式网页。响应头有3个可选值，分别是：DENY，表示不允许该页面通过iframe显示。SAMEORIGIN表示页面可以显示在同一个域名下的iframe中。ALLOW-FROM，表示页面可以显示在来自指定来源的iframe中。更多细节可以参考MDN上X-Frame-Options响应头的内容。2、使用Javascript防御判断顶级视口的域名是否与本页面的域名一致。如果没有，让恶意网页自动跳转到我们的网页。if(top.location.hostname!==self.location.hostname){alert("您正在访问一个不安全的页面，会将您重定向到一个安全的页面！")top.location.href=self.location.href;}5.Man-in-the-MiddleAttack中间人攻击（MITM）是一种由来已久的网络入侵方法。SMB会话劫持、DNS欺骗等攻击是典型的中间人攻击。简而言之，所谓MITM攻击就是拦截正常的网络通信数据，并进行数据篡改和嗅探，以达到攻击目的，而通信双方却毫不知情。如何防御中间人攻击以下是防止中间人攻击的一些建议：确保您访问的网站使用HTTPS如果您是网站管理员，则应该实施HSTS协议不要在公共Wi-Fi上发送敏感数据如果您的网站使用SSL，请确保禁用不安全的SSL/TLS协议。不要点击恶意链接或电子邮件。还有一个容易被忽视的漏洞window.openerwithtarget="_blank"重定向网页拥有浏览器window.opener对象授予的到原网页的重定向权限，可能被恶意网站利用。例如，一个恶意网站在一个UGC网站上发布了它的恶意URL。当该UGC网站的用户在新窗口中打开页面时，恶意网站会利用此漏洞将原始UGC网站重定向到虚假的钓鱼页面。当用户返回原窗口时，用户可能会忽略浏览器的URL已经改变，可以通过伪造页面进行进一步的钓鱼或其他恶意行为：代码如下：想象一下，当你在浏览淘宝时，你在网络聊天窗口中点击了一个外部链接，出去看了一下，回来后，淘宝变成了另一个域名的高仿网站，而你却浑然不觉，继续买东西，把自己的钱直接给骗子。如何修复将rel="noopenernoreferrer"属性添加到target="_blank"。外层跳转地址a>缺点：为了禁止referrer跳转，目标URL无法检测到源地址。另一种方法是将所有外部链接替换为内部跳转连接服务。当你点击一个链接时，首先会跳转到内部地址，然后由服务器重定向到外部URL。现在很多网站都是这样做的，既可以规避风险，也可以控制非法站点的打开："/redirect?target=http%3A%2F%2Fxxx.yyy.com">http://xxx.yyy.com就是这样。小结以上介绍了一些常见的前端安全知识以及如何防御这些攻击。面试基本够用了。安全领域非常大。上面我只是简单介绍了一个方面。如果你对安全感兴趣，可以找一些相关的资料继续研究。如果文章中有任何错误，请指正。最后，如果觉得内容有帮助，可以关注我的公众号《前端e进阶》，及时了解最新动态，共同学习！
