文件上传漏洞练习1-JS防护类

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防护：

1. 禁用JavaScript
   攻击者可以通过禁用浏览器中的JavaScript来绕过前端验证。

方法：在浏览器设置中禁用JavaScript，或者使用无JavaScript的浏览器插件。
影响：所有依赖于JavaScript的前端验证都会被绕过。

2. 修改前端代码
   攻击者可以直接修改页面上的JavaScript代码来绕过验证。

方法：使用浏览器的开发者工具（如Chrome DevTools）来修改或删除前端验证代码。
影响：攻击者可以篡改或移除任何验证逻辑，使其上传任何类型或大小的文件。

3. 使用HTTP客户端工具
   攻击者可以使用HTTP客户端工具（如cURL、Postman等）直接发送HTTP请求，绕过前端的所有防护措施。

方法：使用工具构造上传请求，并直接发送到服务器。
影响：前端验证完全无效，因为请求直接发送到服务器。

4. 篡改HTML表单
   攻击者可以修改HTML表单的属性，使其绕过前端验证。

方法：使用浏览器的开发者工具修改表单属性（如accept属性），允许上传任意类型的文件。
影响：攻击者可以上传不符合前端验证规则的文件。

5. 拦截和修改网络请求
   攻击者可以使用代理工具（如Burp Suite、OWASP ZAP等）拦截和修改网络请求。

方法：在请求发送之前拦截并修改文件的元数据（如文件类型、文件大小）。
影响：攻击者可以伪造任何元数据，绕过前端的验证逻辑。

6. 利用浏览器扩展
   攻击者可以使用浏览器扩展（如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成功了。