“四大高手”为你的|“四大高手”为你的 Vue 应用程序保驾护航
全球都在处理数字化转型的问题,飞速发展的同时也为基础设施带来了一定的压力。同时许多黑客也在不断更新升级他们的攻击技术。
如果我们的应用程序有过多漏洞,被抓按住利用,就会变成大型芭比Q现场。
文章图片
这也是为何现在如此多团队将安全性转向左翼,甚至将技术从 DevOps 迁移到到 DevSecOps。
所以很多开发者对于程序安全性有一定顾虑,甚至会占用一些时间专门关注安全问题,但事实上我们并不需要为了保证绝对安全性而牺牲版本的快速更迭。
本文将为大家介绍四种可以帮助我们便捷保护 Vue 应用程序的便捷方法,而且。这些方法简单易用,不会影响到我们的正常工作进程。
Vue 框架概述
Vue 是一个用于构建 Web 用户界面的渐进式框架,必须要提到的是它可以和其他框架(如 React 和 Angular)完美集成。 Vue 与其他框架相比更加专注于视图层,但明显的优点是它能高效构建单页应用程序 (SPA)。
文章图片
而现在风头正盛的Vue 3,可以直接使用 TypeScript 编写,随着应用程序的体量逐渐变大,我们不再需要额外工具来防止潜在的运行时错误。
保护 Vue 应用程序的 4 种方法
下面是我们将为大家介绍一些攻击,通过它可以让我们了解如何保护在Vue上运行的应用程序。这些最佳实践将帮助您防止跨站点脚本 (XSS) 和跨站点请求伪造 (CSRF) 等攻击,这些攻击可以是低调的自动攻击,也可以是高级持续威胁的一部分,用作攻击的第一步。更广泛的攻击活动。
文章图片
1.跨站脚本(XSS)
跨站点脚本 (XSS) 攻击是一种代码注入,最常见的 XSS 攻击的手法是基于 DOM 的攻击。攻击者旨在将恶意代码注入我们网站的 DOM 元素之中,这样用户登陆网页时恶意攻击指令就会生效,例如窃取用户数据。为了防止这种意外出现,开发人员需要将以下位置中有风险的输入内容进行清理:
- HTML(绑定内部 HTML)
- 样式 (CSS)
- 属性(绑定值)
- 资源(文件内容)
作为开发者,我们不能强制用户输入什么,所以需要我们对用户的输入内容进行判断、清洗,将问题内容及时"处理"。npm 上提供的vue-sanitize 库可以轻松将服务器上的用户输入值进行清理。
它通过使用一串HTML 来清理代码中出现的问题,并防止 XSS 攻击。它会删除有风险的 HTML,同时我们可以将我们需要保留的HTML内容作为白名单,自定义设置。
import VueSanitize from "vue-sanitize";
Vue.use(VueSanitize);
轻松将标签和选项列入白名单:
defaultOptions = {
allowedTags: ['a', 'b'],
allowedAttributes: {
'a': ['href']
}
}
Vue.use(VueSanitize, defaultOptions);
然后,VueSanitize 将获取用户传输的数据内容并清理——保留我们列入白名单的内容,防止代码注入和 XSS 攻击。
2.自定义库与新版本不匹配
自定义 Vue 库实在是我们开发过程中一个利器,可以按照我们的需求进行自定义内容设置,但对于一些过于依赖当前版本的自定义库而言,这么做的弊端也是显而易见的,升级更高版本,有概率会出现应用程序可能会出错的问题,但如果不选择升级, 我们可能会错过Vue一些关键的安全修复和功能。
文章图片
修改和更新Vue 库最好的方式时通过区分享我们的需求和内容,这可以让其他开发者查看到我们的的更改,并考虑将它们添加到下一个 Vue 版本。
我们还可以在在 Vue 应用程序中使用NPM 包保持最新,这样可以确保已解决的安全问题或更新内容都一同更新了。
3. 有风险 的Vue 库
Vue一个亮点是它可以让开发人员无需编辑浏览器的 DOM 来手动渲染组件;然而,这并不意味着开发人员不需要直接访问 DOM 元素的时候,为了解决这个问题,Vue 为用户提供了一些API,例如findDOMNode和ref。
文章图片
使用 ref来访问 DOM 元素(见下文):
使用这种方法,我们不需要通过Vue操作Dom元素,而直接引用用户组件及 API,通过应用程序直接操作 DOM 元素。这么做很便捷,但也会使得应用程序容易受到 XSS 漏洞的攻击。为了防止恶意代理利用我们的应用程序,这里提供几种途径来保护我们的应用程序。
- 输出文本内容而不是直接输出 HTML 代码
- 使用 VueSanitize 库清理数据
- API生成Dom节点
跨站请求伪造(CSRF):
文章图片
CSRF利用了用户对网站的信任,在未经用户授权的情况下发送恶意命令。举个例子是当我们在某些网站想阅读一些内容,网站可能需要让我们登录用户。
为了验证删除请求的身份验证,网站会话通过 cookie 存储在浏览器中。但是,这会在站点中留下一个 CSRF 漏洞。如果想删除需要用户使用浏览器中的 cookie 向服务器发送删除请求。
减轻这种威胁的一种常见方法是让服务器发送包含在 cookie 中的随机身份验证令牌。客户端读取 cookie 并在所有后续请求中添加具有相同令牌的自定义请求标头。这样就可以拒绝没有身份验证令牌的攻击者发出的请求。
跨站点脚本包含 (XSII) XSSI允许攻击者使用JSON API 读取数据网站数据。它利用了旧浏览器上的一个漏洞,该漏洞包括了原生 JavaScript 对象构造函数。
它可以使用脚本标签提供 API URL,这意味着我们的程序中会有他人代码,我们不能控制代码内容,也无法判断托管它的服务器是否安全。
解决这种攻击,可以让服务器使所有 JSON 的响应变为不可执行。例如在对应代码前加上字符串 ")]}',\n",然后在解析数据之前将其删除。因为脚本必须保证完整性才能运行,所以这样就可以避免XSII攻击。
总结
安全是一个至关重要的问题,不仅应该由安全专业人员解决,开发人员也应该注意到一些问题。本文就从几种不同攻击出发,为大家介绍了一些规避和解决的方法。
没有完美无缺的应用程序,在开发过程中不可避免有许多修复、补丁和需要响应的紧急事项,但采用安全的编码思维可以帮助我们将低许多不必要的风险。
不过跳脱出框架本身,如果我们使用与框架无关的Web 组件,我们拥有一套完整的JavaScript UI 组件和强大的类似 Excel 的 JavaScript 电子表格组件,为Vue以及Angular和React提供深度支持。
这里是一些demo 演示
文章图片
【“四大高手”为你的|“四大高手”为你的 Vue 应用程序保驾护航】后续还会为大家分享更多有趣内容~觉得不错点个赞吧。
推荐阅读
- 网易智企发布“易+”开源计划,网易会议组件正式开源
- 快讯|极客日报(罗永浩回应“调侃”俞敏洪转行做直播;苹果3月9日举行春季发布会;CentOS推出新车载Linux发行版 | 极客头条)
- 五邑大学校级蓝桥杯c语言试题,【智能制造学部】第十届“蓝桥杯”软件类校内选拔赛顺利举行...
- 云上敏捷(云原生到底是什么())
- 360携手HarmonyOS打造独特的“天气大师”
- 开源访谈录|“关起门来搞开源,做不了开源世界的Leader”
- 从|从 TikTok“重 QA 轻测试”来看中美软件开发之间的差异
- bmp|总监调岗至前台,企业被判赔偿26万,法院(“侮辱性调岗”违法!)
- Instagram CEO :“苹果 iPad 不咋受欢迎,不值得给开发个专属版本的 App”
- java|用Java写出敬业福小程序