开源SQL注入可视化演示项目｜GitHub Pages+Netlify双平台免费部署教程

文章目录

[开源SQL注入可视化演示项目｜GitHub Pages+Netlify双平台免费部署教程](#开源SQL注入可视化演示项目｜GitHub Pages+Netlify双平台免费部署教程)
- 一、项目简介
- 二、项目功能与核心原理
- - [1. 不安全表单（存在SQL注入漏洞）](#1. 不安全表单（存在SQL注入漏洞）)
  - [2. 安全表单（参数化查询防御）](#2. 安全表单（参数化查询防御）)
  - [3. 前端模拟执行逻辑（教学设计）](#3. 前端模拟执行逻辑（教学设计）)
- [三、双平台免费部署方案（Pages + Netlify）](#三、双平台免费部署方案（Pages + Netlify）)
- - [1. GitHub Pages 部署配置](#1. GitHub Pages 部署配置)
  - [2. Netlify 部署配置（重点避坑）](#2. Netlify 部署配置（重点避坑）)
- 四、踩坑总结（全网通用静态页部署经验）
- - 坑1：public目录导致双平台配置不一致
  - [坑2：Netlify 缓存导致改代码不生效](#坑2：Netlify 缓存导致改代码不生效)
  - [坑3：SQL AND 关键字导致正常账号登录失败](#坑3：SQL AND 关键字导致正常账号登录失败)
- 五、本地后端环境（拓展）
- 六、总结与学习价值
- [七、开源地址 & 在线演示](#七、开源地址 & 在线演示)

一、项目简介

最近做了一个纯教学向 SQL注入对比演示开源项目 ，专门用来新手入门理解：拼接SQL漏洞 vs 参数化查询防御。

项目特点：

✅ 双表单对比：不安全拼接表单 + 安全参数化表单
✅ 实时展示最终执行SQL语句，直观看懂注入原理
✅ 支持经典Payload：admin' --、' OR '1'='1
✅ 完整原理讲解页面，适合学习、答辩、作业演示
✅ 同时支持 GitHub Pages + Netlify 双平台免费在线部署

开源地址：https://github.com/dxiangwiki/sql-inject-demo

线上演示地址（双平台已全部部署完成）：

GitHub Pages：https://dxiangwiki.github.io/sql-inject-demo/
Netlify：https://sql-inject-demo.netlify.app/

二、项目功能与核心原理

1. 不安全表单（存在SQL注入漏洞）

模拟后端直接字符串拼接SQL，也是绝大多数注入漏洞的根源。

原始拼接模板：

Plain 复制代码

SELECT * FROM user WHERE username='${username}' AND password='${password}'

经典Payload 1：admin' --

拼接后：

Plain 复制代码

SELECT * FROM user WHERE username='admin' -- ' AND password='xxx'

原理：单引号闭合前面SQL，-- 注释后续所有密码校验语句，直接绕过登录。

经典Payload 2：' OR '1'='1

构造永真条件，无论账号密码对错，永远登录成功。

2. 安全表单（参数化查询防御）

采用标准防御方案：参数化预编译 SQL ，使用 ? 占位符。

Plain 复制代码

SELECT * FROM user WHERE username=? AND password=?

核心关键点：

用户输入永远只作为普通字符串数据，不会被解析为SQL语法，单引号、注释符全部失效，彻底杜绝注入。

3. 前端模拟执行逻辑（教学设计）

本项目前端通过 JS 模拟 SQL 条件解析，将 SQL 的 AND / OR 转换为 JS 的 && / ||，同时识别 SQL 注释，完美复现真实注入效果，适合学习演示，不依赖后端也能跑通所有漏洞场景。

三、双平台免费部署方案（Pages + Netlify）

本项目最终采用 仓库根目录部署，彻底解决跳转、缓存、路径错乱问题，两个平台地址干净、无跳转、可直接访问首页。

1. GitHub Pages 部署配置

设置路径：仓库 Settings → Pages

部署分支：main
部署目录：Root（根目录）

优势：免费、稳定、适合静态教学页面展示。

2. Netlify 部署配置（重点避坑）

很多人遇到：部署后自动跳转、地址栏带/public、缓存不更新。

最终稳定正确配置：

Build command：留空（不执行构建）
Publish directory：. （根目录部署）
部署分支：main

解决卡顿/缓存不更新：

后台 Deploys → Trigger deploy → Deploy project without cache 清缓存重部署。

四、踩坑总结（全网通用静态页部署经验）

坑1：public目录导致双平台配置不一致

早期用 public 存放页面，Netlify 需要配置 public，GitHub Pages 需要跳转文件，导致地址跳转、维护两份代码。

最终最优解 ：页面全部移到仓库根目录，统一部署，一份代码双平台通用。

坑2：Netlify 缓存导致改代码不生效

同一 commit 哈希会复用旧构建产物，改配置不刷新页面，必须清缓存部署。

坑3：SQL AND 关键字导致正常账号登录失败

前端模拟SQL条件时，SQL的 AND 不能直接用于JS，必须替换为 &&，否则正常账号密码报错、注入反而成功。

五、本地后端环境（拓展）

项目附带完整 Node+Express+MySQL 后端代码，可本地搭建真实漏洞环境：

创建 testdb 数据库与 user 表
插入测试账号 admin/123456
安装依赖 npm i express mysql2
启动 node server.js

可真实复现后端 SQL 拼接漏洞与参数化防御对比。

六、总结与学习价值

这个开源项目非常适合网络安全、Web 入门学习者：

直观看懂 为什么会产生SQL注入
彻底理解 参数化查询为什么能防御
掌握经典注入Payload原理
学会 GitHub Pages + Netlify 双平台免费静态页部署

七、开源地址 & 在线演示

GitHub：https://github.com/dxiangwiki/sql-inject-demo

Pages 在线演示：https://dxiangwiki.github.io/sql-inject-demo/

Netlify 在线演示：https://sql-inject-demo.netlify.app/

欢迎 Star、fork、学习使用，适合课堂演示、作业、入门练习。