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

date

Nov 15, 2024 02:00 AM

type

status

slug

summary

跨域攻击

现如今的网站应用大都是前后端分离的模式，也有网站内部和其他不同的网络应用沟通的场景，这就出现了跨域的现象。

跨域是什么

跨域是指在一个网站中对另一个域名下的资源进行请求的行为。在浏览器的安全策略中，出于安全性考虑，通常不允许这种跨域请求直接发生，这被称为“同源策略”。为了突破这一限制，开发者可以使用多种跨域技术，如CORS（跨域资源共享）、JSONP等，来实现安全的数据通信。跨域问题在前后端开发中十分常见，合理处理跨域是确保网站功能正常和安全的关键。

示例案例：防护跨域攻击的实现

假设你刚开始搞一个前后端分离的项目，前端在 https://example-frontend.com，后端的 API 服务器跑在 https://api.example-backend.com。为了让它们互相沟通而不被跨域攻击搞崩，你需要做点防护。

1. 使用跨域资源共享（CORS）

首先，你需要在后端给前端开个“绿灯”，让它能正常访问，这就用到了 CORS。简单来说，就是给服务器加个头，告诉它哪些前端是可以被信任的，这样服务器才不会大惊小怪地阻止你的请求。

比如，在 Express.js（Node.js 框架）中，你可以这样搞：

2. 验证请求来源

为了更保险，你还可以检查一下请求头，确认这些请求真的是从你自己的网站来的，而不是别人伪造的。

在 Express.js 中，可以这样实现来源验证：

3. 使用安全令牌（CSRF Token）

接下来，你可以用 CSRF Token 让请求更安全。这个 Token 就像是给每个请求都发了一把独特的“钥匙”，只有拿到正确钥匙的请求才会被服务器接受，避免别人假装是你的网站发请求。

在 Express.js 中，可以这样实现 CSRF 保护：

通过这些实际的代码示例，开发者可以更好地理解和实现防护跨域攻击的措施，以提高网站的安全性。

防护跨域攻击的方法：

使用跨域资源共享（CORS）：配置服务器允许受信任的域名访问资源，确保跨域请求是安全的。

验证请求来源：通过检查请求头中的来源信息，阻止不受信任的请求来源。

使用预检请求：确保敏感操作使用复杂请求，浏览器会自动发送预检请求以验证是否允许跨域操作。

限制Cookie的传输：通过设置SameSite属性来限制跨站点请求中Cookie的使用，降低被滥用的风险。

使用安全令牌：为跨域请求生成独立的安全令牌，以验证请求的合法性并防止CSRF（跨站请求伪造）攻击。

XSS 攻击

XSS（跨站脚本攻击）是一种常见的攻击方式，攻击者通过在网页中注入恶意脚本，使得这些脚本在其他用户的浏览器中执行，从而窃取数据或控制用户的会话。XSS 攻击可以导致用户数据被盗取、用户账户被劫持等严重后果。

XSS 的类型

XSS 通常有以下几种类型：

存储型 XSS：攻击者将恶意脚本存储在目标服务器上，其他用户在访问受感染页面时会自动执行该脚本。

反射型 XSS：恶意脚本作为输入内容的一部分发送到服务器，然后服务器直接将内容返回给用户，导致脚本执行。

DOM 型 XSS：攻击者通过操作页面的 DOM 元素来注入脚本，使得脚本在用户的浏览器中执行。

示例案例：防护 XSS 攻击的实现

为了防护 XSS 攻击，可以采取多种措施，确保用户输入不会被恶意利用。

1. 转义用户输入

为了防止用户输入的内容被直接当作 HTML 或 JavaScript 执行，应该对用户输入进行转义。例如在使用模板引擎时，可以使用自动转义的特性来避免 XSS 漏洞。

在 Express.js 中使用 ejs 作为模板引擎时，默认会对用户输入进行 HTML 转义，防止恶意脚本执行：

2. 使用内容安全策略（CSP）

CSP 可以通过限制页面可以加载哪些资源（例如脚本、样式、图片等），有效地防止 XSS 攻击。通过配置 CSP，开发者可以指定哪些资源是可信任的。

在 Express.js 中，可以使用 helmet 中间件来设置 CSP：

如果你是next.js这种全栈开发框架，可以通过配置文件设置http响应头。例如下面的例子

3. 输入验证和过滤

确保对用户输入的数据进行严格的验证和过滤，避免用户提交恶意内容。可以使用一些常见的库来进行输入验证，例如 express-validator。

防护 XSS 攻击的方法总结

转义用户输入：对所有用户输入进行转义，确保特殊字符不会被当作代码执行。

使用内容安全策略（CSP）：通过设置 CSP 来限制页面可以加载的资源，降低 XSS 攻击的风险。

输入验证和过滤：对所有用户输入进行验证，确保它们符合预期的格式，避免恶意脚本注入。

避免使用 eval：在 JavaScript 代码中避免使用 eval，因为它可能导致代码注入漏洞。

通过这些措施，开发者可以显著降低 XSS 攻击的风险，确保用户数据和网站安全。XSS 攻击的防护需要开发者在处理用户输入时保持谨慎，任何未经处理的用户输入都可能成为攻击的入口。