浏览器的安全性 on Last Stand

浏览器的安全性 on Last Standhttps://amatsuzero.github.io/LastStand/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%AE%89%E5%85%A8%E6%80%A7/Recent content in 浏览器的安全性 on Last StandHugozh-cnThu, 07 Aug 2025 00:00:00 +0800浏览器的安全性https://amatsuzero.github.io/LastStand/posts/frontend/security/security-012/Tue, 17 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/security/security-012/<p>浏览器安全性是前端开发中的重要考察点之一，主要指浏览器在访问网站过程中如何防止攻击者利用漏洞或机制实施攻击、窃取数据、破坏用户体验等。</p> <h2 id="一常见的浏览器安全威胁">一、常见的浏览器安全威胁</h2> <h3 id="1-xss跨站脚本攻击">1. <strong>XSS（跨站脚本攻击）</strong></h3> <ul> <li>原理：攻击者注入恶意脚本到网页中，在用户浏览页面时执行。</li> <li>危害：窃取 cookie、伪造操作、传播蠕虫。</li> <li>防御：<br></li> <li>对输出进行<strong>HTML转义</strong>；</li> <li>使用 <strong>Content Security Policy（CSP）</strong>；</li> <li>严格控制用户输入（白名单）；</li> <li>使用框架自动防御（如 React 的 JSX 自动转义）。</li> </ul> <hr> <h3 id="2-csrf跨站请求伪造">2. <strong>CSRF（跨站请求伪造）</strong></h3> <ul> <li>原理：用户登录目标网站后，被诱导访问恶意链接，触发网站上的有状态请求。</li> <li>危害：修改密码、转账等敏感操作被伪造。</li> <li>防御：<br></li> <li>使用 CSRF Token；</li> <li>Referer 验证；</li> <li>SameSite Cookie 属性限制第三方请求。</li> </ul> <hr> <h3 id="3-点击劫持clickjacking">3. <strong>点击劫持（Clickjacking）</strong></h3> <ul> <li>原理：攻击者在页面上嵌入透明 iframe，引诱用户点击。</li> <li>防御：<br></li> <li>禁止网页被嵌入 iframe：<code>X-Frame-Options: DENY / SAMEORIGIN</code>；</li> <li>使用 CSP 中的 <code>frame-ancestors</code> 指定允许嵌入的来源。</li> </ul> <hr> <h3 id="4-恶意文件上传">4. <strong>恶意文件上传</strong></h3> <ul> <li>原理：上传可执行脚本，触发服务端或客户端执行。</li> <li>防御：<br></li> <li>严格限制文件类型与大小；</li> <li>不在上传目录下执行脚本；</li> <li>设置 CDN 或存储桶只读访问权限。</li> </ul> <hr> <h3 id="5-恶意第三方脚本供应链攻击">5. <strong>恶意第三方脚本（供应链攻击）</strong></h3> <ul> <li>原理：攻击者污染 CDN 或依赖源，注入恶意代码。</li> <li>防御：<br></li> <li>使用子资源完整性校验（Subresource Integrity, SRI）；</li> <li>只信任可靠的依赖源；</li> <li>上线前锁定依赖版本。</li> </ul> <hr> <h2 id="二浏览器原生安全机制">二、浏览器原生安全机制</h2> <h3 id="1-同源策略same-origin-policy">1. <strong>同源策略（Same-Origin Policy）</strong></h3> <ul> <li>限制不同源之间访问 Cookie、DOM、LocalStorage 等。</li> <li>同源指：协议、域名、端口号都相同。</li> </ul> <h3 id="2-cors跨域资源共享">2. <strong>CORS（跨域资源共享）</strong></h3> <ul> <li>浏览器通过预检请求和响应头判断是否允许跨域访问。</li> </ul> <h3 id="3-content-security-policycsp">3. <strong>Content Security Policy（CSP）</strong></h3> <ul> <li>通过设置 HTTP Header 控制资源加载策略，防止 XSS 和数据泄露。</li> <li>示例：<br></li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-http" data-lang="http"><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">Content-Security-Policy: default-src 'self'; script-src 'self' https://trust.cdn.com; </span></span></span></code></pre></div><h3 id="4-http-only--secure-cookie">4. <strong>HTTP-only & Secure Cookie</strong></h3> <ul> <li><code>HttpOnly</code>: 防止 JavaScript 读取 Cookie；</li> <li><code>Secure</code>: 仅在 HTTPS 下传输 Cookie；</li> <li><code>SameSite</code>: 限制第三方请求携带 Cookie。</li> </ul> <h3 id="5-sandboxiframe-安全沙箱">5. <strong>Sandbox（iframe 安全沙箱）</strong></h3> <ul> <li><code><iframe sandbox></code> 属性限制 iframe 的行为；</li> <li>可防止脚本执行、表单提交等危险操作。</li> </ul> <hr> <h2 id="三前端开发中的安全实践">三、前端开发中的安全实践</h2> <table> <thead> <tr> <th>安全措施</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>输入校验</td> <td>客户端和服务端都要做，优先使用白名单策略</td> </tr> <tr> <td>输出编码</td> <td>HTML、JavaScript、URL 编码避免 XSS 注入</td> </tr> <tr> <td>HTTPS</td> <td>加密传输防止中间人攻击（MITM）</td> </tr> <tr> <td>使用现代框架</td> <td>React/Vue/Angular 等框架天然防御 XSS</td> </tr> <tr> <td>限制权限</td> <td>用户行为应严格授权与验证</td> </tr> <tr> <td>CSP 策略</td> <td>强制资源加载来源、禁止内联脚本</td> </tr> </tbody> </table> <hr> <h2 id="四总结">四、总结</h2> <p>浏览器安全是前端必须掌握的重要基础知识，核心目标是 <strong>防止前端受到攻击者控制或操纵</strong>。它涉及浏览器机制、HTTP协议、安全头部、数据验证等多个维度，需要前端开发者在日常开发中养成良好安全意识与编码习惯。</p>