前端面试常见的安全问题(面试必备)

这篇文章会介绍一些常见的安全问题及如何防范的内容,在当下其实安全问题越来越重要,已经逐渐成为前端开发必备技能。 

跨站脚本攻击(XSS)

跨站脚本攻击(Cross-Site Scripting,XSS)是一种常见的网络安全漏洞和攻击技术,它允许攻击者将恶意代码注入到网页中,然后这些恶意代码会在受害者的浏览器上执行。XSS攻击的目标是获取用户的敏感信息,如会话令牌、登录凭据、cookie,或者是劫持用户的会话,以执行未经授权的操作。

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

XSS攻击三种主要类型

存储型XSS攻击:

攻击者将恶意脚本存储在服务器上,当用户访问包含这些脚本的页面时,恶意脚本会从服务器上加载并在用户浏览器上执行。

反射型XSS攻击:

在这种攻击中,恶意脚本通过伪装成合法的URL参数传递给目标网页。一旦用户点击了包含这个恶意参数的链接,脚本就会在用户浏览器上执行。

DOM型XSS攻击:

这种攻击方式不会涉及服务器,而是通过修改网页的DOM结构来注入恶意脚本。当用户浏览器解析网页时,这些脚本会被执行。

防止XSS攻击措施

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

  • 攻击者提交恶意代码
  • 浏览器执行恶意代码

针对这两点来制定防范措施:

输入验证和过滤

在用户提交时,由前端过滤输入,然后提交到后端,这种方法不可行,因为攻击者可能绕过前端过滤,直接构造请求,提交恶意代码。一般在写入数据库前,后端对输入数据进行过滤。虽然输入侧过滤能够在某些情况下解决特定的 XSS 问题,但会引入很大的不确定性和乱码问题。在防范 XSS 攻击时应避免此类方法。

输出编码

在将用户输入的数据输出到网页上时,使用适当的编码方式,如HTML编码或JavaScript编码,以防止恶意脚本执行。

内容安全策略(CSP)

CSP是额外的安全层,用于检测并削弱某些特定类型的攻击。

严格的 CSP 在 XSS 的防范中可以起到以下的作用:

  • 禁止加载外域代码,防止复杂的攻击逻辑。
  • 禁止外域提交,网站被攻击后,用户的数据不会泄露到外域。
  • 禁止内联脚本执行(规则较严格,目前发现 GitHub 使用)。
  • 禁止未授权的脚本执行(新特性,Google Map 移动版在使用)。
  • 合理使用上报可以及时发现 XSS,利于尽快修复问题。
用法

配置你的网络服务器返回 Content-Security-Policy HTTP 标头

Content-Security-Policy: policy

<meta> 元素也可以被用来配置该策略

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

 

跨站请求伪造(CSRF)

跨站请求伪造(Cross-Site Request Forgery,CSRF)是一种网络攻击,它利用了用户已经在某个网站上进行了身份验证的情况下,通过伪装的请求来执行未经用户授权的操作。攻击者通常利用用户的会话信息(如Cookie)来伪造请求,从而让用户在不知情的情况下执行恶意操作。

以下是CSRF攻击的一般工作流程:

  1. 用户已经在一个网站上登录,获取了有效的会话凭据(如Cookie)。
  2. 攻击者创建一个伪造的网页,其中包含目标网站的请求,但是这些请求被伪装成正常的操作,例如点击按钮、加载图片等。
  3. 攻击者将伪造的网页诱使用户访问,使用户的浏览器发送请求到目标网站,携带了用户的会话信息。
  4. 目标网站接收到请求后,由于用户已经登录,会认为这是一个合法请求,并执行相应的操作,而用户并不知情。

跨站请求伪造示例

一个简单的CSRF攻击示例,以帮助您理解这种类型的攻击:

背景信息:
假设有一个在线银行应用程序,用户可以在其中进行转账操作。用户已经登录到他们的银行帐户,会话令牌存储在他们的Cookie中。

攻击示例:
攻击者知道银行应用程序的转账功能是通过以下URL来执行的:https://www.examplebank.com/transfer?to=attacker&amount=1000

攻击者创建了一个恶意网站,其中包含以下HTML代码:

<!DOCTYPE html>
<html>
<head>
    <title>恶意网站</title>
</head>
<body>
    <h1>点击下面的按钮获得免费礼物:</h1>
    <img src="https://www.examplebank.com/transfer?to=attacker&amount=1000" alt="免费礼物" id="giftImage">
    <script>
        document.getElementById("giftImage").click();
    </script>
</body>
</html>

攻击者将这个恶意网站链接发送给银行的用户,或者通过社交工程手段诱使用户点击该链接。用户在点击链接后,将被重定向到银行的转账页面,并且由于用户已经登录,会话Cookie会随请求一起发送。

银行应用程序不会验证请求是否来自合法的来源,因为攻击者伪装成了用户的请求。结果,银行将执行该请求,将1000单位的资金转移到攻击者指定的帐户中,而用户并不知情。

CSRF的特点

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

防止CSRF攻击措施

为了防止CSRF攻击,开发者可以采取以下措施:

  • 使用CSRF令牌:为每个请求生成一个随机的CSRF令牌,并将该令牌与用户的会话相关联。在每次请求中,都需要包含这个CSRF令牌,并且服务器会验证令牌的有效性。这样可以确保只有拥有有效令牌的请求才会被执行。
  • 验证HTTP Referer头:服务器可以检查请求的HTTP Referer头,确保请求是从合法的来源发出的。但要注意,这个方法可能不够安全,因为攻击者可以伪装Referer头。
  • 防止跨域请求:通过实施跨域请求策略(Cross-Origin Resource Sharing,CORS)来限制来自其他域的请求。这可以通过设置合适的CORS头来实现。
  • 使用SameSite Cookie属性:SameSite Cookie属性可以限制Cookie是否可以随着跨站请求一起发送。将Cookie标记为SameSite可以在一定程度上减少CSRF攻击的风险。

点击劫持(ClickJacking)

点击劫持(Clickjacking)是一种网络攻击技术,也被称为UI劫持(UI Redressing)。它的目标是欺骗用户点击一个看似无害的界面元素(如按钮、链接、图像等),实际上却在背后执行恶意操作,而用户并不知情。

点击劫持攻击通常通过以下方式实施:

  1. 攻击者创建一个恶意网站或者篡改一个合法网站,将目标网站嵌入到一个透明的iframe中,通常是将目标网站的界面元素完全或部分覆盖。

  2. 然后,攻击者诱使用户访问这个恶意网站。

  3. 用户在看到恶意网站的外观和交互元素时,可能会误以为他们在与目标网站进行交互,而实际上他们的点击和操作都会被传递到隐藏的目标网站上。

  4. 用户可能会不知情地执行一些敏感操作,如提交表单、更改密码、进行付款或执行其他未经授权的操作。

点击劫持攻击的成功在于用户被欺骗,以为他们在与一个合法的网站进行互动,而实际上他们的操作被导向了攻击者指定的操作,从而可能导致数据泄露、帐户被滥用或其他安全问题。

点击劫持防范措施

为了防止点击劫持攻击,网站开发者可以采取以下措施:

  • X-Frame-Options 头: 使用X-Frame-Options HTTP响应头,可以控制网页是否可以嵌套到iframe中,从而防止被点击劫持。这个头可以设置为DENY(完全禁止嵌套)或SAMEORIGIN(只允许相同域名的嵌套)。
    • DENY:不能被所有网站嵌套或加载;
    • SAMEORIGIN:只能被同域网站嵌套或加载;
    • ALLOW-FROM URL:可以被指定网站嵌套或加载。
  • Content Security Policy(CSP): 在CSP策略中,可以通过设置frame-ancestors指令来限制哪些网站可以嵌套当前网页。

HTTP严格传输安全(HSTS)

HTTP严格传输安全(HTTP Strict Transport Security,HSTS)是一种网络安全策略,旨在增强网站的安全性,特别是针对恶意的中间人攻击,例如SSL剥离攻击。HSTS要求客户端(通常是Web浏览器)始终通过HTTPS协议与服务器通信,而不是通过不安全的HTTP。


HSTS代表HTTP严格传输安全性,由IETF在2012年的RFC 6797中指定。创建它是为了在站点通过HTTPS运行时强制浏览器使用安全连接。它是您添加到Web服务器的安全标头,并在响应标头中反映为Strict-Transport-Security。HSTS很重要,因为它解决了以下问题:

  • 访问者尝试使用您网站页面的不安全版本 (HTTP://) 的任何尝试都将自动转发到安全版本 (HTTPS://)。
  • 旧的HTTP书签和输入您网站的HTTP版本的人会让您面临中间人攻击。在这些攻击中,攻击者改变各方之间的通信并诱使他们认为他们仍在相互通信。
  • 不允许覆盖无效的证书消息,这反过来又保护了访问者。
  • Cookie劫持:当有人通过不安全的连接窃取会话cookie时,就会发生这种情况。Cookie可以包含各种有价值的信息,例如信用卡信息、姓名、地址等。

HSTS的主要优点

  • 通过强制使用HTTPS,可以防止中间人攻击,如SSL剥离攻击。
  • 提供了一种可靠的方式来强制网站在安全连接上进行通信,保护用户数据和隐私。
  • 防止用户在意外或故意情况下切换到不安全的HTTP连接。

但要注意,一旦服务器启用了HSTS策略,除非它自己也启用了HTTPS,否则它将无法通过HTTP进行访问。因此,在启用HSTS之前,服务器管理员需要确保其服务器配置正确并支持HTTPS。如果配置不正确,可能会导致网站无法访问。

CDN劫持

CDN原理

CDN劫持是一种网络攻击,攻击者通过劫持内容分发网络(Content Delivery Network,CDN)上的内容,来获取用户的数据或执行恶意操作。CDN是一种用于提高网站性能和可用性的服务,通过将网站的静态资源(如图像、CSS文件、JavaScript文件等)缓存在全球分布的服务器上,以减少这些资源的加载时间和减轻源服务器的负担。

CDN劫持的途径

  1. 篡改内容: 攻击者可能会入侵CDN的一部分,或者通过一些技术手段,来替换CDN上的静态资源。这可以包括在图片、CSS文件或JavaScript文件中嵌入恶意代码,或者替换原始资源文件。

  2. DNS劫持: 攻击者可以通过劫持域名系统(DNS)来将CDN的域名解析到自己控制的恶意服务器上。这样,用户的请求将被重定向到攻击者的服务器,而不是CDN服务器。

  3. 中间人攻击: 攻击者可能利用中间人位置,拦截用户与CDN服务器之间的通信,然后篡改或替换数据传输,以执行恶意操作。

CDN劫持的危险在于它可以影响到大量的用户,因为CDN通常用于分发大量流行网站的内容。攻击者可以通过CDN劫持来传播恶意软件、窃取用户的敏感信息(如登录凭据或会话令牌)或进行其他恶意活动。

防止CDN劫持的措施

  1. 加密通信: 使用HTTPS来加密用户与CDN之间的通信,以确保数据的机密性和完整性。

  2. DNSSEC: 使用DNSSEC(域名系统安全扩展)来保护DNS记录,防止DNS劫持。

  3. 内容完整性检查: CDN服务提供商可以实施内容完整性检查,以确保通过CDN传输的内容没有被篡改。通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能,比如

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

内容安全策略(CSP)

内容安全策略(CSP)是一个额外的安全层,用于检测并削弱某些特定类型的攻击,包括跨站脚本(XSS)和数据注入攻击等。无论是数据盗取、网站内容污染还是恶意软件分发,这些攻击都是主要的手段。

安全沙箱(Sandbox)

多进程的浏览器架构将主要分为两块:浏览器内核和渲染内核。而安全沙箱能限制了渲染进程对操作系统资源的访问和修改,同时渲染进程内部也没有读写操作系统的能力,而这些都是在浏览器内核中一一实现了,包括持久存储、网络访问和用户交互等一系列直接与操作系统交互的功能。浏览器内核和渲染内核各自职责分明,当他们需要进行数据传输的时候会通过 IPC 进行。

Iframe

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

 如何让自己的网站不被其他网站的iframe引用?

js的防御方案:将下面这段代码放到网站页面的</body>标签前,这样别人在通过iframe框架引用你的网站网页时,浏览器会自动跳转到你的网站所引用的页面上。

<script>
if (self == top) {
    var theBody = document.getElementsByTagName('body')[0];
    theBody.style.display = "block";
} else {
    top.location = self.location;
}
</script>

使用X-Frame-Options防止网页被iframe:X-FRAME-OPTIONS是微软提出的一个http头,专门用来防御利用iframe嵌套的点击劫持攻击。

DENY               // 拒绝任何域加载
SAMEORIGIN         // 允许同源域下加载
ALLOW-FROM         // 可以定义允许frame加载的页面地址
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ikkkp

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值