Web前端安全核心知识总结
一、Web前端三剑客核心用法
（一）HTML：网页的“骨架”
核心作用：定义网页层级结构和内容分类，仅负责“有什么”，不负责样式，通过标签+属性构成基本单位。
核心标签与属性
表单
<form>：method属性推荐post（数据藏在请求体，比GET更安全，适合传密码），action属性指定后端接口地址；输入框
<input>：type区分text（明文）、password（掩码），id为唯一标识，是JS/CSS定位的核心；链接
<a>：href属性实现页面跳转、锚点定位（#id）或返回顶部（#）；图片
<img>：单标签，src为资源路径，alt为加载失败兜底文字。
实战场景：登录页面搭建，通过表单封装用户名、密码输入框，配合按钮实现基础提交功能。
（二）CSS：网页的“皮肤”
核心作用：负责网页视觉呈现（颜色、大小、位置、样式），不涉及业务逻辑，通过选择器定位标签并设置样式。
两大核心选择器
元素选择器：直接写标签名，选中页面所有该类型标签（如
h2 { color: red; }）；ID选择器：#+id名，精准选中唯一标签，优先级高于元素选择器（如
#loginBtn { color: blue; }）。
核心样式属性：color（文字颜色）、text-align（对齐）、padding（内边距）、border-radius（圆角）等，可快速美化登录页面等场景。
（三）JavaScript：网页的“灵魂”
核心概念
变量：存储信息，
const定义不可修改值，var为普通变量；函数：封装代码块，需通过
函数名()调用才执行；DOM定位：通过
document.getElementById("id名")精准找标签，.value获取输入框内容（传参核心载体）。
三大核心交互事件：
onclick（点击触发）、onfocus（输入框聚焦触发）、onerror（资源加载失败触发）。实战场景：前端登录过滤，通过函数校验用户名/密码是否为空（
.trim()去除首尾空格，防止空值绕过），返回false阻止表单提交、true允许提交。三剑客整合逻辑：HTML搭骨架、CSS做美化、JS处理交互与逻辑，共同实现完整的前端页面功能。
二、前端核心安全风险
（一）前端校验可被轻松绕过
核心问题：JS代码运行在用户浏览器，用户拥有完全控制权，可通过浏览器F12开发者工具直接修改/删除校验代码。
绕过方式：注入代码重写校验函数（如
checkForm = function() { return true; }），强制校验永远返回true，突破所有前端输入限制。结论：前端校验仅“防君子不防小人”，无法作为安全防护的核心手段。
（二）XSS跨站脚本攻击
定义：攻击者将恶意JavaScript代码伪装成正常内容插入网页，浏览器执行恶意代码引发安全问题。
攻击原理：网站未过滤用户输入，直接将用户输入内容当作文本渲染，若输入为代码则会被浏览器解析执行。
基础攻击步骤
观察环境：找到用户输入可被页面渲染的入口（如URL传参
name=test，页面显示Hello test）；分析源码：确认输入内容直接嵌入HTML标签（如
<h2>Hello test</h2>）；构造Payload：闭合原有标签并插入恶意脚本（如
?name=<script>alert(1)</script>），触发代码执行。
攻击危害：窃取用户Cookie（含session ID、token），冒充用户免密登录，进而查看隐私、转账盗刷、传播诈骗信息、扩大攻击范围。
三、前端安全核心防御手段
（一）XSS防御：输出转义
将用户输入中的危险字符（如<、>）转为HTML实体字符（<→<、>→>），让浏览器将恶意代码当作普通文本显示，而非解析执行，从根源阻止脚本注入。
（二）校验机制：前端为辅，后端为主
前端校验：仅做用户体验优化（如即时提示输入为空），无法依赖其做安全防护；
后端校验：作为最后一道防线，收到前端数据后重新验证（是否为空、格式是否正确），无法被用户绕过。
（三）通用安全原则
永不信任用户输入：所有用户提交的内容都需做过滤、校验、转义处理；
严格的权限控制：验证用户身份和操作权限，防止越权访问数据；
完整的日志记录：记录所有用户操作行为，便于安全问题追踪、审计和排查。
四、法律红线
根据《中华人民共和国网络安全法》，任何个人和组织不得从事非法侵入他人网络、干扰网络正常功能、窃取网络数据等危害网络安全的活动，也不得为此类活动提供技术支持、广告推广等帮助，违者需承担相应法律责任。