【前端面试】三次握手/http/https,是否跳转携带cookie,跨域

news/2024/12/21 14:48:06/
http://www.w3.org/2000/svg" style="display: none;">

TCP三次握手

  • TCP三次握手是为了在客户端和服务器之间建立可靠的连接。首先,客户端向服务器发送一个SYN包,请求建立连接,并进入SYN_SENT状态;服务器收到SYN包后,回复一个SYN+ACK包,表示同意建立连接,并进入SYN_RECV状态;客户端收到SYN+ACK包后,再向服务器发送一个ACK包,确认连接建立,双方进入ESTABLISHED状态,此时连接建立成功,可以开始传输数据。

HTTP请求

  • HTTP请求由客户端发起,用于向服务器请求资源。一个完整的HTTP请求包括请求行、请求头、空行和请求体。请求行包含请求方法(如GET、POST等)、请求的URL和HTTP协议版本;请求头包含各种附加信息,如用户代理、接受的内容类型等;空行用于分隔请求头和请求体;请求体则是在POST等请求方法中向服务器发送的数据。

HTTPS

  • 加密原理:HTTPS在HTTP的基础上加入了SSL/TLS协议,通过非对称加密和对称加密相结合的方式对数据进行加密。在连接建立初期,客户端和服务器通过非对称加密算法交换密钥,然后使用对称加密算法对数据进行加密传输,这样既保证了密钥交换的安全性,又提高了加密和解密的效率.
  • 优势:安全性高,能防止数据在传输过程中被窃取、篡改,确保数据的完整性和保密性,还可通过数字证书验证服务器身份,防止中间人攻击;在搜索引擎优化方面,搜索引擎偏爱HTTPS网站,其在搜索结果中的排名可能更靠前.
  • 性能影响:由于需要加密和解密数据,HTTPS的性能相对HTTP略差,连接速度会稍慢一些,但随着硬件性能的提升和加密算法的优化,这种性能差异在大多数情况下并不明显.
  • 成本方面:HTTPS需要购买SSL证书,尤其是对于需要高级别安全认证的网站,证书费用可能较高。同时,部署和维护HTTPS也需要一定的技术知识和资源投入.

跳转是否携带cookie

是否 b 页面 会带 a 页面的 cookie,取决于以下几个因素:

1. 是否同域

  • 同域跳转:如果 a 页面b 页面 在同一个域名、协议(http/https)和端口下,那么浏览器会自动携带 a 页面 的 cookie 到 b 页面

    • 例如:
      • a 页面:https://example.com/a
      • b 页面:https://example.com/b
    • 在这种情况下,跳转到 b 页面 时,浏览器会携带 example.com 域下的所有有效 cookie
  • 跨域跳转:如果 a 页面b 页面 不在同一个域名下,那么浏览器会遵循 同源策略a 页面 的 cookie 通常不会自动携带到 b 页面,除非设置了跨域 cookie 相关的正确属性。

    例如:

    • a 页面:https://siteA.com/a
    • b 页面:https://siteB.com/b
    • 在这种情况下,a 页面 的 cookie 不会 自动带到 b 页面,除非以下条件满足。

2. SameSite 属性

这个属性控制 cookie 是否会在跨站请求中携带:

  • SameSite=Lax:cookie 仅在同一站点的请求中发送,部分跨站请求(如 GET 请求)也会发送 cookie,但 POST 请求等会被阻止。如果 a 页面b 页面 在同一站点且是 GET 请求,cookie 会被带上。
  • SameSite=Strict:cookie 只在同一站点的请求中发送,跨站请求(即从 https://siteA.com 跳转到 https://siteB.com)不会发送该 cookie。
  • SameSite=None:cookie 会在所有跨站请求中发送,但必须加上 Secure 标记,并且请求必须通过 HTTPS 发起。

结论:

  • 如果 SameSite=LaxSameSite=Strict,那么跨域跳转时,a 页面 的 cookie 不会 被携带到 b 页面
  • 如果 SameSite=NoneSecure,并且 b 页面 的请求是通过 HTTPS 发起的,那么 a 页面 的 cookie 被带到 b 页面,即使它们处于不同的域。

3. Secure 标志

  • 如果 cookie 设置了 SameSite=None,那么该 cookie 也必须使用 Secure 标志,即必须通过 HTTPS 传输。
  • 如果 a 页面 的 cookie 没有 Secure 标志,而是跨域跳转到 b 页面,那么 a 页面 的 cookie 即使设置为 SameSite=None,也不会发送。

4. 跨域请求(例如,通过 JavaScript 跳转)

如果你通过 JavaScript 来跳转页面(如 window.location.href),浏览器的行为与点击普通的 <a> 标签链接一样。浏览器会检查 cookie 的 SameSite 属性,决定是否携带 cookie。如果是跨域跳转,a 页面 的 cookie 会根据上述规则(SameSiteSecure)决定是否携带。

5. 浏览器的隐私策略

现代浏览器(如 Chrome 和 Firefox)对 第三方 cookie 进行了更严格的限制。例如,如果 a 页面b 页面 不在同一个域下,浏览器可能会默认阻止跨站 cookie 的发送,除非明确允许。因此,即使设置了 SameSite=NoneSecure,某些浏览器仍然可能因为隐私策略而阻止 cookie 发送。

总结:

  • 同域跳转b 页面会带上 a 页面的 cookie。
  • 跨域跳转:如果 ab 是不同的域,且 a 页面的 cookie 设置了 SameSite=NoneSecure 标记,浏览器会在跳转时携带 a 页面的 cookie 到 b 页面。否则,cookie 不会被携带。
  • 浏览器隐私策略:某些浏览器可能会阻止第三方 cookie 的发送,尤其是在跨域的情况下。
    以下是一些常见的解决跨域问题的方法:

1. JSONP(JSON with Padding)

  • 原理:利用<script>标签的跨域特性。浏览器允许<script>标签引用不同域的脚本文件。JSONP通过动态创建<script>标签,将一个回调函数名作为参数传递给跨域的服务器接口。服务器返回的数据会包裹在这个回调函数中,在浏览器端执行,从而实现跨域获取数据。
  • 适用场景:主要用于GET请求,适用于获取一些简单的公开数据,如获取天气预报数据、公共的新闻列表等。
  • 示例代码(在JavaScript中)
function jsonpCallback(data) {console.log(data);
}
var script = document.createElement('script');
script.src = 'https://example.com/api?callback=jsonpCallback';
document.getElementsByTagName('head')[0].appendChild(script);

2. CORS(跨域资源共享)

  • 原理:是一种现代浏览器支持的跨域解决方案。服务器通过在响应头中设置Access - Control - Allow - Origin等相关字段,来允许指定的源(域名)访问资源。它可以实现更安全、更灵活的跨域请求,支持多种HTTP请求方法(GET、POST等)。
  • 适用场景:适用于前后端分离的项目,在服务器能够控制响应头设置的情况下广泛使用,如Web API开发等场景。
  • 示例代码(在服务器端,以Node.js为例)
const http = require('http');
const server = http.createServer((req, res) => {res.setHeader('Access - Control - Allow - Origin', '*'); res.setHeader('Access - Control - Allow - Methods', 'GET, POST');res.setHeader('Access - Control - Allow - Headers', 'Content - Type');// 处理具体请求逻辑//...
});
server.listen(3000);
  • 注意点:如果要在跨域请求中携带Cookie等凭证信息,还需要设置Access - Control - Allow - Credentials: true,并且在前端请求时设置credentials: 'include'

3. 代理服务器

  • 原理:在前端和后端之间设置一个代理服务器。前端请求发送到代理服务器,代理服务器再将请求转发给实际的后端服务器。因为前端和代理服务器通常在同一域内,所以不存在跨域问题。代理服务器获取后端服务器的响应后,再将其返回给前端
  • 适用场景:在开发环境下经常使用,例如使用Webpack的dev - server作为代理服务器。也适用于对安全性和隐私要求较高的场景,通过代理服务器可以对请求和响应进行过滤和控制。
  • 示例代码(在Webpack配置文件中)
module.exports = {//...devServer: {proxy: {'/api': {target: 'https://backend - server - domain.com',changePath: true,pathRewrite: {'^/api': ''}}}}
};

这会将前端/api开头的请求代理到https://backend - server - domain.com服务器。


http://www.ppmy.cn/news/1556951.html

相关文章

深入了解 MyBatis:简化 Java 数据库交互

引言 在现代软件开发中&#xff0c;数据库操作是不可或缺的一部分。为了简化 Java 应用程序与关系型数据库之间的交互&#xff0c;MyBatis 成为了一款非常受欢迎的持久层框架。本文将详细介绍 MyBatis 的核心概念、配置和使用方法&#xff0c;并分享一些最佳实践&#xff0c;帮…

国际抖音TikTok矩阵运营的关键要素有哪些?

在全球化的今天&#xff0c;TikTok作为新兴的社交媒体平台&#xff0c;为国际品牌提供了前所未有的营销机遇。通过构建TikTok矩阵&#xff0c;品牌可以迅速扩大国际影响力&#xff0c;精准触达目标受众&#xff0c;提升品牌认知度和用户粘性。本文将详细探讨国际抖音TikTok矩阵…

Group FLUX - User Usage Survey Report

文章目录 User Feedback Summary: Software Advantages and FeaturesUser Feedback Issues and Suggested Improvements1. Security Concerns:Improvement Measures: 2. System Performance and Loading Speed:Improvement Measures: 3. Data Display Issues:Improvement Measu…

React 第十七节 useMemo用法详解

概述 useMemo 是React 中的一个HOOK&#xff0c;用于根据依赖在每次渲染时候缓存计算结果&#xff1b; 大白话就是&#xff0c;只有依赖项发生变化时候&#xff0c;才会重新渲染为新计算的值&#xff0c;否则就还是取原来的值&#xff0c;有点类似 vue 中的 computed 计算属性…

CH340系列芯片驱动电路·CH340系列芯片驱动!!!

目录 CH340基础知识 CH340常见类型 CH340引脚功能讲解 CH340驱动电路 CH340系列芯片数据手册 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-CSDN博客 ME62…

基础库正则表达式

我们已经可以用requests 库来获取网页的源代码&#xff0c;得到 HTML 代码。但我们真正想要的数据是包含在 HTML代码之中的&#xff0c;要怎样才能从 HTML,代码中获取想要的信息呢?正则表达式就是其中一个有效的方法。 本篇博客我们将了解一下正则表达式的相关用法。正则表达…

IDEA搭建SpringBoot,MyBatis,Mysql工程项目

目录 一、前言 二、项目结构 三、初始化项目 四、SpringBoot项目集成Mybatis编写接口 五、代码仓库 一、前言 构建一个基于Spring Boot框架的现代化Web应用程序&#xff0c;以满足[公司/组织名称]对于[业务需求描述]的需求。通过利用Spring Boot简化企业级应用开发的优势&…

STM32 水质水位检测项目(硬件架构)及(软件架构)

硬件选型 水位测量模块 TDS采集模块 外置ADC模块&#xff08;ADS1115&#xff09; 水位测量模块使用方法 水位测量原理 压力传感器&#xff1a;水越深压力越大 P ρgh Fps Fρgh*s P大气压 水位测量传感器本质上是一个压力测量传感器。压力的值和传感器产生的电压值是线…