JS防护类
文件上传漏洞是网络安全中的一个常见问题，它允许攻击者上传恶意文件到服务器，从而可能导致各种形式的攻击，如远程代码执行、文件包含攻击等。为了防止这种漏洞，除了后端服务器进行严格的验证和处理外，在前端也可以通过JavaScript进行一些防护措施。以下是一些常见的前端防护措施：
1.文件类型验证：通过JavaScript验证上传文件的类型。
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
if (!allowedTypes.includes(file.type)) {
alert('只允许上传JPEG, PNG和PDF文件');
event.target.value = ''; // 清空选择的文件
}
});
2.文件大小限制：限制上传文件的大小，防止上传过大的文件。
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var maxSize = 2 * 1024 * 1024; // 2MB
if (file.size > maxSize) {
alert('文件大小不能超过2MB');
event.target.value = ''; // 清空选择的文件
}
});
3.文件名验证：检查文件名是否包含潜在的恶意字符。
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var regex = /^[a-zA-Z0-9_.-]+$/;
if (!regex.test(file.name)) {
alert('文件名包含非法字符');
event.target.value = ''; // 清空选择的文件
}
});
4.预览文件内容：对于一些文件类型，可以在上传前预览其内容，比如图片文件。这可以帮助用户确认上传的是正确的文件。
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('imagePreview').src = e.target.result;
};
reader.readAsDataURL(file);
}
});
5.禁用脚本文件上传：防止上传可能包含恶意代码的脚本文件。
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var forbiddenTypes = ['text/html', 'application/javascript'];
if (forbiddenTypes.includes(file.type)) {
alert('不允许上传HTML或JS文件');
event.target.value = ''; // 清空选择的文件
}
});
6.使用安全的第三方库：利用安全性较高的第三方文件上传库，比如Fine Uploader、Dropzone等，这些库通常已经内置了很多防护措施。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
尽管前端的JavaScript防护可以有效防止无意的错误操作，但对于有意的攻击者来说，这些防护措施很容易被绕过。攻击者可以使用以下几种方法绕过JavaScript防护：
- 禁用JavaScript
攻击者可以通过禁用浏览器中的JavaScript来绕过前端验证。
方法：在浏览器设置中禁用JavaScript，或者使用无JavaScript的浏览器插件。
影响：所有依赖于JavaScript的前端验证都会被绕过。
- 修改前端代码
攻击者可以直接修改页面上的JavaScript代码来绕过验证。
方法：使用浏览器的开发者工具（如Chrome DevTools）来修改或删除前端验证代码。
影响：攻击者可以篡改或移除任何验证逻辑，使其上传任何类型或大小的文件。
- 使用HTTP客户端工具
攻击者可以使用HTTP客户端工具（如cURL、Postman等）直接发送HTTP请求，绕过前端的所有防护措施。
方法：使用工具构造上传请求，并直接发送到服务器。
影响：前端验证完全无效，因为请求直接发送到服务器。
- 篡改HTML表单
攻击者可以修改HTML表单的属性，使其绕过前端验证。
方法：使用浏览器的开发者工具修改表单属性（如accept属性），允许上传任意类型的文件。
影响：攻击者可以上传不符合前端验证规则的文件。
- 拦截和修改网络请求
攻击者可以使用代理工具（如Burp Suite、OWASP ZAP等）拦截和修改网络请求。
方法：在请求发送之前拦截并修改文件的元数据（如文件类型、文件大小）。
影响：攻击者可以伪造任何元数据，绕过前端的验证逻辑。
- 利用浏览器扩展
攻击者可以使用浏览器扩展（如Tampermonkey）来运行自定义脚本，绕过前端验证。
方法：编写脚本修改页面中的JavaScript逻辑或表单数据。
影响：攻击者可以完全控制前端行为，绕过任何验证逻辑。
本次的实验用的是upload-labs提供的实验场景
Upolad-labs: https://upload.hscsec.cn/Pass-01/index.php
Pass-01:
查看源码：
这里的JS代码很明显是限制了上传的文件类型，只允许上传jpg, png, gif的文件类型。
我们可以尝试上传一个php文件：
这里就会提示该文件不允许上传。
这里我们可以用Burp Suite对网站进行抓包，然后修改上传文件的后缀就行了。
将test.png修改成test.php
然后我们就可以看到上传成功了。
第二种方法我们可以尝试禁用JS，但是在实际操作中并不是那么容易实现。
鼠标右键–检查–调试器
然后我们可以发现上传test.php成功了。
