您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

跨域跨站第一方第三方介绍

时间：12-14来源：作者：点击数：

首先要理解的一点就是跨站和跨域是不同的。同站（same-site）/ 跨站（cross-site）和第一方（first-party）/ 第三方（third-party）是等价的。但是与浏览器同源策略（SOP）中的「同源（same-origin）/ 跨域（cross-origin）」是完全不同的概念。

同源策略的同源是指两个 URL 的协议/主机名/端口一致。例如， https://www.taobao.com/pages/... ，它的协议是 https，主机名是 www.taobao.com ，端口是 443。

同源策略作为浏览器的安全基石，其「同源」判断是比较严格的，相对而言，Cookie 中的「同站」判断就比较宽松：只要两个 URL 的 eTLD+1 相同即可，不需要考虑协议和端口。其中，eTLD 表示有效顶级域名，注册于 Mozilla 维护的公共后缀列表（Public Suffix List）中，例如，.com、.co.uk、.github.io 等。eTLD+1 则表示，有效顶级域名+二级域名，例如 taobao.com 等。

举几个例子，www.taobao.com 和 www.baidu.com 是跨站，www.a.taobao.com 和 www.b.taobao.com 是同站，a.github.io 和 b.github.io 是跨站（注意是跨站)。

跨站

跨域

针对浏览器同源策略
协议、域名（子域名、主域名)、端口号
防止 XSS、CSRF 等

同源策略限制内容有：

REST 请求限制
Cookie、LocalStorage、IndexedDB 等存储性内容（SessionStorage 和浏览器窗口有关）
DOM 节点
AJAX 请求发送后，结果被浏览器拦截了（能发送出去，只是被浏览器拦截）
同源策略是浏览器在接收加载资源之前对其来源进行了检查，然后限制加载。
不允许发送 POST 请求：在发送 POST 请求之前会发送 OPTIONS 请求，HTTP 响应状态码为 403（Forbidden）。
允许发送 GET 请求：HTTP 响应状态码为 200，但是不能读取服务器返回的数据。

跨域解决方案

https://www.cdsy.xyz/computer/programme/html_div_css/251018/cd74843.html

https://www.cdsy.xyz/computer/programme/html_div_css/251101/cd74886.html

1、通过 jsonp 跨域（only get 请求；类似 eval 原理；兼容性好）

2、 document.domain + iframe 跨域

3、 location.hash + iframe

4、 window.name + iframe 跨域

5、 postMessage 跨域

6、跨域资源共享（CORS）

7、 nginx 代理跨域

8、 nodejs 中间件代理跨域

9、 WebSocket 协议跨域

jsonp 原理

Web 前端事先定义一个用于获取跨域响应数据的回调函数，并通过没有同源策略限制的 script 标签发起一个 get 请求（将回调函数的名称放到这个请求的 query 参数里），然后服务端返回这个回调函数的执行（类似 eval 函数)，并将需要响应的数据放到回调函数的参数里，前端的 script 标签请求到这个执行的回调函数后会立马执行，于是就拿到了执行的响应数据。

jsonp 为什么不支持 post 方法

以下是具体解释：

<script> 标签的限制: JSONP 的核心是动态创建 <script> 标签，并将目标 URL 作为其 src 属性值。<script> 标签天生就只支持 GET 请求，它会向指定的 URL 发送一个 GET 请求来获取 JavaScript 代码。无法使用 <script> 标签发送 POST 请求。
同源策略的绕过: 浏览器同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一种关键的安全机制，旨在防止恶意网站窃取数据。 JSONP 利用了 <script> 标签不受同源策略限制的特点。服务器端会将数据包装在一个预先定义好的 JavaScript 回调函数中，然后浏览器在接收到响应后会执行该回调函数，从而实现跨域数据传递。这个过程只能通过 GET 请求完成，因为这是 <script> 标签的工作方式。
POST 请求的特性: POST 请求通常用于向服务器提交数据，并且数据包含在请求体中。 <script> 标签的 src 属性只能指定 URL，无法设置请求体，因此无法通过 <script> 标签发送包含数据的 POST 请求。
CORS 的出现: 跨域资源共享 (CORS) 是一种更现代、更安全、更灵活的跨域解决方案。CORS 允许服务器明确指定哪些来源可以访问其资源，以及允许使用哪些 HTTP 方法（包括 GET、POST、PUT、DELETE 等）。由于 CORS 的出现，JSONP 的使用场景已经大大减少。如果需要跨域发送 POST 请求，CORS 是更好的选择。

总结：JSONP 的设计初衷就是利用 <script> 标签的特性来绕过同源策略，而 <script> 标签只支持 GET 请求，因此 JSONP 无法支持 POST 方法。在现代 Web 开发中，应该优先考虑使用 CORS 来解决跨域问题，而不是使用 JSONP。

标签是允许跨域加载资源

<img src=""> 
<link href=""> 
<script src="">
<iframe src="">
<from>

浏览器跨域拦截证据

// 客户端请求
const result = await axios.get('http://119.23.247.30:8081/test-get');
// 服务器代码
app.get('/test-get', function (req, res) {
  console.log('get req')
  res.send('Hello World');
})

服务器显示