浏览器的同源策略🧐

243 阅读3分钟

一、什么是同源策略?

同源策略指用来保护浏览器安全的安全策略,是为了防止恶意网址向不同源网站读取敏感数据、窃取数据等行为。

二、同源策略限制了什么?

1. 脚本访问:不同源脚本不能访问或者修改对方的DOM

2. AJAX请求:不能向不同源的服务器发送ajax请求

3. cookie/session:不同获取不同源的cookie或session信息。

三、同源指什么?

同协议、同域名、同端口

四、跨域(绕过同源策略)

跨域的方法有哪些?

1.JSONP

利用script标签的src属性,将参数和回调函数拼接到url上,发送get请求

2.CORS

跨资源共享,通过http头实现,服务器通过设置相应的响应头字段告诉浏览器是否予许跨域请求。

CORS的工作流程
a.简单请求

(满足以下字段条件,浏览器会直接发送请求)

请求方法:GET/POST/HEAD

请求头仅限于

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type(仅限于 application/x-www-form-urlencodedmultipart/form-data 或 text/plain)。

请求中没有使用自定义头

(服务器响应)

服务器通过响应头Access-Control-Allow-Origin声明浏览器是否可以跨域请求

b.预检请求
  • 不满足简单请求条件的,先发送一个预检请求,询问服务器是否允许实际请求
  • 服务器通过响应头 Access-Control-Allow-OriginAccess-Control-Allow-Methods 等来声明允许的跨源请求
c.实际请求

如果预检请求通过,浏览器会发送实际请求

注意:Origin: <协议>://<域名>:<端口>,是浏览器发送请求时,自动带上请求头字段,无论是简单请求还是预检请求,都会包含 Origin 头

3.Websocket

Websocket连接可以建立在不同源上

4.代理服务器

a.原理

通过同源的服务器作为中介,实现不同源之间的通信

因为同源策略是浏览器的特性,中介服务器与不同源的目标服务器之间发送请求不需要跨域

b.代理服务器Nginx介绍

Nginx 是一款由俄罗斯的程序设计师 Igor Sysoev 所开发的高性能的 http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。


先介绍一下正向代理和反向代理的区别

正向代理: 代理客户端,指客户端向目标服务器发送请求时,由于中介服务器(代理服务器)的存在,服务端就不知道真实的客户端信息,只知道中介服务器的ip信息。(将简单的来说,就是帮助客户端隐藏信息)

反向代理: 代理服务端,指目标服务器接收客户端请求时,由于中介服务器(代理服务器)的存在,客户端不知道目标服务器的真实信息,只知道中介服务器的信息。(将简单的来说,就是帮助服务端隐藏信息)


Nginx的作用

反向代理

负载均衡

将服务负载均衡地分摊到多个服务器单元上执行,来提高网站、应用等服务的性能和可靠性

负载均衡算法

  • Round Robin(轮询):为第一个请求选择列表中的第一个服务器,然后按顺序向下移动列表直到结尾,然后循环。
  • Least Connections(最小连接):先选择连接数最少的服务器,在普遍会话较长的情况下推荐使用。
  • Source:根据请求源的 IP 的散列(hash)来选择要转发的服务器。这种方式可以一定程度上保证特定用户能连接到相同的服务器。

HTTP 服务器

Nginx也可以作为静态资源服务器使用,例如没有使用 SSR(Server Side Render)的纯前端资源,就可以依托Nginx来实现资源托管