前端面试专栏-基础篇:6. 跨域方案全对比(CORS/JSONP/Nginx)与安全攻防

跨域方案全对比(CORS/JSONP/Nginx)与安全攻防

前端面试专栏-基础篇:6. 跨域方案全对比(CORS/JSONP/Nginx)与安全攻防_第1张图片

在现代Web开发中,前后端分离架构已成为主流。但这种模式下,跨域问题频频出现,严重阻碍数据交互。浏览器的同源策略为用户筑起安全防线,却也给开发带来挑战。当协议、域名或端口不同时,浏览器会阻断跨域请求。本文将深入剖析CORS、JSONP、Nginx反向代理这三种常见跨域方案,并探讨相关安全攻防策略。

一、跨域原理:同源策略详解

同源策略(Same-Origin Policy)是现代浏览器强制执行的一项重要安全机制,旨在防止恶意网站窃取用户数据或进行跨站攻击。该策略规定,只有当网页文档的"源"完全一致时,才能进行某些特定操作的交互。

1. 同源的定义标准

"源"由三个关键要素组成:

  • 协议(Protocol):如http、https、ftp等
  • 域名(Domain):包括主域名和子域名
  • 端口(Port):默认端口可以不显式写出

只有当这三个要素完全相同时,才被认为是同源。以下是一些典型示例说明:

  1. 协议不同:

    • http://example.com:8080(HTTP协议)
    • https://example.com:8080(HTTPS协议)
      → 不同源
  2. 域名不同:

    • http://example.com:8080(主域名)
    • http://www.example.com:8080(子域名)
      → 不同源
    • http://example.com:8080(完整域名)
    • http://example.net:8080(不同顶级域名)
      → 不同源
  3. 端口不同:

    • http://example.com:8080(8080端口)
    • http://example.com:8081(8081端口)
      → 不同源
    • http://example.com(默认80端口)
    • http://example.com:8080(指定8080端口)
      → 不同源

2. 同源策略的主要限制范围

2.1 存储访问限制

浏览器禁止脚本访问非同源的存储数据:

  • Cookie:包括会话cookie和持久化cookie
  • localStorage/sessionStorage:Web Storage API存储的数据
  • IndexedDB:浏览器数据库
  • DOM存储:某些浏览器特有的存储机制

例如,恶意网站example.net无法读取用户登录example.com后生成的cookie,防止会话劫持。

2.2 AJAX请求限制

对于XMLHttpRequest和Fetch API:

  • 请求实际会被发送到服务器
  • 浏览器会拦截响应内容,不传递给请求发起者
  • 在开发者工具Network面板中可以看到完整的请求和响应

特别说明:

  1. 表单提交不受限制(但无法读取响应)
  2. 资源嵌入(如
2.3 DOM访问限制
  • 禁止通过JavaScript访问非同源页面的DOM
  • 无法调用非同源窗口的方法和属性
  • 但可以通过postMessage API进行安全通信

3. 同源策略的安全意义

这种机制主要防范以下几种安全威胁:

  1. CSRF(跨站请求伪造)攻击
  2. XSS(跨站脚本)攻击的数据窃取
  3. 恶意网站获取用户敏感信息
  4. 防止第三方网站篡改重要数据

注意:同源策略是浏览器行为,服务器间的通信不受此限制。

二、常见跨域方案详解

前端面试专栏-基础篇:6. 跨域方案全对比(CORS/JSONP/Nginx)与安全攻防_第2张图片

(一)CORS(跨域资源共享)

  1. 原理:CORS是W3C标准,通过在服务器响应头中添加特定字段,告知浏览器哪些源可以访问资源,从而实现跨域。
  2. 简单请求:满足以下条件的请求为简单请求:
    • 请求方法为GETPOSTHEAD之一。
    • Content-Typeapplication/x-www-form-urlencodedmultipart/form-datatext/plain
    • 没有自定义请求头。
      对于简单请求,浏览器直接发送请求,并在请求头中添加Origin字段,服务器响应时携带Access-Control-Allow-Origin等相关头信息。若Access-Control-Allow-Origin的值与请求的Origin匹配,浏览器则允许访问响应数据。
  3. 非简单请求:除简单请求外的其他请求为非简单请求,如使用PUTDELETE方法,Content-Typeapplication/json等。非简单请求在正式请求前会先发一个OPTIONS预检请求,询问服务器是否允许该跨域请求。预检请求头中包含Origin(请求来源)、Access-Control-Request-Method(实际请求方法)、Access-Control-Request-Headers(实际请求头)等字段。服务器响应时,若允许请求,会返回相应的Access-Control-Allow-*头信息,如Access-Control-Allow-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-Headers等。
  4. 优点
    • 安全性高:通过服务器精确控制允许访问的源。
    • 支持复杂请求:全面支持各种HTTP请求方法和自定义头。
  5. 缺点
    • 依赖后端支持:需后端配置响应头,对既有项目改造可能有难度。
    • 不适用于第三方API:若无法控制第三方API服务器,难以实施CORS。

(二)JSONP(JSON with Padding)

  1. 原理

    • 基于

你可能感兴趣的:(前端面试专栏,javascript,前端,node.js)