前端安全核心知识点总结笔记
一、前端基础：网页的“三大件”
（一）HTML：网页的“骨架”
-
作用：只负责网页“有什么”，定义结构和内容（比如标题、输入框、按钮），不管好不好看、能不能互动。
-
核心元素：
-
标签：像“积木块”，比如
<h2>是标题、<input>是输入框、<form>是表单（收集账号密码用）。 -
属性：标签的“设置项”，比如
id是元素的“门牌号”（唯一标识，方便找它）、src是图片的路径、method是表单提交方式（POST比GET安全，密码用POST传，不会显示在URL上）。
-
-
常用场景：登录页面的账号输入框、提交按钮，都是用HTML搭出来的。
（二）CSS：网页的“皮肤”
-
作用：负责网页“长什么样”，管颜色、大小、位置、美化，让页面看起来正规、好看。
-
核心用法：
-
选择器：找要美化的元素，比如
h2选中所有二级标题（元素选择器）、#loginBtn选中id为loginBtn的按钮（ID选择器，优先级更高）。 -
实用价值：钓鱼网站靠CSS伪装成官方页面，比如仿QQ登录页，让用户看不出真假。
-
（三）JavaScript：网页的“灵魂”
-
作用：让网页“活起来”，处理互动（点击按钮、弹窗）、校验输入（比如账号不能为空）、动态效果（删除确认）。
-
核心技能：
-
找元素：用
document.getElementById("id名")，通过“门牌号”精准找到输入框、按钮。 -
拿内容：用
.value获取输入框里用户填的内容（比如账号密码）。 -
事件触发：点击（onclick）、输入聚焦（onfocus）、图片加载失败（onerror）等，比如点击登录按钮触发校验。
-
前端校验：比如写个函数，检查账号密码是不是空的，空的就弹窗警告，阻止提交。
-
二、前端安全核心风险：XSS跨站脚本攻击
（一）是什么？
-
通俗说：攻击者把恶意代码（比如弹窗、偷信息的脚本）伪装成正常内容，插入到网页里，浏览器会把它当成正经代码执行，造成攻击。
-
为啥会发生？：网站没过滤用户输入，直接把用户写的内容显示在页面上——如果用户输入的是“代码”，而不是“文字”，就会被执行。
（二）攻击怎么操作？
-
观察：比如网页URL是
http://xss/level1.php?name=test，页面显示“Hello test”，说明name参数的内容会直接显示在页面上。 -
分析：看源码发现
test被放在<h2>标签里，没有任何过滤。 -
搞事情：构造恶意参数
?name=<script>alert(1)</script>，提交后页面弹出1，说明恶意脚本被执行了，漏洞成立。
（三）怎么防？
-
核心原则：永远别信任用户输入！
-
前端防御（简单有效）：
-
不用
innerHTML渲染用户内容：改用textContent，它会把所有内容当纯文字，不识别HTML标签和脚本（比如输入<script>，就显示成普通文字，不执行）。 -
转义特殊字符：如果必须用
innerHTML，就把<转成<、>转成>，让浏览器把它们当文字显示，不解析成标签。
-
-
后端防御（关键）：
-
前端校验是“防君子不防小人”：用户能通过浏览器工具修改JS代码，绕过前端校验（比如把“为空则阻止提交”改成“永远允许提交”）。
-
后端必须再校验：收到数据后，重新检查是否为空、格式对不对，过滤恶意字符，这是最后一道防线。
-
-
其他辅助：做好权限控制（防止越权操作）、记录操作日志（方便后续查问题）。
三、实用小技巧
-
表单提交：用POST传敏感数据（密码），GET会把参数拼在URL上，不安全；点击提交默认刷新页面，用
return false能阻止。 -
输入校验：用
.trim()去除输入内容首尾的空格，防止用户只输空格绕过空值检查。 -
开发工具：用专业编辑器（比如Trae AI），有代码高亮、自动提示，比记事本高效；浏览器按F12能查看源码、调试JS，也能用来测试漏洞。
-
AI辅助：看不懂代码时，让AI解释；但别依赖AI，自己动手写、调试，才能真正掌握。
