首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Safari跨站点Ajax调用不存储cookie

基础概念

跨站点Ajax调用(Cross-Site Ajax Calls)是指在一个域名的网页上通过Ajax技术向另一个域名发送请求。Cookie是一种存储在用户浏览器上的小型数据片段,通常用于跟踪用户会话和身份验证。

问题原因

Safari浏览器出于安全考虑,对跨站点请求的Cookie管理有严格的规定。默认情况下,Safari不会存储跨站点请求的Cookie,这是为了防止跨站请求伪造(CSRF)攻击。

解决方法

1. 使用CORS(跨源资源共享)

确保服务器端配置了正确的CORS头,允许来自前端域名的跨域请求。例如,在服务器端设置以下响应头:

代码语言:txt
复制
Access-Control-Allow-Origin: https://your-frontend-domain.com
Access-Control-Allow-Credentials: true

2. 前端设置

在前端代码中,确保在发送Ajax请求时设置了withCredentials属性为true,以便浏览器在跨域请求中包含Cookie。

代码语言:txt
复制
$.ajax({
  url: 'https://your-backend-domain.com/api',
  xhrFields: {
    withCredentials: true
  },
  success: function(data) {
    console.log(data);
  }
});

3. 使用JSONP

如果CORS不可行,可以考虑使用JSONP(JSON with Padding)。JSONP通过动态创建<script>标签来实现跨域请求,但这种方法只支持GET请求,并且安全性较低。

代码语言:txt
复制
function handleResponse(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'https://your-backend-domain.com/api?callback=handleResponse';
document.body.appendChild(script);

4. 使用代理服务器

在前端和后端之间设置一个代理服务器,前端通过代理服务器发送请求,代理服务器再将请求转发到后端。这样可以避免跨域问题,因为所有请求都在同一个域名下进行。

代码语言:txt
复制
// 前端代码
$.ajax({
  url: '/proxy/api',
  success: function(data) {
    console.log(data);
  }
});

// 代理服务器代码(Node.js示例)
const express = require('express');
const request = require('request');

const app = express();

app.use('/proxy', (req, res) => {
  const url = 'https://your-backend-domain.com' + req.url;
  req.pipe(request(url)).pipe(res);
});

app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

应用场景

跨站点Ajax调用常用于以下场景:

  1. 单点登录(SSO):用户在一个域名下登录后,其他域名下的应用也能识别用户的登录状态。
  2. 数据共享:不同域名下的应用需要共享数据,例如在一个电商网站上查看另一个域名的商品信息。
  3. 第三方服务集成:集成第三方API,例如地图服务、支付服务等。

参考链接

通过以上方法,可以有效解决Safari浏览器跨站点Ajax调用不存储Cookie的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTTP协议冷知识大全

域是个很头痛的问题。 当你有多个后端服务,但是只有一个前端的时候,你想做前后端分离,就会遇到域问题。你发现你的前端js调用后端服务时控制台告诉你ok。...这些代码的逻辑是调用站点A的API来获取站点A的数据,因为可以骑着(Ride)站点A的会话cookie。而这些数据正好是用户私密性的。于是用户在站点A上的私有信息就被站点B上的代码窃走了。...callback=some_callback"> 因为JSONP是携带cookie信息的,所以能有效避免搭便车攻击。...而CORS则可以发送任意类型的请求,可以选择性携带cookie。 CORS是通过Ajax发送的域请求技术。CORS的请求分为两种,一种是简单请求,一种是复杂请求。...浏览器发现Ajax的请求是域的,就会在请求头添加一个Origin参数,指明当前请求的发起站点来源。服务器根据Origin参数来决定是否授权。 如果是简单请求,Ajax直接请求服务器。

72620

新浪微博IPAD客户端XSS(file域) + 构造Worm

这就比较有意思了,因为在safari下,本地域是可以任意域的。 比如我域请求乌云的首页: ? 域是什么概念,比如我在这里插入一个XSS,能直接打到你乌云的cookie。...这就造成了一个很大的问题,我试过即使我在外面的safari浏览器中登录了某个网站,但在APP里也获取不到这个网站的COOKIE。二者不属于一个APP,所以数据是隔离的。...因为我们可以域,所以我们通过ajax来发送POST包,将Referer、X-Requested-With、Content-Type加入header。...在chrome下,我们是不能通过ajax修改Referer的,但safari却没这么安全的设置。...我明明应该有weibo.com的cookie的呀?后来izy发现,原来是因为我长时间(这个测试是第二天做的)操作,所以cookie已经过期了。

98340
  • 前端面试题ajax_前端性能优化面试题

    等请求完,页面刷新,新内容也会出现,用户看到新内容 3,如何解决域问题?...它的精髓很简单:它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。...要完成一次CSRF攻击,受害者必须依次完成两个步骤: 登录受信任网站A,并在本地生成Cookie。 在登出A的情况下,访问危险网站B。...Cookie和localstorage、session storage的区别 Cookie技术浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好, 存储的内容较小, cookie...WebStorage则不能超过8MB,操作简单;可以代替一些cookie的工作,一般主要是用于存储一些本地数据,购物车数据之类的在安全方面的话,都不安全,一般就是对数据进行一些简单的加密,如base64

    2.4K10

    Cook Cookie, 我把 SameSite 给你炖烂了

    直到现在,其实很多前端开发者对这个变化是无感的,主要两个原因: •鉴权token化,cookie更多充当存储;•业务太简单,cookie使用的场景都是同站的,所以新规并没有多大影响,新规是针对站做cookie...网站;当用户再次打开crm服务或其他同站网站时,也会先调用鉴权服务,由于cookie还有效,所以用户就不用再去登录了,可以继续在网站浏览。...先是调用了了top-tmm.taobao.com/login_api.do, 这个请求会携带*.taobao.com域下的cookie, 从而服务端就能知道这个用户登录过。...需要设置credentials属性为include(ajax有相似设置), 但这只是开始,因为设置了这个属性携带了cookie后,这个请求就变成了非简单请求,服务端需要针对请求的站点设置Access-control-Allow-Credentials...4.ajax 和 fetch 请求,响应302, 是不能直接改变浏览器地址进行跳转的,除非前端手动去操作;这就是为什么我们会说ajax 和 fetch 是前后端分离的开始,因为以前很多jsp 或 php

    2.3K10

    HTML5学习-day02【悟空教程】

    传统的跳转翻页的可取之处 传统的不使用Ajax站点,每一个翻页是一个跳转,然后你可以在浏览器地址栏里看到诸如?page=2这样的参数。...此外请注意,history.pushState()及history.replaceState()本身调用时是触发popstate事件的。pop和push毕竟不一样!...现在可以在刷新的状况下操作浏览器地址栏和历史记录了,那同一站点的普通链接跳转是否都可以转变为Ajax来提升使用体验?是的,而且已经有了pjax[]这些专门完成这个功能的作品。...的提出的初衷主要是为了解决cookie在数据存储时的一些不足。...chrome5是是是否否safari4是否是否否opera是否否否否 web storage的安全注意事项: 明文存储,不要存敏感信息 不能抵御xss漏洞攻击 对于存储的数据要严格过滤,防止自身产生存储

    1.7K30

    前端网络安全

    3)存储型:通过输入发送到服务端存储到数据库。 2、防范措施 ​ 1)对用户输入进行过滤或转码。 ​ 2)csp(内容安全策略)。 ​...,并发出一个请求要求访问第三方站点A; ​ 5)浏览器在接收到这些攻击性代码后,根据网站B的请求,在用户不知情的情况下携带Cookie信息,向网站A发出请求。...3、防范措施 ​ 1)cookie的SameSite属性,SameSite Cookie 允许服务器要求某个 cookie站请求时不会被发送,从而可以阻止站请求伪造攻击。 ​...浏览器会在同站请求、站请求下继续发送 cookies,区分大小写。 **Strict。**浏览器将只在访问相同站点时发送 cookie。 **Lax。...在新版本浏览器中,为默认选项,Same-site cookies 将会为一些站子请求保留,如图片加载或者 frames 的调用,但只有当用户从外部站点导航到URL时才会发送。

    89030

    Flask session cookie 失效在Safari中的解决方法

    这个问题常见的原因是 Safari 中的隐私设置,尤其是涉及到“防止站追踪”和第三方 cookie 的处理。...而 Flask 默认使用第三方 cookie存储 session 数据。因此,在 Safari 和 iOS 中,Flask 的 session cookie 无法被设置。...要解决这个问题,有两种方法:修改 Flask 的配置,使其使用第一方 cookie存储 session 数据。在 Safari 和 iOS 中启用对第三方 cookie 的支持。...点击“Safari”菜单。选择“偏好设置”。点击“隐私”选项卡。在“阻止站点跟踪”下,选择“允许来自访问过的网站”。...Safari 和 iOS 会在默认情况下阻止第三方 cookie 的设置。而 Flask 默认使用第三方 cookie存储 session 数据。

    9310

    【全栈修炼】414- CORS和CSRF修炼宝典

    —— 维基百科 核心知识: CORS是一个W3C标准,它允许浏览器向源服务器,发出XMLHttpRequest 请求,从而克服 AJAX 只能同源使用的限制。...还需要在 AJAX 请求中开启 withCredentials 属性,否则浏览器也不会发送 Cookie 。...当 “预检”请求 通过以后,才会正式发起 AJAX 请求,否则报错。...跟网站脚本(XSS)相比,XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任。—— 维基百科 核心知识: 站点请求伪造请求。...CSRF 攻击流程 上面描述了 CSRF 攻击的流程,其中受害者完成两个步骤: 登录受信任网站 A ,并在本地生成保存Cookie; 在登出 A 情况下,访问病毒网站 B; 可以理解为:若以上两个步骤没有都完成

    2.9K40

    AJAX 原理与 CORS

    ,简称 XHR,它用于使浏览器向服务器请求额外的数据而卸载页面,极大的提高了用户体验。...: http://www.baidu.com 如上就可以实现最简单的域访问,但是此时不能携带任何的 cookie,如果我们需要传递 cookie进行身份认证,需要设置: xhr.withCredentials...只能设置请求头部的content-type 不能访问响应头部信息 只支持get/post方法 通过这些区别可以阻止一部分的 CSRF(Cross-SiteRequestForgery,站点请求伪造)...和 XSS(Cross-SiteScripting,站点脚本)。...调用getAllResponseHeaders(),结果为空 其余域方法 上面的两种方法已经很成熟了,但是仍然有一部分方法可以域,比如 图像Ping: var img = new Image();

    1.4K21

    Web前端安全之站脚本攻击实战

    二、站脚本攻击(XSS) 站脚本攻击的概念这里就不再赘述了,这里简单说一下,站脚本攻击主要分为反射型和存储型。相较于存储型,反射型的危害会小一些。...我们输入的脚本如下: 获取cookie的方式很简单,直接document.cookie,我们这里获取之后用jquery(根据站点实际情况,也可以使用原生ajaxajax将获取到的cookie发送到我们自己的服务器...,这里,由于当前站点与服务器站点可能存在域限制,我们采用了jsonp方式实现域发送。...部分日志如下: 拿到的Cookie中有一个SESSION_ID字段,我们可以通过这个ID,在登录的情况下,访问后端需要登录授权的接口,PHP脚本如下: 得到的结果如下: 我们成功的拿到了某个接口的数据...获取cookie已经可以算作到了一个很有威胁的地步了,它不仅影响当前网页,可能还会影响整个站点,后续还可以完成更多可怕的事情。

    1.2K50

    P3P解决cookie

    P3P标准的构想是:Web 站点的隐私策略应该告之访问者该站点所收集的信息类型、信息将提供给哪些人、信息将被保留多少时间及其使用信息的方式,如站点应做诸如 “本网站将监测您所访问的页面以提高站点的使用率...访问支持P3P网站的用户有权查看站点隐私报告,然 后决定是否接受cookie 或是否使用该网站。...利用P3P实现域 有别于JS域、IFRAME域等的常用处理办法,通过发送P3P头信息而实现的域。...Safari 否 否 HTTP、JS可读不可写可以借助借助Post提交表单,实现写操作. Opera 是 否 JS可读写 HTTP可读不可写....本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    95720

    有关Web 安全学习的片段记录(不定时更新)

    这种编码访问才能触发的xss 漏洞,最简单的利用方式是写一个html,里面用 iframe src 引入完整编码 payload 链接,用 ie 访问此 html。..._setcookie(self.session_id) // server 设置Client 的cookie,Set-Cookie 头,即调用下面的函数 web.setcookie(cookie_name...持久cookie: 存储在硬盘上,(不管浏览器退出,或者电脑重启,持久cookie都存在), 持久cookie有过期时间。...; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly cookie 无法浏览器存在。...Flash安全沙箱 分为本地沙箱与远程沙箱 类似于同源策略,在同一域内的资源会被放到一个安全组下,称为安全沙箱 Web站点通过crossdomain.xml文件配置可以提供允许的域域访问本域上内容的权限

    1.6K00

    Web前端知识体系精简

    为了防止XSS攻击,浏览器对Ajax做了限制,不允许Ajax域请求服务器,就是只能访问当前域名下的url。 当然,如果确信你的站点不存在域的风险,可以在服务端主动开启域请求。...JSONP是利用脚本(script)域能力来模拟Ajax请求。 CORS是一个W3C标准,全称是”域资源共享”(Cross-origin resource sharing)。...它允许浏览器向源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。...但是 cookie 不适合大量数据的存储,因为每请求一次页面,cookie 都会发送给服务器,这使得 cookie 速度很慢而且效率也不高。...因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST),如下所示: Firefox和Safari允许cookie多达4097个字节,包括名(name)、值(value)和等号。

    1.4K30

    Cookie详解整理

    1.Cookie的诞生 由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了存储web中的状态信息,以方便服务器端使用。比如判断用户是否是第一次访问网站。...Cookie的主要构成如下: name:一个唯一确定的cookie名称。通常来讲cookie的名称是区分大小写的。 value:存储cookie中的字符串值。...这并非危言耸听,一种名为站点脚本攻击(Cross site scripting)可以达到此目的。...通常站点脚本攻击往往利用网站漏洞在网站页面中植入脚本代码或网站页面引用第三方法脚本代码,均存在站点脚本攻击的可能,在受到站点脚本攻击时,脚本指令将会读取当前站点的所有 Cookie 内容(已不存在...Cookie 作用域限制),然后通过某种方式将 Cookie 内容提交到指定的服务器(如:AJAX)。

    80440

    超详细的Web 前端知识体系,等你来挑战!

    为了防止XSS攻击,浏览器对Ajax做了限制,不允许Ajax域请求服务器,就是只能访问当前域名下的url。 当然,如果确信你的站点不存在域的风险,可以在服务端主动开启域请求。...JSONP是利用脚本(script)域能力来模拟Ajax请求。 CORS是一个W3C标准,全称是”域资源共享”(Cross-origin resource sharing)。...它允许浏览器向源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。...4、本地存储 本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本,数据以键值对的形式保存,可以设置过期时间。...因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST),如下所示: Firefox和Safari允许cookie多达4097个字节,包括名(name)、值(value)和等号。

    1.1K70

    Python从入门到摔门(7):【总结】浏览器 User-Agent 大全

    2、Cookie是基于浏览器的,因此当同一台电脑有多个人使用时,服务器也只会生成一个Cookie。虽然是多个人,但服务器会认为是一个用户。 3、Cookie是无法设备进行设置的。...Flash cookie的优势在于: 1、浏览器 不管用户的计算机上安装了多少个浏览器或者浏览器的不同版本,使用Flash Cookie能够使所有的浏览器共用一个Cookie。...2、浏览器还限制站点可以在用户计算机上存储Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie;当存储更多 Cookie时,最旧的 Cookie 便会被丢弃。...有些浏览器还会对它们将接受的来自所有站点Cookie 总数作出绝对限制,通常为 300 个。 Cookie的失效时间 1、浏览器的Cookie设置会决定是否保存Cookie数据。...如果设置该属性,那么Cookie只在浏览网页期间有效,关闭浏览器,这些Cookie自动消失,绝大多数网站属于这种情况。

    2.4K21
    领券