浏览器跨域解决方案.pptxVIP

浏览器跨域解决方案

2023WORKSUMMARY

REPORTING

•跨域问题概述

•浏览器同源策略

•跨域解决方案

•跨域资源共享(CORS)详解

•JSONP详解

•postMessage详解

目录

CATALOGUE

跨域问题概述

PART01

同源策略是指浏览器要求所有的脚本请求必须来自同一域、

同一协议(HTTP或HTTPS)和同一端口。如果请求的资源不符合这些条件，浏览器就会阻止请求，从而产生跨域问题。

跨域问题是指由于浏览器的同源策略限制，不同域的网页之

间无法直接进行通信，导致请求资源或发送请求时出现错误。

什么是跨域问题

同源策略是浏览器为了保护用户数据和隐私而采取的安全措施，防止恶意网站通过跨域请求获取用户的敏感信息。

为了提高网页的安全性，防止恶意脚

本的跨站请求伪造(CSRF)攻击，

浏览器实施了同源策略。

跨域问题的产生原因

当一个网页需要向另一个域发送表单数据时，例

如使用表单的POST请求。

当一个网页需要从另一个域获取数据时，例如使

用AJAX请求或FetchAPI进行数据交互。

当一个网页需要加载来自其他域的脚本文件时，

例如引入外部库或框架。

3

1

2

跨域问题的常见场景

浏览器同源策略

PART02

同源策略是浏览器安全机制

的一部分，它要求网页上的

所有资源必须来自同一域、同一协议(如HTTP或HTTPS)

和同一端口。

同源策略的目的是为了防止

恶意脚本在未经授权的情况

下访问和操作其他网页的资

源，从而保护用户的隐私和

安全。

同源是指网页的协议、域名

和端口号都相同。如果任何

一个部分不同，则被认为是

不同源。

同源策略的定义

同源策略的目的

限制了网页的功能

由于同源策略的限制，一些需要跨域访问的

虽然同源策略可以保护用户的隐私和安全，

但如果开发者没有正确处理跨域问题，可能

会导致安全漏洞被利用。

由于同源策略的限制，网页开发者需要额外处理跨

域问题，增加了开发的难度和复杂性。

网页功能可能无法实现，例如通过AJAX请

求获取其他网页的数据。

同源策略的限制

增加了网页开发的难度

可能存在安全隐患

跨域解决方案

PART03

详细描述

JSONP通过在服务器端返回一个JavaScript函数调用，并将数据作为参数传递给该函数，从而实现跨域请求。客户端通过在script标签中设置src属性为跨域请求的URL，来加载并执行返回的JavaScript代码。

总结词

JSONP是一种利用动态脚本标签(script标签)实现跨域请求的方法。

JSONP

CORS通过在服务器端设置适当的HTTP响应头(如Access-Control-Allow-Origin)，来允许或限制哪些源可以

访问该资源。客户端在发送跨域请求时，会检查服务器响应头中的CORS相关字段，以确定是否允许跨域请求。

CORS是一种基于浏览器的跨域解决方案，通过设置HTTP响应头来实现。

CORS

详细描述

总结词

postMessageAPI允许在一个窗口或iframe中向另一个窗口或iframe发送消息，无论是否同源。发送方通过调用postMessage方法，将数据作为参数传递给接收方。接收方可以通过监听message事件来接收并处理发送过来的消息。这种方法可以在不同域的窗口或iframe之间传递数据，实现跨域通信。

postMessage是一种通过postMessageAPI实现不同窗口或iframe之间的通信方式，可以用于解决跨域问题。

postMessage

VS

详细描述

总结词

跨域资源共享(CORS)

详解

PART04

当浏览器向不同域的服务器发送请求时，会先向服务器请求CORS许可，只有当服务器同意后，浏览器才会继续请求资源。

跨域资源共享(CORS)是一种基于浏览器的安全机制，允许不同域的网页之间进行数据交互。

它通过在服务器端设置特定的响应头，来告知浏览器允许哪些源进行访问。

CORS的原理

CORS的请求类型

01

除了上述四种常见的请求类型外，

CORS还支持其他类型的请求，

如`HEAD`和`OPTIONS`。

PUT和DELETE:用于更新或删除数据。

04

03

02

服务器在响应中包含一个名为`Access-Control

-Allow-Origin`的头字段，指定允许哪些源进行访问。

如果服务器允许跨域请求，浏览器会发送实际的

请求，并携带一个名为`Origin`的头字段，表示请求的来源。