漫话随笔

Appearance

安全 ​

浏览器安全是Web开发和用户隐私保护的关键领域，涉及多种机制和技术，用于防止恶意代码执行、数据泄露和各类攻击。

浏览器安全模型 ​

同源策略（Same-Origin Policy） ​

同源策略是浏览器安全的基石，限制一个源（origin）的文档或脚本如何与另一个源的资源进行交互。

  • 同源定义：协议、域名和端口号都必须相同

  • 限制范围：

    • DOM访问受限
    • Cookie、LocalStorage和IndexedDB访问受限
    • XMLHttpRequest和Fetch API请求受限

  • 示例：

    // 这些URL与 https://example.com/page.html 比较
https://example.com/other.html       // 同源 - 只有路径不同
https://sub.example.com/page.html    // 不同源 - 子域名不同
http://example.com/page.html         // 不同源 - 协议不同
https://example.com:8080/page.html   // 不同源 - 端口不同

沙箱隔离（Sandboxing） ​

浏览器通过沙箱机制隔离渲染进程，限制其访问系统资源的能力。

  • 进程级沙箱：将渲染进程与系统和其他进程隔离
  • iframe沙箱：通过sandbox属性限制iframe内容的权限
  • 站点隔离：将不同站点放在不同的渲染进程中

内容安全策略（Content Security Policy，CSP） ​

CSP是一种额外的安全层，用于防止XSS和数据注入攻击。

  • 实现方式：通过HTTP头部或meta标签配置

  • 策略示例：

    html
    <!-- 通过meta标签配置CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com">

  • 常用指令：

    • default-src：默认资源加载策略
    • script-src：JavaScript资源加载策略
    • style-src：CSS资源加载策略
    • img-src：图片资源加载策略
    • connect-src：连接请求策略（如XHR、WebSockets）

常见安全威胁与防护 ​

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

攻击者通过在网页中注入恶意脚本，窃取用户数据或执行恶意操作。

  • 类型：

    1. 存储型XSS：恶意脚本存储在服务器数据库中
    2. 反射型XSS：恶意脚本通过URL参数反射到页面
    3. DOM型XSS：恶意脚本通过DOM操作插入页面

  • 防护措施：

    1. 输入验证和输出编码
    2. 实施内容安全策略（CSP）
    3. 使用HttpOnly和Secure标志保护Cookie
    4. 使用现代框架的自动转义机制

  • 防护代码示例：

    javascript
    // 不安全的代码
element.innerHTML = userInput;

// 安全的代码
element.textContent = userInput;
// 或使用DOMPurify等库
element.innerHTML = DOMPurify.sanitize(userInput);

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

攻击者诱导用户在已认证的网站上执行非预期操作。

  • 攻击原理：利用浏览器会自动发送目标站点Cookie的特性

  • 防护措施：

    1. 使用CSRF令牌
    2. 验证Referer/Origin头
    3. 使用SameSite Cookie属性
    4. 实施双重认证

  • 防护代码示例：

    html
    <!-- 表单中添加CSRF令牌 -->
<form action="/transfer" method="post">
  <input type="hidden" name="csrf_token" value="random_token_value">
  <!-- 其他表单字段 -->
</form>

点击劫持（Clickjacking） ​

攻击者通过透明iframe覆盖在目标网站上，诱导用户点击看不见的元素。

  • 防护措施：

    1. 设置X-Frame-Options头
    2. 使用CSP的frame-ancestors指令
    3. 使用JavaScript帧破解防护

  • 防护代码示例：

    html
    <!-- 使用JavaScript防护 -->
<style>body { display: none; }</style>
<script>
  if (self === top) {
    document.body.style.display = 'block';
  } else {
    top.location = self.location;
  }
</script>

中间人攻击（Man-in-the-Middle，MITM） ​

攻击者拦截并可能修改浏览器与服务器之间的通信。

  • 防护措施：
    1. 使用HTTPS协议
    2. 实施HTTP严格传输安全（HSTS）
    3. 使用公钥固定（Public Key Pinning）
    4. 检查证书有效性

浏览器扩展安全 ​

浏览器扩展可能访问敏感API和数据，需要特别关注其安全性。

  • 安全注意事项：
    1. 最小权限原则
    2. 内容安全策略
    3. 安全的消息传递
    4. 定期审核扩展更新

跨域解决方案 ​

跨域资源共享（Cross-Origin Resource Sharing，CORS） ​

CORS是一种标准机制，允许服务器声明哪些源可以访问其资源。

  • 简单请求和预检请求：

    1. 简单请求：直接发送，带Origin头
    2. 预检请求：先发送OPTIONS请求，获取权限

  • 服务器配置示例：

    Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

JSONP（JSON with Padding） ​

利用script标签不受同源策略限制的特性实现跨域。

  • 实现示例：

    javascript
    function handleResponse(data) {
  console.log(data);
}

// 创建script标签加载跨域数据
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

  • 安全风险：可能导致XSS攻击，只应与可信来源使用

代理服务器 ​

通过同源的服务器中转请求，规避同源策略限制。

  • 实现方式：
    1. 服务端代理
    2. 开发环境代理（如webpack-dev-server）

PostMessage API ​

允许不同源的窗口之间安全通信。

  • 安全使用示例：
    javascript
    // 发送消息
targetWindow.postMessage(message, 'https://trusted-receiver.com');

// 接收消息
window.addEventListener('message', (event) => {
  // 验证消息源
  if (event.origin !== 'https://trusted-sender.com') return;
  
  // 处理消息
  console.log(event.data);
});

现代浏览器安全特性 ​

子资源完整性（Subresource Integrity，SRI） ​

通过加密哈希验证加载的资源是否被篡改。

  • 实现示例：
    html
    <script src="https://cdn.example.com/library.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

HTTPS升级 ​

  • HTTP严格传输安全（HSTS）：强制使用HTTPS连接

    Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

  • 升级不安全请求：通过CSP自动升级HTTP请求到HTTPS

    Content-Security-Policy: upgrade-insecure-requests

特性策略（Feature Policy）/ 权限策略（Permissions Policy） ​

限制网站可以使用的浏览器功能和API。

  • 实现示例：
    Permissions-Policy: camera=(), microphone=(self "https://trusted.com")

隐私保护功能 ​

  • 第三方Cookie限制
  • 指纹识别防护
  • 加密SNI
  • COOP/COEP/CORP跨源隔离策略

浏览器安全开发最佳实践 ​

  1. 始终使用HTTPS：保护数据传输安全
  2. 实施内容安全策略：防止XSS攻击
  3. 使用现代安全HTTP头：HSTS, X-Content-Type-Options等
  4. 安全管理Cookie：使用HttpOnly, Secure和SameSite属性
  5. 输入验证与输出编码：防止注入攻击
  6. 实施CSRF保护：防止跨站请求伪造
  7. 定期更新依赖项：修复已知安全漏洞
  8. 使用安全的会话管理：防止会话劫持
  9. 实施安全的跨域通信：正确配置CORS
  10. 进行安全测试和审计：发现和修复安全漏洞

浏览器安全 ​

浏览器安全机制 ​

  1. 同源策略：限制一个origin（协议+域名+端口）的文档或脚本如何与另一个源的资源进行交互。同源策略可以防止恶意文档，通过恶意脚本窃取数据。
  2. 跨站脚本攻击（XSS）：攻击者通过在网页中插入恶意脚本，窃取用户数据或执行恶意操作。
  3. 跨站请求伪造（CSRF）：攻击者通过诱导用户点击恶意链接或表单，以用户身份执行恶意操作。
  4. 内容安全策略（CSP）：通过设置HTTP头部的Content-Security-Policy，限制网页可以加载和执行的资源，防止XSS攻击。
  5. HTTPS：通过加密通信，防止中间人攻击和数据窃取。
  6. Cookie安全：通过设置HttpOnly和Secure标志，防止Cookie被JavaScript访问和窃取。
  7. 安全沙箱：浏览器为每个标签页或iframe创建一个独立的沙箱环境，限制其访问其他标签页或iframe的资源。
  8. 安全更新：定期更新浏览器和插件，修复已知的安全漏洞。
  9. 安全测试：定期进行安全测试，发现和修复安全漏洞。

跨域解决方案 ​

  1. CORS（跨域资源共享）

    • 服务器设置Access-Control-Allow-Origin等响应头
    • 支持简单请求和预检请求
    • 可控制是否发送凭证信息

  2. JSONP

    • 利用script标签不受同源策略限制
    • 只支持GET请求
    • 有安全风险

  3. 代理服务器

    • 在同源服务器上设置代理
    • 转发请求到目标服务器
    • 返回响应给客户端

  4. WebSocket

    • 建立持久连接
    • 不受同源策略限制
    • 支持双向通信