2alf/CTFd-solve-FX

# CTFd Solve FX 当一个团队提交正确的 flag 时，全屏播放庆祝效果（音效 + 视觉）。 可从 CTFd 的管理面板进行配置，内置三个预设，并提供一个小型 JS API 供您自定义。 ## 安装 将文件夹放入，重启 CTFd，然后管理菜单栏中会出现一个 **"Solve FX"** 链接。 ## 管理面板 所有设置都存储在 CTFd 的 config 表中，并作为 `window.__CTFdSolveFXConfig` 注入到每个页面，因此更改在页面刷新后生效，无需重新构建。  ## 预设 | 名称 | 庆祝效果 | |---|---| | `pulse` | 径向方格脉冲（3个扩散圆环） | | `matrix` | matrix 雨 | | `conway` | 康威生命游戏 | | `flow` | 基于我的 [旧 proccesing 项目](https://openprocessing.org/sketch/2211359) 的柏林噪声 | 每个预设都是 `assets/presets/` 中的一个独立文件。 要添加新的预设，只需将它们作为 `.js` 文件放入此文件夹中，`__init__.py` 在刷新后即可识别它们。 ## 构建您自己的预设 预设是一个包含 `celebration(onDone)` 函数的对象： ``` CTFdSolveFX.register('my-preset', { celebration(onDone) { const overlay = CTFdSolveFX.helpers.makeOverlay(); const canvas = overlay.querySelector('.solvefx-canvas'); const ctx = CTFdSolveFX.helpers.fitCanvas( canvas, window.innerWidth, window.innerHeight ); // draw loop using CTFdSolveFX.config.color, etc. setTimeout(onDone, 3000); }, }); ``` 庆祝效果的音效是管理员配置的音效预设，因此您无需自己处理音频。如果您的预设需要特定声音，请在 `celebration()` 内部调用 `CTFdSolveFX.helpers.chime([...])`。 ## 预览 `flow` 和 `matrix` 预设：
## 解题检测 四个重叠的 hook（Response.prototype.json、window.fetch、 XMLHttpRequest 和 CTFd.api.post_challenge_attempt）都会监视 `POST /api/v1/challenges/attempt` 是否返回 `data.status === "correct"`。 这种分层方法能够应对 CTFd 对 swagger-client 的使用，后者会在模块加载时捕获 fetch 引用，从而绕过普通的 `window.fetch` 补丁。 ## 无需解题进行测试 前往 `/challanges/` -> 预览 challange 并插入 flag，您的效果应如下面的 gif 演示般出现： 这里我们使用了 `pulse` 预设：  ## 贡献 您可以通过 PR 贡献修复或新预设。

标签：CMS安全, CTFd, JavaScript, UI增强, 插件, 数据可视化, 自定义脚本, 视觉特效, 逆向工具