用html5做的简单的网站对比评测：5步搞定安全防护

改个需求建站公司拖一周，你是不是也遇到过？用html5做的简单的网站听起来门槛低，但实际做起来安全问题一个接一个，稍微不注意就可能被攻击。今天就来个对比评测，告诉你怎么用html5做网站的同时还能把安全防护做到位，省心又省事。

威胁场景：用html5做的简单的网站常见的攻击方式

用html5做的简单的网站看似“轻量”，但正因为轻，反而容易被忽视安全配置，成为黑客攻击的目标。常见的攻击方式包括跨站脚本（XSS）、跨站请求伪造（CSRF）、SQL注入、文件上传漏洞等。

举个真实的案例，某外贸公司用html5搭建了一个展示产品的小型网站，因为没做任何安全防护，结果被人注入恶意脚本，导致网站被黑，搜索引擎收录也被清空，损失惨重。这类问题在建站初期如果没重视，后续修复成本非常高。

漏洞原理：为什么html5网站容易被攻击？

html5虽然带来了更丰富的网页交互功能，但同时也引入了一些新的安全漏洞点，比如：

DOM-based XSS：通过操作文档对象模型（DOM）触发的跨站脚本攻击，用户输入的内容未经过滤，直接写入页面，就可能被执行恶意代码。
文件上传漏洞：某些网站允许用户上传图片或文件，如果没有限制上传类型或路径，就可能被用来上传Webshell。
不安全的CORS配置：跨域资源共享（CORS）配置不当，可能让第三方网站访问你的资源，造成数据泄露。

这些都是因为html5本身没有强制性的安全机制，需要开发者手动配置防护。

防护方案：用html5做的简单的网站怎么安全上线

针对上述漏洞，我们可以从以下几个方面入手，保障html5网站的安全性。

1. 输入过滤与XSS防护

防止XSS攻击最直接的方法是对用户输入内容进行过滤。例如，在JavaScript中使用textContent而不是innerHTML，可以有效防止脚本注入。

不安全代码（JavaScript）

let userComment = document.getElementById("comment").value;
document.getElementById("display").innerHTML = userComment;

安全代码（JavaScript）

let userComment = document.getElementById("comment").value;
document.getElementById("display").textContent = userComment;

此外，还可以使用HTML5的Content Security Policy（CSP）来限制脚本的加载来源，提升安全性。在HTTP响应头中加入如下配置：

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'

注：'unsafe-inline'和'unsafe-eval'是调试时的选项，生产环境建议删除。

2. 防止CSRF攻击

CSRF攻击是利用用户登录状态，在用户不知情的情况下提交恶意请求。防范方法是添加CSRF Token，确保每个请求都携带一个服务器生成的随机值。

PHP后端生成Token代码

session_start();
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));

前端使用Token

<input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">

后端在处理表单时检查Token是否匹配，不匹配直接拒绝请求。

3. 限制文件上传类型与路径

如果网站允许用户上传文件，必须限制上传类型和路径。例如，只允许上传图片，并且不能上传到Web根目录，防止Webshell。

PHP限制上传代码示例

$allowed_types = ['image/jpeg', 'image/png'];
if (!in_array($_FILES['file']['type'], $allowed_types)) {die("不允许的文件类型");
}
$upload_path = '/uploads/' . basename($_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'], $upload_path);

4. 配置CORS

CORS配置不当会带来跨域攻击风险，建议使用W3C推荐的CORS标准配置，只允许信任的来源访问资源。

HTTP响应头配置（Apache）

Header set Access-Control-Allow-Origin "https://trusted-domain.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"

W3C标准推荐在配置CORS时避免使用*，应明确指定允许的域名和方法，防止被滥用。

检测与修复：用html5做的简单的网站怎么检查安全漏洞

建站完成后，必须对安全漏洞进行检测与修复，可以使用自动化工具辅助。

常用检测工具

OWASP ZAP：开源的Web应用安全扫描工具，能检测XSS、CSRF、SQL注入等漏洞。
Netsparker：商业工具，适合企业使用，支持自动化扫描。
W3C Validator：虽然主要是HTML语法检查，但能发现部分不规范的标签使用，避免潜在漏洞。

手动检测建议

检查是否有eval()、exec()等函数使用，可能引发代码注入。
检查是否有未过滤的用户输入写入页面。
查看上传目录权限，是否允许写入Web可访问的路径。
测试CSRF防护是否生效，可尝试修改Token值后提交表单。

安全加固清单：用html5做的简单的网站上线前必须做这些

为了确保用html5做的简单的网站安全无虞，以下清单必须一一检查：

检查项	检查内容	是否通过
XSS防护	所有用户输入是否使用`textContent`	✅/❌
CSRF防护	是否使用Token机制	✅/❌
文件上传	是否限制类型与路径	✅/❌
CORS配置	是否只允许信任的来源访问	✅/❌
SSL证书	是否开启HTTPS	✅/❌
ICP备案	是否已完成备案	✅/❌
安全头配置	是否设置了`Content-Security-Policy`	✅/❌