- 正确答案：前端常见的攻击方式包括跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、点击劫持（Clickjacking）、DOM型安全漏洞、开放重定向、客户端代码注入、HTTP劫持与中间人攻击等。其中最常见且危害较大的是XSS和CSRF。 - 解答思路：首先明确“前端攻击”是指攻击者利用前端代码或用户浏览器的执行环境，实施恶意行为。这类攻击通常不直接攻击服务器，而是通过诱导用户执行恶意脚本或伪造用户请求来达成目的。因此需要从攻击入口、攻击载体和防御机制三个角度分析。例如，XSS是通过注入恶意脚本在用户浏览器中执行；CSRF则是利用用户已登录的身份发起非自愿请求。接下来逐一解释每种攻击的工作原理，并说明其触发条件和典型场景。 - 深度知识讲解： 1. 跨站脚本攻击（XSS） XSS 是指攻击者将恶意脚本注入到网页中，当其他用户浏览该页面时，脚本在用户浏览器中执行，从而窃取 Cookie、会话令牌或执行任意操作。分类： - 存储型 XSS：恶意脚本被永久存储在目标服务器上（如评论区、用户资料），所有访问该页面的用户都会受到影响。 - 反射型 XSS：恶意脚本通过 URL 参数等方式传入服务器，服务器未过滤就反射回响应中，仅对点击特定链接的用户生效。 - DOM 型 XSS：完全在客户端发生，不经过服务器。攻击者通过修改 DOM 结构或利用 JavaScript 动态写入内容触发脚本执行。示例（反射型 XSS）：假设搜索功能 URL 为：https://example.com/search?q= 若前端使用 innerHTML 直接插入 q 参数值，则脚本会被执行。防御措施： - 输入过滤与转义：对用户输入进行 HTML 实体编码（如 < → <） - 使用安全 API：避免使用 innerHTML，改用 textContent - 设置 HttpOnly Cookie：防止 JavaScript 访问敏感 Cookie - 内容安全策略（CSP）：通过 HTTP 头限制可加载资源来源，阻止内联脚本执行 2. 跨站请求伪造（CSRF）攻击者诱导用户在已登录状态下访问恶意网站，该网站自动向目标站点发送请求（如转账、修改密码），服务器误认为是合法用户操作。示例：用户登录银行网站后，cookie 自动携带身份信息。攻击者构造一个隐藏 form 表单： ``` ``` 用户打开恶意页面即触发转账。防御措施： - 使用 CSRF Token：服务器生成一次性 token，嵌入表单或 header，验证通过才处理请求 - SameSite Cookie 属性：设置 Cookie 的 SameSite=Strict 或 Lax，防止跨站请求携带 Cookie - 检查 Referer / Origin 头部：判断请求来源是否合法 - 关键操作需二次认证（如短信验证码） 3. 点击劫持（Clickjacking）攻击者将目标网站嵌入透明 iframe 中，覆盖在诱骗按钮之上，用户以为点击的是正常按钮，实则触发了隐藏页面的操作（如点赞、授权）。防御措施： - 使用 X-Frame-Options 响应头：DENY 或 SAMEORIGIN，禁止页面被嵌套 - 使用 Content-Security-Policy: frame-ancestors 指令更灵活控制 4. 开放重定向漏洞前端根据参数跳转，如 redirect?url=https://evil.com，若未校验目标地址，可能引导用户至钓鱼网站。防御：白名单校验跳转域名，或使用中间页提示风险。 5. 客户端代码注入使用 eval()、new Function()、innerHTML 等动态执行字符串代码，可能导致任意代码执行。尤其在处理 JSONP 或模板渲染时易出问题。防御：避免使用危险函数，使用 safer 替代方案（如 JSON.parse 而非 eval） 6. DOM Clobbering 利用 HTML 元素 id 覆盖全局对象属性，影响 JavaScript 执行逻辑。例如： ```html malicious ``` 防御：避免依赖可能被污染的全局变量，使用严格模式。 7. 第三方库供应链攻击引入未经审计的 npm 包或 CDN 脚本，可能包含恶意代码。防御：使用可信源，定期扫描依赖，启用 Subresource Integrity（SRI） 8. HTTP 劫持与中间人攻击在非 HTTPS 环境下，攻击者可篡改传输内容，注入广告或恶意脚本。防御：全站启用 HTTPS，使用 HSTS 强制加密连接 - 扩展知识：现代前端框架（如 React、Vue）默认提供一定防护能力。例如 React 对 JSX 内容自动转义，防止多数 XSS；但 dangerouslySetInnerHTML 仍需谨慎使用。SPA 架构下，CSRF 风险相对降低（因多用 Token 认证），但 OAuth 流程中的 redirect_uri 仍可能被滥用。前端安全本质是“信任边界”的管理：永远不要信任用户输入，也不要信任第三方资源。最佳实践是纵深防御（Defense in Depth），结合编码规范、CSP、自动化检测工具（如 ESLint 插件 no-danger）、安全测试流程共同保障。 - 伪代码示例：CSP 配置建议 ``` Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://trusted-cdn.com; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests; ``` 此策略允许同源脚本和指定 CDN，禁止插件和 iframe 嵌套，强制升级 HTTP 请求为 HTTPS。总结：前端攻击虽发生在客户端，但影响深远。开发者需具备安全编码意识，理解每行代码可能带来的风险，才能构建真正安全的应用。

秋招面经-腾讯前端三面（泡池子

全站热榜

创作者周榜