前端常见的安全问题及防范措施

2024-03-25 12:52

本文主要是介绍前端常见的安全问题及防范措施,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端常见的安全问题及防范措施

  • 前端常见的安全问题及防范措施
    • 前言
    • 跨站脚本攻击(XSS)
      • 反射型XSS
      • DOM型XSS
      • 存储型XSS攻击
      • 这几种XSS攻击类型的区别
      • 防范措施
        • 通用措施
        • 预防存储型和反射型 XSS 攻击
        • 预防 DOM 型 XSS 攻击
    • 跨站请求伪造(CSRF)
      • GET类型的CSRF
      • POST类型的CSRF
      • 链接类型的CSRF
      • CSRF的特点
      • CSRF防范措施
        • 同源检测
        • CSRF Token
        • 给 Cookie 设置合适的 SameSite
    • 点击劫持(Click Jacking)
      • 攻击原理
      • 防范措施
    • CDN劫持
      • CDN原理
      • 什么是CDN劫持?
      • CDN劫持防范措施
        • 使用SRI来解决CDN劫持
    • 项目中如何预防安全问题?
    • 参考

前端常见的安全问题及防范措施

前言

随着互联网的高速发展,信息安全问题已经成为行业最为关注的焦点之一。总的来说安全是很复杂的一个领域,在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,还时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。这篇文章会介绍一些常见的安全问题及如何防范的内容,在当下其实安全问题越来越重要,已经逐渐成为前端开发必备的技能了。

跨站脚本攻击(XSS)

Cross-Site Scripting(跨站脚本攻击)简称 XSS,是一种代码注入攻击。攻击者通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,但实际上也可以包括Java、VBScript、ActiveX、Flash或者甚至是普通的HTML。攻击成功后,攻击者可能得到包括但不限于更高的权限(如执行一些操作)、私密网页内容、会话和cookie等各种内容。

为了和 CSS 区分,这里把攻击的第一个字母改成了 X,于是叫做 XSS。

一般可以通过三种方式来注入恶意脚本:

  1. 反射型XSS
  2. DOM型XSS
  3. 存储型XSS

反射型XSS

当用户点击一个恶意链接,或者提交一个表单,或者进入一个恶意网站时,注入脚本进入被攻击者的网站。Web服务器将注入一个脚本,比如一个错误信息、搜索结果等,未进行过滤直接返回到用户的浏览器上。一般发生在前后端一体的应用中,服务端逻辑会改变最终的网页代码。

反射型 XSS 的攻击步骤:

  1. 攻击者构造出特殊的 URL,其中包含恶意代码。
  2. 用户打开带有恶意代码的 URL 时,网站服务端将恶意代码从 URL 中取出,拼接在 HTML 中返回给浏览器。
  3. 用户浏览器接收到响应后解析执行,混在其中的恶意代码也被执行。
  4. 恶意代码窃取用户数据并发送到攻击者的网站,或者冒充用户的行为,调用目标网站接口执行攻击者指定的操作。

DOM型XSS

DOM 型 XSS 攻击,实际上就是前端 JavaScript 代码不够严谨,把不可信的内容插入到了页面。我们知道,网页本身的 JavaScript 也是可以改变 HTML 的,黑客正是利用这一点来实现插入恶意脚本。

基于DOM 的 XSS 攻击步骤:

  1. 攻击者构造出特殊的 URL,其中包含恶意代码。
  2. 用户打开带有恶意代码的 URL。
  3. 用户浏览器接收到响应后解析执行,前端 JavaScript 取出 URL 中的恶意代码并执行。
  4. 恶意代码窃取用户数据并发送到攻击者的网站,或者冒充用户的行为,调用目标网站接口执行攻击者指定的操作。

存储型XSS攻击

又叫持久型 XSS,顾名思义,黑客将恶意 JavaScript 脚本长期保存在目标服务器中,用户一旦访问相关页面数据,恶意脚本从服务器传回并执行。常见于搜索、微博、社区贴吧评论等。

存储型 XSS 的攻击步骤:

  1. 攻击者将恶意代码提交到目标网站的数据库中。
  2. 用户打开目标网站时,网站服务端将恶意代码从数据库取出,拼接在 HTML 中返回给浏览器。
  3. 用户浏览器接收到响应后解析执行,混在其中的恶意代码也被执行。
  4. 恶意代码窃取用户数据并发送到攻击者的网站,或者冒充用户的行为,调用目标网站接口执行攻击者指定的操作。

存储型XSS攻击的原因仍然是没有做好数据过滤:

  • 前端提交数据至服务端时,没有做好过滤;
  • 服务端在接受到数据时,在存储之前,没有做过滤;
  • 前端从服务端请求到数据,没有过滤输出。

这几种XSS攻击类型的区别

  • 反射型的 XSS 的恶意脚本存在 URL 里,存储型 XSS 的恶意代码存在数据库里。
  • 反射型 XSS攻击常见于通过 URL 传递参数的功能,如网站搜索、跳转等。
  • 存储型XSS攻击常见于带有用户保存数据的网站功能,如论坛发帖、商品评论、用户私信等。
  • 而基于DOM的XSS 攻击中,取出和执行恶意代码由浏览器端完成,属于前端 JavaScript 自身的安全漏洞,其他两种 XSS 都属于服务端的安全漏洞。

防范措施

由上面对XSS攻击的介绍我们知道,XSS攻击主要有两大步骤:

  1. 攻击者提交恶意代码
  2. 浏览器执行恶意代码

所以我们可以针对这两点来制定防范措施。

通用措施
  • 输入检查和过滤:对所有用户输入进行严格的检查和过滤,防止恶意代码注入。这包括对表单输入、URL参数、Cookie等进行检查。确保不允许直接在页面上输出用户提交的数据,特别是在HTML中,应该对特殊字符进行转义。在用户提交时,由前端过滤输入,然后提交到后端,这种方法不可行,因为攻击者可能绕过前端过滤,直接构造请求,提交恶意代码。一般在写入数据库前,后端对输入数据进行过滤。虽然输入侧过滤能够在某些情况下解决特定的 XSS 问题,但会引入很大的不确定性和乱码问题。在防范 XSS 攻击时应避免此类方法。

  • 使用POST代替GET:因为GET请求会将数据放在URL中,容易被恶意用户利用来执行XSS攻击。而POST请求则将数据放在请求体中,更安全。

  • 避免直接在Cookie中泄露用户隐私:比如email、密码等。其次通过使cookie和系统ip绑定来降低cookie泄露后的危险。

  • 验证码:防止脚本冒充用户提交危险操作。

  • 使用HTTPOnly标记来限制cookie的访问,防止cookie被盗用:当用户的登录凭证存储于服务器的 session 中,而在浏览器中是以 cookie 的形式存储的。很多XSS攻击目标都是窃取用户cookie伪造身份认证。可以通过在 cookie 中设置 HttpOnly 属性,js脚本将无法读取到 cookie 信息。

    cookies.set(name, value, {httpOnly: true // 默认为 true
    })
    
  • 内容安全策略(CSP):防XSS等攻击的利器。CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的可信主机。

    • 通过 HTTP 头信息的Content-Security-Policy的字段
      //该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
      Content-Security-Policy: script-src 'self' https://apis.example.com
      
    • 通过网页的标签
      //该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
      <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.example.com">
      

针对不同类型的XSS攻击的防范。👇

预防存储型和反射型 XSS 攻击
  1. 改成纯前端渲染,把代码和数据分隔开。
  2. 对 HTML 做充分转义。
预防 DOM 型 XSS 攻击

DOM 型 XSS 攻击,实际上就是网站前端 JavaScript 代码本身不够严谨,把不可信的数据当作代码执行了。

在使用 .innerHTML、.outerHTML、document.write() 时要特别小心,不要把不可信的数据作为 HTML 插到页面上,而应尽量使用 .textContent、.setAttribute() 等。

如果用 Vue/React 技术栈,并且不使用 v-html/dangerouslySetInnerHTML 功能,就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

DOM 中的内联事件监听器,如 location、onclick、onerror、onload、onmouseover 等,<a> 标签的 href 属性,JavaScript 的 eval()、setTimeout()、setInterval() 等,都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API,很容易产生安全隐患,请务必避免。

跨站请求伪造(CSRF)

跨站请求伪造(CSRF)是一种黑客攻击技术,攻击者通过伪装来自受信任的用户的请求来攻击受信任的网站,利用网站对于用户网页浏览器的信任,挟持用户当前已登陆的Web应用程序,去执行并非用户本意的操作。

典型的CSRF攻击是这样的:

  1. 受害者登录A网站,并且保留了登录凭证(Cookie)。
  2. 攻击者通过在A网站中添加图片链接等方式引诱受害者访问B网站。
  3. B网站向A网站发送了一个请求(这个就是下面将介绍的几种伪造请求的方式),浏览器请求头中会默认携带 A 网站的 Cookie。
  4. A网站服务器收到请求后,经过验证发现用户是登录了的,所以会处理请求。

常见的CSRF攻击类型👇

GET类型的CSRF

GET类型的CSRF利用非常简单,只需要一个HTTP请求,一般会这样利用:

 <img src="http://bank.example/withdraw?amount=10000&for=hacker" > 

在受害者访问含有这个img的页面后,浏览器会自动向http://bank.example/withdraw?account=xiaoming&amount=10000&for=hacker发出一次HTTP请求。bank.example就会收到包含受害者登录信息的一次跨域请求。

POST类型的CSRF

这种类型的CSRF利用起来通常使用的是一个自动提交的表单,如:

 <form action="http://bank.example/withdraw" method=POST><input type="hidden" name="account" value="xiaoming" /><input type="hidden" name="amount" value="10000" /><input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script> 

访问该页面后,表单会自动提交,相当于模拟用户完成了一次POST操作。

POST类型的攻击通常比GET要求更加严格一点,但仍并不复杂。任何个人网站、博客,被黑客上传页面的网站都有可能是发起攻击的来源,后端接口不能将安全寄托在仅允许POST上面。

链接类型的CSRF

链接类型的CSRF并不常见,比起其他两种用户打开页面就中招的情况,这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片中嵌入恶意链接,或者以广告的形式诱导用户中招,攻击者通常会以比较夸张的词语诱骗用户点击。

<a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">重磅消息!!
<a/>

CSRF的特点

  1. 攻击一般发起在第三方网站,而不是被攻击的网站。被攻击的网站无法防止攻击发生。
  2. 攻击利用受害者在被攻击网站的登录凭证,冒充受害者提交操作,而不是直接窃取数据。
  3. 整个过程攻击者并不能获取到受害者的登录凭证,仅仅是“冒用”。
  4. 跨站请求可以用各种方式:图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中,难以进行追踪。

CSRF防范措施

由上面对CSRF的介绍我们知道了:

  1. CSRF通常发生在第三方域名
  2. CSRF攻击者不能获取到受害者的cookie等信息,只是借用他们的登录状态来伪造请求。

所以我们可以针对这两点来制定防范措施。

同源检测

既然CSRF大多来自第三方网站,那么我们就直接禁止第三方域名(或者不受信任的域名)对我们发起请求。

在HTTP协议中,每一个异步请求都会携带两个Header,用于标记来源域名:

  • Origin Header
  • Referer Header

这两个Header在浏览器发起请求时,大多数情况会自动带上,并且不能由前端自定义内容。 服务器可以通过解析这两个Header中的域名,确定请求的来源域。同时服务器应该优先检测 Origin。为了安全考虑,相比于 Referer,Origin 只包含了域名而不带路径。

此种方法成本最低,但是并不能保证 100% 有效,因为服务器并不是什么时候都能取到 Referer,而且低版本的浏览器存在伪造 Referer 的风险。

CSRF Token

在浏览器向服务器发起请求时,服务器生成一个CSRF Token。CSRF Token 其实就是服务器生成的随机字符串,然后将该字符串植入到返回的页面中,通常是放到表单的隐藏输入框中,这样能够很好的保护CSRF Token 不被泄漏。

当浏览器再次发送请求的时候,就需要携带这个CSRF Token 值一起提交。

服务器验证 CSRF Token 是否一致;从第三方网站发出的请求是无法获取用户页面中的 CSRF Token 值的。

给 Cookie 设置合适的 SameSite

当从 A 网站登录后,会从响应头中返回服务器设置的 Cookie 信息,而如果 Cookie 携带了 SameSite=strict 则表示完全禁用第三方站点请求头携带 Cookie,比如当从 B 网站请求 A 网站接口的时候,浏览器的请求头将不会携带该 Cookie。

Samesite有3种模式:

  1. Strict:这种称为严格模式,表明这个 Cookie 在任何情况下都不可能作为第三方 Cookie。
  2. Lax:这种称为宽松模式,比 Strict 放宽了点限制:假如这个请求是这种请求(改变了当前页面或者打开了新页面)且同时是个GET请求,则这个Cookie可以作为第三方Cookie。(默认)。
  3. None:任何情况下都会携带。

点击劫持(Click Jacking)

点击劫持(click hijacking)也称为 UI 覆盖攻击,是一种通过视觉欺骗的手段来达到攻击目的手段。

攻击者将目标网站通过 iframe 嵌入到自己的网页中,通过 opacity 等手段设置 iframe 为透明的,使得肉眼不可见,这样一来当用户在攻击者的网站中操作的时候,比如点击某个按钮(这个按钮的顶层其实是 iframe),从而实现目标网站被点击劫持。

攻击原理

  1. 攻击者构建了一个非常有吸引力的网页。
  2. 将被攻击的页面放置在当前页面的 iframe 中。
  3. 使用样式将 iframe 叠加到非常有吸引力内容的上方。
  4. 将iframe设置为100%透明。
  5. 用户在不知情的情况下点击按钮,触发执行一些其他命令。

防范措施

  • 在HTTP投中加入 X-FRAME-OPTIONS 属性,此属性控制页面是否可被嵌入 iframe 中。

    • DENY:不能被所有网站嵌套或加载;
    • SAMEORIGIN:只能被同域网站嵌套或加载;
    • ALLOW-FROM URL:可以被指定网站嵌套或加载。
  • 判断当前页面是否被嵌入到 iframe 中。

    if(top.location != self.location){top.location = window.location;
    }
    

CDN劫持

CDN原理

Content Delivery Network,内容分发网络。具体来说,CDN就是采用更多的缓存服务器(CDN边缘节点),布放在用户访问相对集中的地区或网络中。当用户访问网站时,利用全局负载技术,将用户的访问指向距离最近的缓存服务器上,由缓存服务器响应用户请求。(有点像电商的本地仓吧?)CDN应用广泛,支持多种行业、多种场景内容加速,例如:图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速。

什么是CDN劫持?

网络上有很多黑客为了让用户能够登录自己开发的钓鱼网站,都会通过对CDN进行劫持的方法,让用户自动转入自己开发的网站。而很多用户却往往无法察觉到自己已经被劫持。其实验证被劫持的方法,就是输入任何网址看看所打开的网页是否和自己输入的网址一致。

CDN劫持防范措施

使用SRI来解决CDN劫持

SRI 全称 Subresource Integrity,子资源完整性,是指浏览器通过验证资源的完整性(通常从 CDN 获取)来判断其是否被篡改的安全特性。

通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能,比如:

<script type="text/javascript" src="//s.url.cn/xxxx/aaa.js" integrity="sha256-xxx sha384-yyy"crossorigin="anonymous"></script>

integrity 值分成两个部分,第一部分指定哈希值的生成算法(sha256、sha384 及 sha512),第二部分是经过 base64 编码的实际哈希值,两者之间通过一个短横(-)分割。integrity 值可以包含多个由空格分隔的哈希值,只要文件匹配其中任意一个哈希值,就可以通过校验并加载该资源。

开启 SRI 能有效保证页面引用资源的完整性,避免恶意代码执行。

浏览器如何处理 SRI?

当浏览器在 script 或者 link 标签中遇到 integrity 属性之后,会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。

当脚本或者样式表的哈希值和期望的不一致时,浏览器必须拒绝执行脚本或者应用样式表,并且必须返回一个网络错误说明获得脚本或样式表失败。

项目中如何预防安全问题?

  • 强化安全意识:在项目启动阶段,就需要强调安全问题的重要性,强化所有项目成员的安全意识。让每个人都明白自己在保障项目安全方面的责任,并积极参与到安全工作中来。

  • 建立安全管理制度:制定一套完善的安全管理制度,明确各项安全管理要求和标准。包括安全培训制度、安全操作规程、安全检查制度等,确保每个环节都得到有效管理。

  • 实施安全性设计:从设计阶段开始,就需要注意安全性设计。遵循安全性设计原则和标准,考虑可能出现的攻击和漏洞,采取相应的防范措施。同时,需要加强数据加密、访问控制、权限管理等关键环节的安全性设计。

  • 加强代码审查:建立代码审查机制,确保代码质量和安全性。通过定期的代码审查,可以发现并纠正潜在的安全漏洞和错误。同时,需要关注最新的安全漏洞和补丁,及时修复和升级系统。

  • 实施安全培训:对项目成员进行安全培训,提高他们的安全意识和技能。培训内容包括安全基础知识、安全漏洞防范、应急响应等。定期组织安全培训和演练,增强项目成员的安全意识和应对能力。

  • 建立安全测试机制:在项目开发过程中,建立安全测试机制。包括安全性测试、可靠性测试、性能测试等。通过模拟各种攻击场景和漏洞利用方式,发现并修复潜在的安全问题。同时,需要关注最新的漏洞利用方式和攻击手段,及时调整测试策略。

  • 做好数据保护:保护项目中的敏感数据是预防安全问题的关键之一。采取加密、访问控制、数据备份等措施,确保数据的机密性和完整性。同时,需要关注数据的安全审计和监控,及时发现并应对数据安全事件。

  • 定期审查和更新:定期审查和更新项目的安全策略和流程,以适应新的安全威胁和业务需求。同时,需要关注最新的安全漏洞和补丁,及时修复和升级系统。

参考

  1. 前端常见的安全问题及防范措施
  2. 在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施

这篇关于前端常见的安全问题及防范措施的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/845076

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

客户案例:安全海外中继助力知名家电企业化解海外通邮困境

1、客户背景 广东格兰仕集团有限公司(以下简称“格兰仕”),成立于1978年,是中国家电行业的领军企业之一。作为全球最大的微波炉生产基地,格兰仕拥有多项国际领先的家电制造技术,连续多年位列中国家电出口前列。格兰仕不仅注重业务的全球拓展,更重视业务流程的高效与顺畅,以确保在国际舞台上的竞争力。 2、需求痛点 随着格兰仕全球化战略的深入实施,其海外业务快速增长,电子邮件成为了关键的沟通工具。

安全管理体系化的智慧油站开源了。

AI视频监控平台简介 AI视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒,省去繁琐重复的适配流程,实现芯片、算法、应用的全流程组合,从而大大减少企业级应用约95%的开发成本。用户只需在界面上进行简单的操作,就可以实现全视频的接入及布控。摄像头管理模块用于多种终端设备、智能设备的接入及管理。平台支持包括摄像头等终端感知设备接入,为整个平台提