前后端安全分类:
1、前端安全:发生在浏览器、单页面应用、web页面的安全问题,比如跨站脚本攻击xss就是前端安全问题
2、后端安全:发生在后端服务器、应用、服务当中的安全问题,比如:SQL注入漏洞发生在后端
前端安全攻击手段
1、XSS攻击
2、CSRF攻击
3、点击劫持
4、iframe带来的风险
5、不安全的第三方依赖包
XSS攻击
XSS 即(Cross Site Scripting)中文名称为:跨站脚本攻击。
恶意攻击者在web页面中会插入一些恶意的script代码。当目标网站、目标用户浏览器渲染HTML文档的过程中,出现了不被预期的脚本指令并执行时,XSS就发生了,因此达到恶意攻击用户的目的。
根据攻击的来源,XSS 攻击可分为反射型、存储型和 DOM 型三种:
反射型XSS:发出请求时,XSS代码出现在URL中,作为输入提交到服务器端,服务器端解析后响应,XSS代码随响应内容一起传回给浏览器,最后浏览器解析执行XSS代码。这个过程像一次反射,故叫反射型XSS。
1、用户A给用户B发送一个恶意构造了Web的URL。
2、用户B点击并查看了这个URL。
3、用户B获取到一个具有漏洞的HTML页面并显示在本地浏览器中。
4、漏洞HTML页面执行恶意java script脚本,将用户B信息盗取发送给用户A,或者篡改用户B看到的数据等
反射型XSS防御:
我们可以通过html转义来防范,最好是采用成熟的转义库处理
攻击者盗用了你的身份,以你的名义发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻击者所期望的一个操作,比如以你的名义发送邮件、发消息,盗取你的账号,添加系统管理员,甚至于购买商品、虚拟货币转账等。 如下:其中Web A为存在CSRF漏洞的网站,Web B为攻击者构建的恶意网站,User C为Web A网站的合法用户
存储型XSS:存储型XSS和反射型XSS的差别仅在于,提交的代码会存储在服务器端,下次请求目标页面时不用再提交XSS代码,这样,每一个访问特定网页的用户都会被攻击
1、用户A在网页上创建了某个账户,并且账户信息中包含XSS代码。
2、用户B访问该网站查看XSS代码账户详情页面。
3、服务端返回账户详情页面,和带XSS账户信息。
4、用户B浏览器执行XSS代码,将用户B信息盗取发送给用户A,或者篡改用户B看到的数据等。
存储型XSS攻击防范:
1. 后端需要对提交的数据进行过滤。
2. 前端也可以做一下处理方式,比如对script标签,将特殊字符替换成HTML编码这些等。
DOM-based型XSS:DOM型XSS是基于DOM文档对象模型的一种漏洞,通过 HTML DOM,通过植入js代码,造成dom的更改,因此造成了XSS-DOM漏洞,所以DOM类型的XSS可能是反射型也可能是储存型
1、用户B访问网站url中带有XSS代码参数。
2、浏览器下载该网站java script脚本。
3、java script脚本有个方法获取URL中XSS代码参数,并且用innerHtml渲染在dom中。
4、触发XSS代码,造成XSS攻击,cookie数据失窃。
DOM 型 XSS 攻击,实际上就是网站前端 java script 代码本身不够严谨,把不可信的数据当作代码执行了。
DOM 型 XSS防御:
1、在使用 .innerHTML、.outerHTML、document.write() 时要特别小心,不要把不可信的数据作为 HTML 插到页面上,而应尽量使用 .textContent、.setAttribute() 等。
2、在使用 .innerHTML、.outerHTML、document.write() 时要特别小心,不要把不可信的数据作为 HTML 插到页面上,而应尽量使用 .textContent、.setAttribute() 等。
3、在使用 .innerHTML、.outerHTML、document.write() 时要特别小心,不要把不可信的数据作为 HTML 插到页面上,而应尽量使用 .textContent、.setAttribute() 等。
4、Http Only cookie
5、对产品输入要求格式严谨检查过滤
CSRF攻击
攻击者盗用了你的身份,以你的名义发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻击者所期望的一个操作,比如以你的名义发送邮件、发消息,盗取你的账号,添加系统管理员,甚至于购买商品、虚拟货币转账等。 如下:其中Web A为存在CSRF漏洞的网站,Web B为攻击者构建的恶意网站,User C为Web A网站的合法用户
CSRF攻击防御:
1、验证 HTTP Referer 字段
2、使用 token验证
3、显示验证方式:添加验证码、密码等
4、涉及到数据修改操作严格使用 post 请求而不是 get 请求
点击劫持攻击:
点击劫持是一种视觉上的欺骗手段。攻击者使用一个透明的、不可见的iframe,覆盖在一个网页上,然后诱使用户在网页上进行操作,此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置,可以诱使用户恰好点击在iframe页面的一些功能性按钮上。
一个简单的点击劫持例子,就是当你点击了一个不明链接之后,自动关注了某一个人的博客或者订阅了视频
点击劫持防御
1、X-Frame-Options浏览器机制:X-Frame-Options HTTP响应头是用来给浏览器指示允许一个页面能否在<frame>、<iframe>、<object>中展现的标记,有三个可选的值:DENY:浏览器会拒绝当前页面加载任何frame页面(即使是相同域名的页面也不允许)SAMEORIGIN:允许加载frame页面,但是frame页面的地址只能为同源域名下的页面ALLOW-FROM:可以加载指定来源的frame页面(可以定义frame页面的地址)但这个缺陷就是chrome、Safari是不支持ALLOW-FROM语法!
2、使用认证码认证用户:点击劫持漏洞通过伪造网站界面进行攻击,网站开发人员可以通过认证码识别用户,确定是用户发出的点击命令才执行相应操作。识别用户的方法中最有效的方法是认证码认证。例如,在网站上广泛存在的发帖认证码,要求用户输入图形中的字符,输入某些图形的特征等
3、 使用 FrameBusting 代码“:使用 java script 脚本阻止恶意网站载入网页。如果检测到网页被非法网页载入,就执行自动跳转功能。如果用户浏览器禁用java script脚本,那么FrameBusting代码也无法正常运行。所以,该类代码只能提供部分保障功能
iframe 带来的风险
有些时候我们的前端页面需要用到第三方提供的页面组件,通常会以iframe的方式引入。典型的例子是使用iframe在页面上添加第三方提供的广告、天气预报、社交分享插件等等
iframe本身不受我们控制,那么如果iframe中的域名因为过期而被恶意攻击者抢注,或者第三方被黑客攻破,iframe中的内容被替换掉了,从而利用用户浏览器中的安全漏洞下载安装木马、恶意勒索软件等等,这问题可就大了
iframe防御:
iframe有了一个叫做sandbox的安全属性,通过它可以对iframe的行为进行各种限制,在 iframe 元素中添加上这个关键词就行,另外,sandbox也提供了丰富的配置参数,我们可以进行较为细粒度的控制。一些典型的参数如下:
allow-forms:允许iframe中提交form表单
allow-popups:允许iframe中弹出新的窗口或者标签页(例如,window.open(),showModalDialog(),target=”_blank”等等)
allow-scripts:允许iframe中执行java script
allow-same-origin:允许iframe中的网页开启同源策略
如果你只是添加上这个属性而保持属性值为空,那么浏览器将会对 iframe 实施史上最严厉的调控限制
不安全的第三方依赖
项目里面使用了很多第三方的依赖,不论应用自己的代码的安全性有多高,如果这些来自第三方的代码有安全漏洞,那么对应用整体的安全性依然会造成严峻的挑战。jQuery就存在多个已知安全漏洞,Node.js也有一些已知的安全漏洞
第三方依赖包防御:
手动检查这些第三方代码有没有安全问题是个苦差事,主要是因为应用依赖的这些组件数量众多,手工检查太耗时,有自动化的工具可以使用,比如NSP(Node Security Platform),Snyk、sonarQubej检测工具等等
vue对前端安全的处理:Vue 的安全措施
当然还存在很多别的攻击手段,比如:
Https 也可能存在的风险(强制让HTTPS降级回HTTP,从而继续进行中间人攻击)
本地存储数据泄露(尽可能不在前端存储任何敏感、机密的数据)
cdn劫持(攻击者劫持了CDN,或者对CDN中的资源进行了污染)