让Web应用更安全的13个小技巧

时间: 2020-03-16阅读: 51标签: web

无论你是React、Angular、Vue.js,还是原生JavaScript开发者,你的代码都有可能成为黑客眼中的猎物。

作为一个前端开发者,我们可能更加关注性能、SEO、UI/UX,往往会忽视安全问题。

当你了解了大型框架是如何让你对xss攻击保持开放态度时,也许你会感觉到很意外。例如,React中的dangerouslySetInnerHTML或者Angular中的bypassSecurityTrust都是一些高危操作。

我们需要记住,就安全而言,前端现在和后端、DevOps一样承担着相同的职责。前端也可能遭受到成千上万的恶意攻击。


常见的攻击手段

让我们来了解一下常见的攻击类型有哪些。

1. 任意文件上传

这种攻击方式是将恶意文件上传到服务器中并执行,从而攻击系统。攻击包括:文件系统或者数据库超载、完全接管系统、将攻击转发到后端系统或者简单的破坏。

2. 点击劫持

这是一种诱导用户点击非本站网页或元素的攻击方式。这种攻击可能导致用户在不经意之间提供证书或者敏感信息,下载恶意软件,访问恶意网页,在线购买产品或者被偷偷转移资产。

译者注:简单的说就是在用户观看到的网站上覆盖一层透明的恶意网站,诱导用户点击恶意网站上的按钮来触发攻击行为

3. XSS攻击

这是一种将恶意脚本JS脚本注入到网页中的攻击方式。网站上的缺陷使这些攻击得以成功并广泛传播。

4. SQL注入

这是一种通过用户输入将恶意的SQL注入到数据库中,进而破坏数据库的攻击方式。

5. Dos攻击(拒绝服务)

这是一种通过流量轰炸服务器,导致正常的用户无法正常访问服务器的攻击方式。

6. 中间人攻击或者会话劫持

这是一种拦截客户端和服务端之间的通信,从中窃取用户的密码、账号或者任何个人详细信息的攻击方式。


防范手段

攻击者将会不遗余力的在前端寻找安全漏洞,在本文中,我们将看到一些编写前端代码时安全相关的最佳实践。

1. 严格的限制用户的输入(第一个攻击点)

应该始终严格的对待用户输入,避免诸如SQL注入、点击劫持等等。因此,在将用户输入发送到服务端之前,校验并过滤用户输入是很重要的。

可以通过删除或替换危险的字符来过滤数据,例如,使用白名单并转义输入的数据。

但是,我意识到过滤和编码用户输入并不是一件容易的事,因此我们可以使用以下开源库:

  • DOMPurify.仅仅使用一个函数就可以过滤用户的输入。同时,也支持自定义的规则,并且支持在HTML5、SVG、MathML中使用。
  • secure-filters. 它提供方法去过滤HTML、JavaScript、内联CSS等等。当你想利用用户的输入生成JavaScript或者CSS时,这个库特别好用。

如果是文件上传,请务必检查文件类型并且使用文件过滤功能仅允许某些文件类型上传。

2. 注意隐藏保存浏览器内存中的数据或字段

如果我们利用type="hidden"来隐藏页面中敏感数据,或者把他们放到浏览器的localStorage、sessionStorage、cookies时,我们需要谨慎的考虑这些数据是否安全。

攻击者可以轻松访问添加到浏览器中的所有内容。攻击者可以打开开发工具并更改所有保存在内存中的变量。如果你根据localStorage、sessionStorage、cookies中的值隐藏了身份验证界面,该怎么办?

ZapProxy这样的工具,可以在攻击者找到注入脚本的方法后,将这些值暴露给攻击者,然后攻击者可以使用它们进行进一步的攻击。

因此,避免使用type="hidden",避免将密钥、身份验证令牌等尽可能多的存到浏览器的内存中。

3. 使用CSP

永远不要相信服务器返回的所有内容,在Http header中定义一个强大的CSP策略,仅仅允许受信任的内容在浏览器中执行。

最好有一个白名单列表,即使攻击者注入了脚本,该脚本和白名单不匹配,它也不会执行。

举个例子:

// header
content-security-policy: script-src ‘self’ https://apis.xyz.com

这里定义我们的Web应用仅仅信任https://apis.xyz.com和本身域名的脚本。对于其他域名的资源都会在控制台中报错。

注意:强大CSP策略也没办法解决内联脚本执行的问题,因此xss攻击仍然存在。

你可以在MDN网站上阅读更详细CSP说明。

译者注:不仅可以在header中设置csp规则,你也可以在meta标签中设置。

4. 开启XSS保护模式

如果攻击者通过某种方式在用户输入中插入攻击代码,我们可以通过"X-XSS-Protection": "1; mode=block"来告诉浏览器阻止响应。

大多数现代浏览器默认情况下都启用了XSS保护模式,但仍建议添加X-XSS-Protection。 这有助于提高不支持CSP的旧版浏览器的安全性。

5. 避免典型的XSS错误

Dom API innerHTML经常被用作XSS攻击的入口。例如:

document.querySelector('.tagline').innerHTML = nameFromQueryString

任何攻击者都可以使用上面的代码行注入恶意代码。

大家可以考虑使用textContent来代替innerHTML,避免直接生成HTML。如果你不生成HTML,那就不会有JavaScript插入到页面中,即使你可以在页面中看到攻击代码,但是,什么也不会发生。

密切关注Trusted Types(MDN地址),这是由google程序员开发出来的,旨在防范所有基于DOM的XSS攻击的方案。

在React.js中,dangerouslySetInnerHTML可能产生和innerHTML类似的影响。

注意:不要直接将用户输入做了innerHTML的值,尽量使用textContent。

另外,我们应该正常的设置http响应头Content-Type和X-Content-Type-Options。例如,请勿将JSON数据编码成text/HTML,以免意外执行。

6. 禁用IFrame嵌入

禁用iframe可以帮助我们免受点击劫持攻击。我们应该在header中添加"X-Frame-Options": "DENY" ,来禁止浏览器在页面中渲染iframe。

我们也可以使用CSP指令frame-ancestors,它可以更好的控制我们的页面可以被哪些父页面通过iframe的形式来嵌套展示。

7. 通用的错误提示

类似"您的密码有误"这样的提示对用户很友好,同时,他对攻击者也很友好。他们可以通过服务端返回的错误信息来判断他下一步需要进行什么样的攻击。

当处理用户的账号、邮件、个人信息时,我们应该尝试使用一些模棱两可的错误提示,类似“错误的登陆信息”。

8. 使用验证码

在对外的公共服务(登陆、注册)上使用验证码。验证码的目的在于帮助我们区分真人和机器人,并且也可以阻止DoS攻击。

9. 设置Referrer-Policy

当我们使用<a>标签或者超链接引导用户离开我们的网站时,确保你在请求header里面添加了"Referrer-Policy": "no-referrer",或者在<a>标签中添加了rel="noopener" 或rel="noreferrer"属性。

当我们不设置header或者rel属性时,目标网站就可以获取到一些用户相关的数据。

译者注:rel=noopener保证跳转过去的网站无法通过window.opener窃取原来网页的信息。rel=noreferrer作用是防止将引用者信息传递到目标网站。上面提到的策略大家可以去mdn上了解一下MDN Referrer-PolicyMDN Link Type

10. 限制浏览器的功能或者API

就像CSP可以限制可信的资源域名一样,我们也可以限制浏览器提供哪些能力给我们用。我们可以利用http header中的Feature-Policy字段来限制使用浏览器提供的功能。

提示:禁用一切你不使用的功能

译者注:Feature-Policy是一个实验中的header属性,目前在chrome浏览器中的兼容性尚可,IE和Safari都不支持。具体可以在MDN Feature-Policy中了解。

11. 定期审查npm依赖

经常跑一下npm audit来获取存在漏洞的npm包列表,升级他们避免一些安全问题。

GitHub现在会标记出哪些存在漏洞的依赖。我们也可以使用Snyk来自动检查你的源码,并且自动升级版本号。

12. 分离你的应用

与后端一样,我们也拥有微服务架构,其中,将单一的Web应用转变为多个小型前端应用的聚合,每个小型前端应用可以单独运行。

相同的原理可以应用于前端。 例如,一个Web应用可以分为公共部分,身份验证部分和后台管理部分,每个应用都托管在单独的子域中,例如https://public.example.com、https://users.example.com和https://admin.example.com。这将减少web应用中的漏洞。

注意:适当的分隔还可以防止应用程序公共部分出现XSS漏洞,从而防止它自动破坏用户信息。

13. 尽量避免使用第三方服务

一行代码就可以使用类似Google Analytics的第三方服务,同时,也可能会给你的应用带来漏洞。想一想这些第三方服务脚本被篡改的情况。

拥有一套健全的CSP策略很重要。大多数第三方服务都有定义的CSP指令,因此请务必添加它们。

同样,如果可能的话,请确保给你的script标签都加上integrity属性。子资源完整性功能(SRI)可以验证脚本的hash值,并确保其未被篡改。

<script src= "https://example.com/example-framework.js" integrity= "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..." crossorigin= "anonymous" ></script>

译者注:将使用base64编码过后的文件哈希值写入你所引用的 <script> 或 <link> 标签的 integrity 属性值中即可启用子资源完整性校验功能。

仔细考虑自动填充字段

存储在浏览器的自动填充里面的用户个人数据对用户和攻击者都很方便。

攻击者添加了第三方的脚本,利用浏览器的自动填充来提取用户的邮箱地址去构建追踪标识。他们可以使用这些信息建立用户浏览历史记录配置文件,然后将其出售给坏人。

我们许多人甚至都不知道他们的浏览器自动填充功能存储了哪些信息。

提示:禁止将敏感信息自动填入表单

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9018

WebAR 如何改变增强现实的未来

增强现实技术在开发人员和智能手机用户中越来越受欢迎,但它还是没有在无所不在的技术中占据一席之地。要体验 AR,用户必须安装专用的程序,但经常会在用过几次后就将其删除,甚至根本去下载它

Web服务常用的几种开发方法

Web服务,即通过程序实现网页服务,服务启动后,一般用户可通过访问URL获取到网站提供的网页服务,如网页浏览、留言、商品购买等。开发Web服务的技术有很多,有Java、Python、ASP.NET、脚本语言等

5 张图描绘Web3 堆栈全景

Web3 堆栈最令人难以置信的一点是,它们不需要任何集中协调就可以组合在一起。开发本身是去中心化的。没有主架构师。这与地球上几乎所有其他的开发堆栈项目形成了鲜明的对比。在 Linux 基金会,少数人设定整个 Linux 的方向

成为 Web 开发大师你必须知道的 7 件事情

曾经是这样的,懂点编码,并可以偶尔耍点酷,那么你就会被认为是一个Web开发大师。但是现在,情况再也不是这样的了。Web开发已经朝着主流方向发展,开发人员数量显著增加。

web开发新手应该知晓的20件事

在我当初刚从事 web 开发的时候,有很多重要的事我并没有事先了解。现在看来,我的很多期望都和现实有很大的差距。在这篇文章里,我会告诉你 20 件事情,这些都是在你准备开始或者刚开始 web 开发不久的时候就应该知晓的

Web前端开发的应用和前景:web 1.0到web 3.0

web3.0时代,前端做着前端的工作,尽自己可能去在多端的世界去为用户体验努力,后端去做着后端的工作,去更好的处理数据,利用人工智能?利用爬虫?将数据充分的使用,为用户分析数据,给予用户最想要的数据。

函数式 UI:Web开发终于摆脱了框架的束缚

用户界面都是响应式系统,因此可以使用一个纯响应函数,将用户界面接受的事件映射到接口系统上的动作来定义用户界面。利用函数式编程的实现技术可以让实现更接近规范,更易推理和测试。函数式 UI 可以让开发人员摆脱不兼容的 UI 和测试框架带来的麻烦

W3C是什么?IETF是什么?

无规矩不成方圆,软件开发当然不能例外。Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准。Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循

如何迁移Flutter项目到Flutter Web?

这篇简单介绍下怎么将一个现有的 Flutter 项目转成 Flutter Web 项目。开始之前先浇一盆冷水,我们理想中的一套代码、多端运行的愿望是要破灭了,至少目前版本的 Flutter Web SDK 是没法做到的

Gavin Wood:创造一个web3.0的加密世界

我最早是以太坊的联合创始人,也是CTO,黄皮书的作者。当开启以太坊时,我们是局外人,关注的焦点更多的是BTC。当时,人们将投身以太坊视为浪费时间和精力。但现在以太坊已经成长起来,进入了完整循环。但与此同时

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广