代码编织梦想

在《8大前端安全问题(上)》文章里我们谈到了什么是前端安全问题,并且介绍了其中的4大典型安全问题,本篇文章将介绍剩下的4大前端安全问题,它们分别是:

  • 防火防盗防猪队友:不安全的第三方依赖包
  • 用了HTTPS也可能掉坑里
  • 本地存储数据泄露
  • 缺乏静态资源完整性校验

防火防盗防猪队友:不安全的第三方依赖包

现如今进行应用开发,就好比站在巨人的肩膀上写代码。据统计,一个应用有将近80%的代码其实是来自于第三方组件、依赖的类库等,而应用自身的代码其实只占了20%左右。无论是后端服务器应用还是前端应用开发,绝大多数时候我们都是在借助开发框架和各种类库进行快速开发。

这样做的好处显而易见,但是与此同时安全风险也在不断累积——应用使用了如此多的第三方代码,不论应用自己的代码的安全性有多高,一旦这些来自第三方的代码有安全漏洞,那么对应用整体的安全性依然会造成严峻的挑战。

举个例子,jQuery就存在多个已知安全漏洞,例如jQuery issue 2432,使得应用存在被XSS攻击的可能。而Node.js也有一些已知的安全漏洞,比如CVE-2017-11499,可能导致前端应用受到DoS攻击。另外,对于前端应用而言,除使用到的前端开发框架之外,通常还会依赖不少Node组件包,它们可能也有安全漏洞。

手动检查这些第三方代码有没有安全问题是个苦差事,主要是因为应用依赖的这些组件数量众多,手工检查太耗时,好在有自动化的工具可以使用,比如NSP(Node Security Platform),Snyk等等。

用了HTTPS也可能掉坑里

为了保护信息在传输过程中不被泄露,保证传输安全,使用TLS或者通俗的讲,使用HTTPS已经是当今的标准配置了。然而事情并没有这么简单,即使是服务器端开启了HTTPS,也还是存在安全隐患,黑客可以利用SSL Stripping这种攻击手段,强制让HTTPS降级回HTTP,从而继续进行中间人攻击。

问题的本质在于浏览器发出去第一次请求就被攻击者拦截了下来并做了修改,根本不给浏览器和服务器进行HTTPS通信的机会。大致过程如下,用户在浏览器里输入URL的时候往往不是从https://开始的,而是直接从域名开始输入,随后浏览器向服务器发起HTTP通信,然而由于攻击者的存在,它把服务器端返回的跳转到HTTPS页面的响应拦截了,并且代替客户端和服务器端进行后续的通信。由于这一切都是暗中进行的,所以使用前端应用的用户对此毫无察觉。

解决这个安全问题的办法是使用HSTS(HTTP Strict Transport Security),它通过下面这个HTTP Header以及一个预加载的清单,来告知浏览器在和网站进行通信的时候强制性的使用HTTPS,而不是通过明文的HTTP进行通信:

Strict-Transport-Security: max-age=<seconds>; includeSubDomains; preload 

这里的“强制性”表现为浏览器无论在何种情况下都直接向服务器端发起HTTPS请求,而不再像以往那样从HTTP跳转到HTTPS。另外,当遇到证书或者链接不安全的时候,则首先警告用户,并且不再让用户选择是否继续进行不安全的通信。

本地存储数据泄露

以前,对于一个Web应用而言,在前端通过Cookie存储少量用户信息就足够支撑应用的正常运行了。然而随着前后端分离,尤其是后端服务无状态化架构风格的兴起,伴随着SPA应用的大量出现,存储在前端也就是用户浏览器中的数据量也在逐渐增多。

前端应用是完全暴露在用户以及攻击者面前的,在前端存储任何敏感、机密的数据,都会面临泄露的风险,就算是在前端通过JS脚本对数据进行加密基本也无济于事。

举个例子来说明,假设你的前端应用想要支持离线模式,使得用户在离线情况下依然可以使用你的应用,这就意味着你需要在本地存储用户相关的一些数据,比如说电子邮箱地址、手机号、家庭住址等PII(Personal Identifiable Information)信息,或许还有历史账单、消费记录等数据。

尽管有浏览器的同源策略限制,但是如果前端应用有XSS漏洞,那么本地存储的所有数据就都可能被攻击者的JS脚本读取到。如果用户在公用电脑上使用了这个前端应用,那么当用户离开后,这些数据是否也被彻底清除了呢?前端对数据加密后再存储看上去是个防御办法,但其实仅仅提高了一点攻击门槛而已,因为加密所用到的密钥同样存储在前端,有耐心的攻击者依然可以攻破加密这道关卡。

所以,在前端存储敏感、机密信息始终都是一件危险的事情,推荐的做法是尽可能不在前端存这些数据。

缺乏静态资源完整性校验

出于性能考虑,前端应用通常会把一些静态资源存放到CDN(Content Delivery Networks)上面,例如Javascript脚本和Stylesheet文件。这么做可以显著提高前端应用的访问速度,但与此同时却也隐含了一个新的安全风险。

如果攻击者劫持了CDN,或者对CDN中的资源进行了污染,那么我们的前端应用拿到的就是有问题的JS脚本或者Stylesheet文件,使得攻击者可以肆意篡改我们的前端页面,对用户实施攻击。这种攻击方式造成的效果和XSS跨站脚本攻击有些相似,不过不同点在于攻击者是从CDN开始实施的攻击,而传统的XSS攻击则是从有用户输入的地方开始下手的。

防御这种攻击的办法是使用浏览器提供的SRI(Subresource Integrity)功能。顾名思义,这里的Subresource指的就是HTML页面中通过<script><link>元素所指定的资源文件。

每个资源文件都可以有一个SRI值,就像下面这样。它由两部分组成,减号(-)左侧是生成SRI值用到的哈希算法名,右侧是经过Base64编码后的该资源文件的Hash值。

<script src=“https://example.js” integrity=“sha384-eivAQsRgJIi2KsTdSnfoEGIRTo25NCAqjNJNZalV63WKX3Y51adIzLT4So1pk5tX”></script> 

浏览器在处理这个script元素的时候,就会检查对应的JS脚本文件的完整性,看其是否和script元素中integrity属性指定的SRI值一致,如果不匹配,浏览器则会中止对这个JS脚本的处理。

小结

在上一篇和本篇文章中,我们为大家介绍了在开发前端应用的时候容易遇到的8大安全问题,它们是:

  • 老生常谈的XSS
  • 警惕iframe带来的风险
  • 别被点击劫持了
  • 错误的内容推断
  • 防火防盗防猪队友:不安全的第三方依赖包
  • 用了HTTPS也可能掉坑里
  • 本地存储数据泄露
  • 缺乏静态资源完整性校验

我们希望能通过对这些问题的介绍,引起前端开发小伙伴的注意,尽可能提前绕过这些安全问题的坑。

网络安全工程师(白帽子)企业级学习路线

第一阶段:安全基础(入门)

img

第二阶段:Web渗透(初级网安工程师)

img

第三阶段:进阶部分(中级网络安全工程师)

img

学习资源分享

img

img

img

img

img

点这里【领取】或扫描下方二维码可免费领取

点这里【领取】或扫描下方二维码可免费领取

点这里【领取】或扫描下方二维码可免费领取

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangluo12138/article/details/127994581

前端面试(二)前端安全_怀念不能的博客-爱代码爱编程

前端安全 XSS xss: 跨站脚本攻击(Cross Site Scripting)是最常见和基本的攻击 WEB 网站方法,攻击者通过注入非法的 html 标签或者 javascript 代码,从而当用户浏览该网页时,控制用户浏览器。 xss 主要分为三类: 1、DOM xss :  DOM即文本对象模型,DOM通常代表在html、xhtml和xml中

前端安全系列之二:如何防止csrf攻击?_美团技术团队的博客-爱代码爱编程

背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点。在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,又时常遭遇网络劫持、非法调用 Hyb

安全测试===8大前端安全问题(下)_byy0105的博客-爱代码爱编程

在《8大前端安全问题(上)》这篇文章里我们谈到了什么是前端安全问题,并且介绍了其中的4大典型安全问题,本篇文章将介绍剩下的4大前端安全问题,它们分别是: 防火防盗防猪队友:不安全的第三方依赖包 用了HTTPS也可能掉坑

【前端学习笔记】前端安全详解-爱代码爱编程

内容参考来自:掘金-美团技术团队的文章,可以自行搜索。 https://juejin.im/post/5bad9140e51d450e935c6d64 https://juejin.im/post/5bc009996fb9a

web前端安全问题:xss攻击、csrf攻击、点击劫持_yinqian_golang的博客-爱代码爱编程

文章目录 前端有哪些攻击方式?1. XSS攻击XSS 本质原理XSS分类防御 XSS 攻击如何去检测XSS攻击,怎么知道自己的页面是否存在XSS漏洞? 2. CSRF典型的CSRF攻击流程:CSRF的特点如

双扬:一个非典型前端的成长之路-爱代码爱编程

简介:每个人的成长都有自己特殊性和普遍性,希望大家从我「特殊」的境遇之中吸取你认为「普遍」的部分,并化用在自己的日常工作中,全情投入、不设边界,成就属于自己的一番前端旅程。 作者 | 双扬 我是双扬,2014 年校招加入公司,先在阿里巴巴集团数据技术及产品部做了 4 年数据产品业务的前端开发,后转岗到蚂蚁集团体验技术部做起体验数据产品的 ETL

前端的安全性问题-爱代码爱编程

本文将讲述前端的六大安全问题,是平常比较常见的安全问题 1、XSS(Cross-Site Scripting)脚本攻击漏洞; 通过在你的输入文本当中或者这HTML标签当中插入js脚本进行攻击,在每次打开网页的时候就会执行该脚本。 🌰: 用户提交的数据未经处理,直接住注入到动态页面中 留言板内容的提交 利用xss窃取用户名密码 解决办法: XSS攻

前端安全: 如何防止 XSS 攻击?-爱代码爱编程

前端安全: 如何防止 XSS 攻击? 分享简介 今天想分享给大家的是 如何防止 XSS 攻击. 为什么想分享的原因是: 感觉大家对前端安全了解不够, 重视不够. 内容是: 什么是 xss, 常见 xss 的类型. 并且通过小游戏来实践.如何去防止 xss 攻击如何利用 XSS 进行攻击 什么是 XSS 攻击 Cross-Site Scripti

公网Web应用系统安全问题-爱代码爱编程

1. 常见攻击行为 1.1.端口扫描  演示端口扫描工具nmap 1.2.暴力破解 典型场景: 弱口令  1.3.拒绝服务 DoS: Denial of Service Attack DDoS: Distributed Denial of Service Attack    检测本机网络

2022年最新前端面试题(大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪)-爱代码爱编程

HTML和Css部分 1、对BFC规范(块级格式化上下文)的理解 BFC 块级格式化上下文 一块独立的区域,有自己的规则,bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境,保护其中内部元素不受外部影响,也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为vi

安全科普:使用Cookie会导致哪些安全问题?-爱代码爱编程

0x01 Cookie的前世今身 Cookie指某些网站为了辨别用户身份而储存在用户本地客户端上的数据。 因为HTTP协议是不保存用户状态的,这使得用户在交互式的web应用中体验非常差。   在一个网上购物的场景中,用户向购物车添加了一些商品,最后结账时,由于HTTP的无状态性,不通过额外参数,服务器并不知道哪位用户购买了哪些商品。在这种场

【网络安全】---web网络安全总结_巧克力棒~的博客-爱代码爱编程

我们页面常见的web安全问题有: 一、保证我们的前端页面没有漏洞可循 xss跨站点脚本攻击: 不要新人任何用户的输入, 能跟用户产生交互的地方都需要对参数进行转译或者过滤文件上传漏洞攻击: 校验文件格式, 后端限制存放文件路径的权限,限制运行脚本SQL注入攻击: 对用户输入进行转译, 后端采用预编译的sql,不要直接使用前端参数CSRF 跨站请求伪造a