使用Nginx配置同源策略保护前端安全

同源策略(Same-Origin Policy)是浏览器的重要安全机制，Nginx可以通过多种方式增强前端应用的安全性。以下是详细的配置方法：

1. 基础同源策略配置

防止跨域请求

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        # 只允许来自特定源的请求
        add_header 'Access-Control-Allow-Origin' 'https://trusted-domain.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        # 对于预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 其他配置...
    }
}

2. 内容安全策略(CSP)

server {
    # ...
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none'";

    # 报告违规行为
    add_header Content-Security-Policy-Report-Only "default-src 'self'; report-uri https://yourdomain.com/csp-report";
}

3. 防止点击劫持

server {
    # ...
    add_header X-Frame-Options "SAMEORIGIN";
    # 或完全禁止嵌入
    # add_header X-Frame-Options "DENY";
}

4. XSS保护

server {
    # ...
    add_header X-XSS-Protection "1; mode=block";
}

5. MIME类型安全

server {
    # ...
    add_header X-Content-Type-Options "nosniff";
}

6. 防止信息泄露

server {
    # ...
    server_tokens off;  # 隐藏Nginx版本信息
    add_header Referrer-Policy "no-referrer-when-downgrade";
}

7. HTTPS强制与安全头

server {
    listen 443 ssl;
    server_name yourdomain.com;

    # SSL配置
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    # 强制HTTPS
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

    # 其他安全头
    add_header Feature-Policy "geolocation 'none'; microphone 'none'; camera 'none'";
}

8. 防止JSON劫持

location /api {
    # 确保JSON响应不以数组开头
    add_header X-Content-Type-Options nosniff;
    default_type application/json;

    # 可以添加前缀防止直接执行
    set $json_prefix ")]}',\n";
    return 200 '$json_prefix{"status":"success","data":{...}}';
}

9. 完整的安全配置示例

server {
    listen 443 ssl;
    server_name yourdomain.com;

    # SSL配置
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    # 安全头
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";
    add_header X-XSS-Protection "1; mode=block";
    add_header Referrer-Policy "no-referrer-when-downgrade";
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none'";
    add_header Feature-Policy "geolocation 'none'; microphone 'none'; camera 'none'";

    # 隐藏服务器信息
    server_tokens off;
    more_clear_headers Server;

    location / {
        # 同源策略
        add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        # 静态文件缓存
        try_files $uri $uri/ /index.html;
    }

    location /api {
        # API特定安全设置
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        # 限制HTTP方法
        limit_except GET POST {
            deny all;
        }
    }
}

注意事项

1. 配置CSP时，需要根据实际使用的前端框架和资源进行调整
2. 启用严格的安全策略可能会影响某些功能的正常使用，建议先在报告模式下测试
3. 定期检查安全头的兼容性和最新最佳实践
4. 对于复杂的应用，可能需要结合后端的安全措施

这些配置可以显著提高前端应用的安全性，防止XSS、CSRF、点击劫持等多种攻击。