功能性的安全保障：输入校验

前言

在软件开发过程中，确保系统的安全性是至关重要的一环。它不仅关乎保护用户数据的完整性和隐私性，也是维护系统稳固运行的基石。我以为，从宏观角度审视，软件开发的安全性保障主要可分为两大类：功能性的安全性保障和系统性的安全性校验。
功能性的安全性保障专注于应用程序层面，它着眼于那些直接影响用户数据和交互过程安全的特性。这些特性是构建用户信托和保障数据安全的关键。
而系统性的安全性校验则放眼于更为广阔的视角，它涵盖了整个系统架构和网络层面，确保从服务器到网络的每一环节都具备足够的防御能力，以抵御各种潜在的攻击。
在之前 功能性的安全性保障：实现逼迫登录和密码加密功能 和 功能性的安全性保障：TOKEN鉴权校验 两文里。我们分别讨论了功能性的安全性保障中的几个核心议题：身份验证和密码加密、TOKEN鉴权校验和认证。在本文中，我们仍旧继续功能性的安全性保障这个话题，通过对概念的细致解读、实施策略的全面分析，以及现实代码实现的展示，深入讨论其中的别的一个核心议题：输入校验。
1. 怎么控制输入校验

输入校验，一般是对用户输入举行验证，比说文本框输入、图片文件上传、地点输入等。防止出现SQL注入、跨站脚本（XSS）等攻击。
2. 什么是XSS？

XSS（Cross-Site Scripting），跨站脚本攻击，是一种常见的网络安全漏洞，主要情势是攻击者将恶意脚本注入到用户浏览的页面中。这种攻击通常发生在当一个网站答应用户输入未经适当处理的数据到页面时。XSS攻击的影响范围较广，常常被用来盗取用户Cookie、会话劫持、访问敏感数据、冒充用户实行操纵、传播恶意软件等。
3. 代码实现：简单模仿XSS攻击

3.1 前端代码实现

这里书接上文，将 MePage.vue 的 个人简介输入框改成TXT文件上传组件。模仿简单的恶意的TXT文件上传导致系统被攻击的场景。

1. <!-- MePage.vue -->
2. <template>
3.   <div class="me">
4.     <el-form :model="user" label-width="auto" style="max-width: 600px" enctype="multipart/form-data">
5.       <el-form-item label="头像">
6.         <el-upload
7.             class="avatar-uploader"
8.             :action="uploadUrl"
9.             accept="image/*"
10.             :show-file-list="false"
11.             :before-upload="beforeUpload"
12.             :on-success="handleSuccess"
13.             :on-error="handleError"
14.             :on-change="handleFileChange"
15.         >
16.           <img v-if="imageUrl" style="height: 200px; width: 200px" alt="头像" class="avatar" :src="imageUrl"/>
17.           <el-icon class="avatar-uploader-icon" v-else-if="!islook"/>
18.         </el-upload>
19.       </el-form-item>
20.       <el-form-item label="用户名">
21.         <el-input v-model="user.username"/>
22.       </el-form-item>
23.       <el-form-item label="性别">
24.         <el-input v-model="user.sex"/>
25.       </el-form-item>
26.       <el-form-item label="年龄">
27.         <el-input v-model="user.age"/>
28.       </el-form-item>
29.       <el-form-item label="邮箱">
30.         <el-input v-model="user.mailbox"/>
31.       </el-form-item>
32.       <el-form-item label="个人简介">
33.         <el-input v-html="user.introduce"/>
34.         <el-upload
35.             :action="uploadTextUrl"
36.             accept=".txt"
37.             :show-file-list="false"
38.             :on-success="handleTextSuccess"
39.             :on-error="handleTextError">
40.           <el-button type="primary" style="margin-top: 10px;">上传TXT文件</el-button>
41.         </el-upload>
42.       </el-form-item>
43.     </el-form>
44.   </div>
45. </template>
47. <script>
48. import axios from 'axios';
49. import {ElMessage} from 'element-plus';
51. export default {
52.   name: 'MePage',
53.   data() {
54.     return {
55.       user: {
56.         userId: '',
57.         sex: '',
58.         age: '',
59.         mailbox: '',
60.         username: '',
61.         introduce: '',
62.         headPortrait: ''
63.       },
64.       uploadUrl: 'http://localhost:8081/upload/avatar',
65.       uploadTextUrl: 'http://localhost:8081/upload/introduce',
66.       islook: false,
67.       imgUrl: '../assets/logo.png',
68.       imageUrl: ''
69.     }
70.   },
71.   components: {},
72.   created() {
73.     this.getuser();
74.   },
75.   methods: {
76.     getuser() {
77.       const token = localStorage.getItem('token');
78.       console.log('token:', token);
79.       if (!token) {
80.         ElMessage.error('请先登录');
81.         this.$router.push('/login');
82.       }
83.       axios.get('http://localhost:8081/user/getById?userId=123', {headers: {Authorization: `Bearer ${token}`}}).then(response => {
84.         console.log('服务器返回的数据:', response.data);
85.         this.user = response.data.body;
86.         this.imageUrl = this.user.headPortrait ? `${this.user.headPortrait}` : '@/assets/logo.png';
87.         console.log('图片 URL:', this.imageUrl);
88.         this.islook = true;
89.       }).catch(error => {
90.         console.log(error);
91.         ElMessage.error('获取用户信息失败');
92.       });
93.     },
94.     beforeUpload(file) {
95.       const isImage = file.type.startsWith('image/');
96.       if (!isImage) {
97.         ElMessage.error('只能上传图片文件！');
98.         return false;
99.       }
100.       return isImage;
101.     },
102.     handleSuccess(response) {
103.       console.log('图片 上传成功响应:', response);
104.       if (response.code === 200) {
105.         ElMessage.success('上传成功');
106.         console.log('上传成功');
107.         // 重新调用 getuser 方法以获取最新的头像地址
108.         this.getuser();
109.       } else {
110.         ElMessage.error('上传失败: ' + response.msg);
111.       }
112.     },
113.     handleError(err) {
114.       console.error('图片上传失败:', err);
115.       ElMessage.error('上传失败: ' + (err.message || '未知错误'));
116.     },
117.     handleFileChange(file) {
118.       // 更新显示的图片
119.       const fileURL = file.raw;
120.       this.imageUrl = URL.createObjectURL(fileURL);
121.     },
122.     handleTextSuccess(response) {
123.       console.log('TXT文件上传成功响应:', response);
124.       if (response && response.code === 200) {
125.         // 直接赋值未编码的内容
126.         this.user.introduce = decodeURIComponent(response.body);
127.         console.log('txt文件内容:', this.user.introduce);
128.         ElMessage.success('TXT文件上传成功');
129.       } else {
130.         ElMessage.error('TXT文件上传失败: ' + (response ? response.msg : '未知错误'));
131.       }
132.     },
133.     handleTextError(error) {
134.       ElMessage.error('上传失败: ' + (error.message || '未知错误'));
135.     }
136.   }
137. }
138. </script>
140. <style scoped>
141. .me {
142.   display: flex;
143.   justify-content: center;
144.   align-items: center;
145.   height: 100%;
146. }
148. .avatar-uploader .el-upload {
149.   border: 1px dashed var(--el-border-color);
150.   border-radius: 6px;
151.   cursor: pointer;
152.   position: relative;
153.   overflow: hidden;
154.   transition: var(--el-transition-duration-fast);
155.   height: 200px;
156.   width: 200px
157. }
159. .avatar-uploader .el-upload:hover {
160.   border-color: var(--el-color-primary);
161. }
162. </style>

复制代码

3.2 后端代码实现

后端只必要提供接口，用于将前端上传的TXT文件举行解析，并将内容回传给前端即可。

1. /**
2.      * 个人简介上传
3.      */
4.     @PostMapping("/introduce")
5.     public RestResult<String> uploadIntroduce(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {
6.         if (!file.isEmpty()) {
7.             // 检查文件类型
8.             if (!Objects.equals(file.getContentType(), "text/plain")) {
9.                 Map<String, Object> extension = new HashMap<>();
10.                 extension.put("error", "上传格式错误，请上传txt文件！");
11.                 return RestResult.buildFailure(extension);
12.             }
14.             // 读取文件内容
15.             StringBuilder content = new StringBuilder();
16.             try (BufferedReader reader = new BufferedReader(new InputStreamReader(file.getInputStream()))) {
17.                 String line;
18.                 while ((line = reader.readLine()) != null) {
19.                     content.append(line).append("\n");
20.                 }
21.             }
23.             return RestResult.build(content.toString());
24.         }
25.         throw new Exception("文件上传失败");
26.     }

复制代码

让我们来看看效果，上传了一个恶意文件，其内容为：<img src="url" onerror="alert('告诫，系统正受到Xss攻击!');">。通过界说一个不存在的图片路径，当系统尝试加载该图片时会触发错误事件，从而实行恶意脚本，弹出非常提示。这种运动模仿了现实生产环境中，非法分子利用系统漏洞上传恶意文件或可实行插件，诱使系统实行他们预设的脚本，以达到非法目的。

4. 防范Xss攻击

防范跨站脚本攻击（XSS）是Web开发中非常重要的一部门。现在市面上有好几种常用的防范措施：

• 对输入验证和过滤。这点可以利用正则表达式或其他验证工具来实现。
  
• 前端对后端的输出举行编码。防止浏览器将其解析为可实行的脚本。可以利用模板引擎或手动编码。
  
• 利用安全的文件上传组件，利用经过安全验证的文件上传组件，并对上传的文件举行严格的检查，确保文件类型和内容符合要求。
  
• 配置内容安全策略（CSP），限制网页可以加载的资源，防止实行未经授权的脚本。
  
• 在设置 Cookie 时，利用 HttpOnly 和 Secure 标志，防止通过 JavaScript 访问 Cookie。
  

4.1 代码实现：防范Xss攻击

针对上面的Xss攻击环境，只必要在后端页面在对文件内容解析后，再对内容举行过滤编码即可，如许传到前端的数据，就不会被当成脚本实行。

1. /**
2.      * 个人简介上传
3.      */
4.     @PostMapping("/introduce")
5.     public RestResult<String> uploadIntroduce(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {
6.         if (!file.isEmpty()) {
7.             // 检查文件类型
8.             if (!Objects.equals(file.getContentType(), "text/plain")) {
9.                 Map<String, Object> extension = new HashMap<>();
10.                 extension.put("error", "上传格式错误，请上传txt文件！");
11.                 return RestResult.buildFailure(extension);
12.             }
14.             // 读取文件内容
15.             StringBuilder content = new StringBuilder();
16.             try (BufferedReader reader = new BufferedReader(new InputStreamReader(file.getInputStream()))) {
17.                 String line;
18.                 while ((line = reader.readLine()) != null) {
19.                     content.append(line).append("\n");
20.                 }
21.             }
22.             // 过滤并编码内容，防止恶意脚本被执行
23.             String filteredContent = filterContent(content.toString());
24.             return RestResult.build(filteredContent);
25.         }
26.         throw new Exception("文件上传失败");
27.     }
29.     /**
30.      * 功能描述 ： 过滤内容，防止恶意脚本被执行
31.      *
32.      * @param content 文件内容
33.      * @return {@code String }
34.      * @author xhb
35.      * @since 2024/07/29
36.      */
37.     private String filterContent(String content) {
38.         return content.replaceAll("<script>", "")
39.                 .replaceAll("</script>", "")
40.                 .replaceAll("<iframe>", "")
41.                 .replaceAll("</iframe>", "")
42.                 .replaceAll("&", "&amp;")
43.                 .replaceAll("<", "&lt;")
44.                 .replaceAll(">", "&gt;")
45.                 .replaceAll(""", "&quot;")
46.                 .replaceAll("'", "&#x27;")
47.                 .replaceAll("/", "&#x2F;");
48.     }

复制代码

5. 什么是SQL注入？

SQL注入（SQL Injection）攻击是指攻击者通过在输入字段中注入恶意SQL代码，从而绕过应用程序的身份验证和授权机制，访问或修改数据库中的数据。SQL注入攻击可以导致数据泄露、数据篡改、权限提升等严峻后果。
6. 代码实现：简单模仿SQL注入攻击

6.1 后端代码实现

我们将前面的上传接口实现改一改，通过自界说SQL的情势去更新表数据。

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
4. <mapper namespace="com.example.interestplfm.mapper.UserMapper">
6.     <update id="sqlInjectionToUpdateAvatar">
7.         UPDATE user
8.         SET avatar = #{headPortrait}
9.         WHERE userid = ${userid}
10.     </update>
11. </mapper>

复制代码

为了模仿SQL注入，我们可以转达一个包含恶意SQL代码的 id 参数。这里界说一个测试类模仿恶意入参。

1. @SpringBootTest
2. class InterestplfmApplicationTests {
4.     @Autowired
5.     private UserRepository userRepository;
7.     @Test
8.     void UploadTest() {
9.         String avatar = "new_avatar.png";
10.         String id = "1; DROP TABLE user; --";
11.         userRepository.sqlInjectionToUpdateAvatar(id , avatar);
12.     }
14. }

复制代码

在这种环境下，实行的SQL语句就会变成：

导致在更新用户头衔的同时，将其他用户的个人信息删除掉。
这里趁便小提一嘴，如果有小伙伴在实行的时间出现了org.springframework.jdbc.BadSqlGrammarException，提示SQL语法错误。且利用的是Mybatis-plus。那么大概是由于MyBatis-Plus在处理SQL语句时，默认会举行参数化查询，不答应多条SQL合并情势，从而防止SQL注入。
解决方法的话，可以在配置文件中，datasource配置的url参数中，加上&allowMultiQueries=true。答应在单个SQL语句中实行多个查询，从而达到我们想要模仿的效果。
7. 防范SQL注入

防范SQL注入同样是Web开发中非常重要的一部门。常见的防范措施有：

• 利用参数化查询。通过将SQL语句和参数分开处理，数据库引擎会主动转义输入参数，防止恶意代码的实行。
  
• 对用户输入的数据举行严格的验证和过滤，确保输入的内容符合预期的格式和类型。
  
• 为数据库用户分配最小须要的权限，避免利用具有高权限的用户实行SQL操纵。
  
• 利用ORM（对象关系映射）框架，如 MyBatis-Plus、Hibernate等，这些框架通常内置了防止SQL注入的机制。
  

7.1 代码实现：防范SQL注入攻击

其实措施也很简单，我们只必要利用参数化查询，而不是直接拼接SQL语句。在MyBatis中，可以利用 #{} 来取代 ${}，如许MyBatis会主动处理参数化查询。

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
4. <mapper namespace="com.example.interestplfm.mapper.UserMapper">
6.     <update id="sqlInjectionToUpdateAvatar">
7.         UPDATE user
8.         SET avatar = #{headPortrait}
9.         WHERE userid = #{userid}
10.     </update>
11. </mapper>

复制代码

8. 总结

输入校验是确保应用程序安全的第一道防线。通过对用户输入举行严格的验证，可以制止恶意数据进入系统，从而减少安全漏洞的风险。有效的输入校验策略可以保护数据的完整性，维护系统稳固性，并加强用户对应用的信托。

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