跳转至

前端技术基础

前端技术基础

本章导读：本章介绍前端技术的核心组成（HTML、CSS、JavaScript），梳理前端架构演进路径，分析前端安全攻击面（XSS、CSRF、DOM 劫持等），为 Web 渗透测试奠定前端知识基础。

前端的核心职责与架构演进

前端（客户端）是用户直接交互的界面层，负责：

  • 接收用户输入并呈现可视化界面（UI 渲染）

  • 发起 HTTP 请求获取后端数据（数据通信）

  • 执行客户端逻辑，处理页面交互（状态管理、事件处理）

  • 管理客户端存储（Cookie、LocalStorage、IndexedDB）

前端架构演进：

  • 传统多页应用（MPA）：每个页面独立请求后端，完整刷新页面。技术：jQuery + 模板引擎

  • 单页应用（SPA）：首屏加载完整应用框架，后续路由切换仅局部更新，通过 AJAX 获取数据。技术：React/Vue/Angular + 前端路由（React Router/Vue Router）

  • 同构/服务端渲染（SSR）：首屏由服务器渲染 HTML，后续交互由客户端接管。技术：Next.js（React）、Nuxt.js（Vue）、Universal Angular。优势：SEO 友好、首屏加载快

  • 静态站点生成（SSG）：构建时生成完整 HTML，部署到 CDN。技术：Next.js、Gatsby、VitePress、Docusaurus。优势：极致性能、安全性高（无服务端运行时）

  • 渐进式 Web 应用（PWA）：使用 Service Worker 实现离线访问、推送通知、后台同步。技术：Workbox、Web App Manifest

HTML 详解

HTML（HyperText Markup Language）是页面的结构层。

HTML5 核心特性

  • 语义化标签

语义化有助于 SEO 和无障碍访问，也影响 DOM 操作的选择器策略。

  • <header>、<nav>、<main>、<article>、<section>、<aside>、<footer>

  • <figure>、<figcaption>

  • 表单增强

表单验证属性：required、pattern、min、max。

  • <input type="email">、<input type="date">、<input type="color">
  • <input type="range">、<input type="search">

  • <datalist>、<output>

  • 多媒体：<audio>、<video> 标签原生支持音视频播放，无需 Flash

  • Canvas 与 SVG：<canvas> 用于位图绘制（游戏、图表），<svg> 用于矢量图形（图标、地图）

  • 离线存储：Application Cache（已废弃）→ Service Worker + Cache API

  • Web Storage：localStorage（持久存储）、sessionStorage（会话级存储）

  • WebSocket：<iframe> 沙箱属性（sandbox）、postMessage 跨文档通信

  • Web Workers：后台线程执行 JavaScript，不阻塞主线程 UI

HTML 安全测试关注点

  • XSS 注入点：用户输入未过滤直接输出到 HTML 中（反射型 XSS、存储型 XSS）

  • DOM 型 XSS：JavaScript 通过 innerHTML、document.write、eval 等将用户输入插入 DOM，不经过服务器

  • iframe 安全风险：未设置 sandbox 属性的 iframe 可能执行恶意脚本、钓鱼、点击劫持。sandbox="allow-scripts allow-same-origin" 需谨慎使用

  • HTML 实体编码：&lt;、&gt;、&amp;、&quot; 等编码可防止 HTML 注入。安全测试时需检查输出点是否正确编码

  • CSP 绕过：通过 <meta> 标签设置 CSP 优先级低于 HTTP 头，但攻击者若控制页面内容可注入 <meta> 标签弱化 CSP

CSS 详解

CSS（Cascading Style Sheets）控制页面的样式和布局。

CSS 核心概念

  • 盒模型（Box Model）

每个元素都是一个矩形盒子，由 content（内容）+ padding（内边距）+ border（边框）+ margin（外边距）组成。

  • box-sizing: content-box（默认，宽高仅含 content）

  • box-sizing: border-box（宽高包含 content+padding+border，更易控制）

  • 选择器（Selector）

  • 元素选择器、类选择器（.class）、ID 选择器（#id）

  • 属性选择器（[attr=value]）、伪类（:hover、:nth-child()）
  • 伪元素（::before、::after）

  • 组合器（ 后代、> 子代、+ 相邻兄弟、~ 通用兄弟）

  • 选择器优先级（Specificity）

内联样式（1000）> ID（100）> 类/属性/伪类（10）> 元素/伪元素（1）。!important 可覆盖任何规则。

  • 布局方式：

  • Flexbox（弹性布局）：一维布局，主轴（flex-direction）和交叉轴（align-items）控制对齐。适合组件级布局（导航栏、卡片列表）

  • Grid（网格布局）：二维布局，定义行和列（grid-template-rows/columns）。适合页面级布局（整体框架、仪表盘）

  • Position 定位：static（默认）、relative（相对自身偏移）、absolute（相对于最近的非 static 祖先）、fixed（相对于视口）、sticky（滚动吸附）

  • 响应式设计：通过 @media 媒体查询根据视口宽度调整样式。min-width、max-width、orientation（横屏/竖屏）

  • CSS 变量

--primary-color: #1890ff; 和 var(--primary-color)，支持动态修改（JavaScript 可设置 element.style.setProperty('--var', value)）。

  • CSS 预处理器

Sass/SCSS、Less、Stylus，提供变量、嵌套、混入（Mixin）、继承等功能，编译为原生 CSS。

CSS 安全测试关注点

  • CSS 注入

某些场景下用户输入可注入 CSS（如某些富文本编辑器允许自定义样式），可能导致 UI 篡改、信息窃取（通过 CSS 属性选择器探测输入内容，如 input[value^="a"] 的样式差异可推断输入值）。

  • 点击劫持：攻击者通过 CSS opacity: 0 或 z-index 将目标网站透明覆盖在恶意页面上，诱导用户点击。防御：X-Frame-Options、CSP frame-ancestors

JavaScript 详解

JavaScript 是前端的核心编程语言，也是浏览器安全的主战场。

JavaScript 语言核心

  • 数据类型

原始类型：string、number、boolean、null、undefined、symbol、bigint。

引用类型：object、array、function。typeof null 返回 "object" 是历史 bug。

  • 原型链（Prototype Chain）

JavaScript 使用原型继承而非类继承。每个对象都有 __proto__ 属性指向其原型对象。Object.create() 可创建指定原型的对象。ES6 class 是语法糖，底层仍是原型链。

  • 闭包（Closure）

函数可以记住并访问其词法作用域，即使函数在其词法作用域外执行。常用于数据隐藏、模块模式。注意内存泄漏风险（闭包引用未释放的大对象）。

  • 作用域

函数作用域（var）、块级作用域（let、const）。变量提升（Hoisting）机制：var 声明提升但赋值不提升；let/const 存在暂时性死区（TDZ）。

  • this 绑定

this 的值取决于调用方式：

  • 全局调用指向全局对象（浏览器为 window，严格模式下为 undefined）
  • 方法调用指向调用对象
  • 构造函数中指向新实例
  • call/apply/bind 可显式绑定

  • 箭头函数继承外层 this

  • 异步编程：

  • 回调函数：传统异步方式，易导致回调地狱（Callback Hell）

  • Promise：Promise 对象表示异步操作的最终完成或失败。then() 处理成功，catch() 处理失败，finally() 无论成败都执行。Promise.all() 等待所有完成，Promise.race() 返回最快的结果

  • async/await：ES2017 引入，基于 Promise 的语法糖，使异步代码看起来像同步代码。async 函数返回 Promise，await 等待 Promise 解决

  • Event Loop

JavaScript 是单线程语言，通过事件循环实现异步。

执行顺序：同步代码 → 微任务（Promise.then、MutationObserver、queueMicrotask）→ 宏任务（setTimeout、setInterval、setImmediate、I/O、UI 渲染）→ 下一循环。

理解 Event Loop 对分析 XSS 利用时序、DOM 操作时机至关重要。

  • ES6+ 新特性

解构赋值、展开运算符（...）、模板字符串、默认参数、箭头函数、模块化（import/export）、Map/Set/WeakMap/WeakSet、Proxy（代理对象，拦截操作）、Reflect（反射 API）、Generator 函数、Symbol 类型、可选链（?.）、空值合并（??）。

  • 模块化

  • CommonJS：require/module.exports，Node.js 原生

  • ES Module：import/export，浏览器原生支持，需 <script type="module">

安全测试时需关注模块加载是否可被劫持（如 CDN 投毒、依赖混淆）。

DOM 操作

  • DOM 树：浏览器将 HTML 解析为 DOM（Document Object Model）树结构。每个节点是对象，可通过 JavaScript 操作

  • 节点选择：getElementById、getElementsByClassName、getElementsByTagName、querySelector（CSS 选择器，返回第一个）、querySelectorAll（返回 NodeList）

  • 节点操作：createElement、appendChild、removeChild、insertBefore、replaceChild、cloneNode

  • 属性操作

getAttribute、setAttribute、removeAttribute。

  • element.innerHTML 可解析 HTML 字符串，是 XSS 高危点

  • element.textContent 仅插入文本，不会解析 HTML，更安全

  • 事件机制

事件冒泡（从目标元素向上传播到根节点）和事件捕获（从根节点向下传播到目标元素）。

  • addEventListener(event, handler, useCapture)，useCapture 为 true 时使用捕获阶段
  • event.stopPropagation() 阻止冒泡
  • event.preventDefault() 阻止默认行为
  • 事件委托：将事件监听器绑定到父元素，利用冒泡机制处理子元素事件，减少内存占用

浏览器渲染管线（关键渲染路径）

  1. 解析 HTML → DOM 树：遇到 <script> 标签时，除非有 async 或 defer 属性，否则暂停解析并执行脚本（阻塞解析）

  2. 解析 CSS → CSSOM 树：CSS 解析不会阻塞 HTML 解析，但会阻塞渲染（JavaScript 执行需要等待 CSSOM 构建完成）

  3. 执行 JavaScript：可能修改 DOM 和 CSSOM，触发重新解析和重新计算样式

  4. 合并 DOM + CSSOM → 渲染树（Render Tree）：只包含可见节点（排除 display: none 的节点，但包含 visibility: hidden 的节点）

  5. 布局（Layout/Reflow）：计算每个节点在视口中的精确位置和大小。修改几何属性（width、height、position、margin）会触发重排

  6. 绘制（Paint）：将渲染树中的每个节点绘制为屏幕上的像素。修改颜色、背景等不影响几何的属性仅触发重绘（Repaint），比重排开销小

  7. 合成（Composite）：将页面的不同层（Layer）合成最终图像。使用 GPU 加速。transform 和 opacity 可被提升为独立层，由 GPU 处理，避免重排和重绘

性能优化：减少重排（批量修改样式、使用 transform 替代位置变化）、避免布局抖动（Layout Thrashing，即先读取样式再修改样式导致浏览器强制同步布局）

前端框架原理

  • 虚拟 DOM（Virtual DOM）

框架（React/Vue）在内存中维护一个轻量级的 DOM 树表示，数据变化时先比较新旧虚拟 DOM 的差异（Diff 算法），再批量更新真实 DOM，减少直接操作 DOM 的开销。Diff 算法通常采用同层比较、Key 属性优化列表比对。

  • React

函数式组件 + Hooks（useState、useEffect、useContext）。单向数据流，状态提升。JSX 语法编译为 React.createElement() 调用。

  • Vue

响应式系统基于 Proxy（Vue 3）或 Object.defineProperty（Vue 2）。双向绑定（v-model）、指令系统（v-if、v-for、v-bind、v-on）。组合式 API（setup、ref、reactive、computed、watch）。

  • Angular

TypeScript 编写，依赖注入（DI）、装饰器（@Component、@Injectable）、RxJS 响应式编程、Zone.js 变更检测。

前端工程化

  • 构建工具：Webpack（功能全面、配置复杂）、Vite（基于原生 ESM，开发时无需打包，速度快）、Rollup（适合库打包，Tree Shaking 效果好）、Parcel（零配置）

  • 代码质量：ESLint（语法和风格检查）、Prettier（代码格式化）、TypeScript（静态类型检查，编译为 JavaScript）

  • 测试：Jest（单元测试）、Cypress/Playwright（E2E 测试）、Testing Library（组件测试）

  • CI/CD：GitHub Actions、GitLab CI、Jenkins 自动化构建、测试、部署

  • 包管理：npm（Node Package Manager）、yarn（并行下载、锁文件）、pnpm（硬链接 + 符号链接，节省磁盘空间）

前后端分离架构详解

现代 Web 应用普遍采用前后端分离模式：

架构模式

  • 前端：通过 API 调用获取数据，使用 React/Vue/Angular 构建 SPA（单页应用）或 SSR（服务端渲染）应用

  • 后端：提供 RESTful/GraphQL/gRPC API，专注于业务逻辑、数据处理、数据库交互

  • API 网关：统一入口，处理认证、限流、路由、日志、协议转换（如 HTTP 转 gRPC）

  • BFF（Backend for Frontend）：为不同前端（Web、App、小程序）提供定制化的 API 层，避免后端直接适配多端的复杂性

分离优势

  • 职责清晰：前端关注 UI/UX，后端关注业务逻辑和数据

  • 独立部署：前端代码部署到 CDN，后端服务部署到服务器或容器，互不影响

  • 团队协作：前后端可并行开发，通过 Mock 数据和 API 文档（Swagger/OpenAPI）约定接口

  • 多端复用：同一套后端 API 可服务于 Web、iOS、Android、小程序等多个客户端

安全意义

  • 敏感配置隔离：数据库连接串、API 密钥、加密盐值等敏感配置存储在服务端，不暴露给客户端

  • 权限控制：前端展示什么内容由后端数据决定，但权限校验必须在后端完成（前端校验仅用于用户体验，不可信）

  • 数据脱敏：后端在返回数据时进行脱敏处理（如手机号 138****8888），前端不处理敏感数据

安全测试关联点

  • XSS（Cross-Site Scripting，跨站脚本攻击）

前端代码未过滤用户输入直接输出到页面或执行，导致恶意脚本执行。类型：

  • 反射型 XSS：恶意链接中的脚本参数被服务器响应直接回显（如 ?search=<script>alert(1)</script>），需诱导用户点击链接。攻击载荷不存储在服务器

  • 存储型 XSS：恶意脚本被存储到数据库（如评论、帖子），所有浏览该内容的用户都会触发。危害更大，可导致蠕虫传播

  • DOM 型 XSS：纯前端漏洞，JavaScript 通过 location.hash、document.write、innerHTML 等将用户输入插入页面，不经过服务器。如 eval(location.hash.slice(1))

  • 防御：输入过滤（白名单）、输出编码（HTML 实体化）、CSP 策略、HttpOnly Cookie、现代框架自动转义（React 的 {} 默认转义）

  • CSRF（Cross-Site Request Forgery，跨站请求伪造）

攻击者诱导已登录用户访问恶意页面，该页面自动向目标网站发送请求（如 <img src="http://bank.com/transfer?to=attacker&amount=10000">），利用用户的登录 Cookie 执行操作。

防御：CSRF Token（服务器生成隐藏表单字段，请求时验证）、SameSite Cookie 属性、Referer 检查、双重 Cookie 验证。

  • DOM 操作安全

  • innerHTML 插入不可信数据导致 XSS

  • eval()、setTimeout(string)、setInterval(string) 执行字符串代码

  • document.domain 放宽同源策略可能导致安全边界模糊

  • CORS（Cross-Origin Resource Sharing）配置

Access-Control-Allow-Origin: * 且 Access-Control-Allow-Credentials: true 是危险配置，允许任意网站携带用户 Cookie 访问目标 API。正确配置应明确指定允许的域名，并避免同时设置 * 和 Credentials: true。

  • 前端密钥泄露

API Key、私钥、密钥等不应硬编码在前端代码中（JS 可被任何人查看），应通过后端代理或 OAuth 授权流程获取临时令牌。

  • 客户端验证绕过

前端验证仅用于提升用户体验，所有输入校验必须在后端重新验证。攻击者可直接调用 API 绕过前端验证。

  • 原型链污染（Prototype Pollution）

JavaScript 中通过 obj.__proto__.property = value 或 Object.prototype.property = value 修改所有对象的原型，可能导致权限绕过、RCE（远程代码执行）。Lodash 等库历史上存在此类漏洞（CVE-2019-10744）。

  • 供应链攻击

前端依赖 npm 包被植入恶意代码（如 event-stream 事件、colors.js 破坏），通过构建流程感染生产环境。防御：依赖锁定（package-lock.json/yarn.lock/pnpm-lock.yaml）、私源审核、Snyk/Dependabot 漏洞扫描。