- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
据我所知,我有一个现在相当常见的设置:一个位于其自己域(例如 myapi.com
)上的后端 REST API,以及一个单页前端应用程序这是在其他地方提供的,例如 myapp.com
。
SPA 是 API 的客户端,API 要求用户在执行操作之前进行身份验证。
后端 API 使用 cookie 来存储某些允许的来源(其中 myapp.com
)的 session 数据。这是为了有一个安全的总线来传输和存储身份验证数据,而不必担心客户端。
在 Chrome、Opera 和 Firefox 中,这工作得很好:进行 API 调用来验证用户身份,返回 Cookie 并将其存储在浏览器中,以便与下一次调用一起推送。
另一方面,Safari 确实收到了 cookie,但拒绝存储它们:
我怀疑 Safari 将 API 域视为第 3 方 cookie 域,因此阻止存储 cookie。
这是 Safari 中的预期行为吗?如果是这样,有哪些最佳实践可以解决这个问题?
最佳答案
延续 answering your own question 的传统关于这一点。
TL;DR 这是 Safari 中所需的行为。解决这个问题的唯一方法是将用户带到 API 域(问题中的 myapi.com
)上托管的网页,并从那里设置一个 cookie - 任何东西,你都可以编写一个小代码如果你愿意的话,可以在 cookies 里放一首诗。
完成此操作后,该域将被列入“白名单”,Safari 会善待您,并在任何后续调用中设置您的 Cookie,即使来自不同域的客户端也是如此。
这意味着您可以保持身份验证逻辑不变,只需引入一个为您设置“种子”cookie 的哑端点。在我的 Ruby 应用程序中,如下所示:
class ServiceController < ActionController::Base
def seed_cookie
cookies[:s] = {value: 42, expires: 1.week, httponly: true} # value can be anything at all
render plain: "Checking your browser"
end
end
客户端,您可能需要检查if the browser making the request is Safari并在打开那个丑陋的弹出窗口后推迟您的登录逻辑:
const doLogin = () => {
if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
const seedCookie = window.open(`http://myapi.com/seed_cookie`, "s", "width=1, height=1, bottom=0, left=0, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no")
setTimeout(() => {
seedCookie.close();
// your login logic;
}, 500);
} else {
// your login logic;
}
}
更新:上面的解决方案对于登录用户来说效果很好,即它正确地将当前浏览器 session 的 API 域“列入白名单”。
但不幸的是,用户刷新页面似乎会使浏览器重置为原始状态,其中 API 域的第 3 方 cookie 被阻止。
我发现处理窗口刷新情况的一个好方法是 detect it in javascript页面加载后,将用户重定向到与上面的 API 端点执行相同操作的 API 端点,然后将用户重定向到他们导航到的原始 URL(正在刷新的页面):
if(performance.navigation.type == 1 && /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
window.location.replace(`http://myapi.com/redirect_me`);
}
让事情变得复杂的是,如果响应的 HTTP 状态是 30X(重定向),Safari 将不会存储 cookie。因此,Safari 友好的解决方案涉及设置 cookie 并返回 200 响应以及将处理浏览器内重定向的 JS 片段。
就我而言,作为 Rails 应用程序的后端,该端点如下所示:
def redirect_me
cookies[:s] = {value: 42, expires: 1.week, httponly: true}
render body: "<html><head><script>window.location.replace('#{request.referer}');</script></head></html>", status: 200, content_type: 'text/html'
end
关于reactjs - 前后端分离 : Safari not storing cookies from API which is hosted on a separate domain than its Frontend SPA client,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52446840/
这个问题在这里已经有了答案: Joining elements of a list in GNU Make (3 个回答) 2年前关闭。 我有这个: FOO = foo1 foo2 ... fooN
我们有两种产品在客户现场实现,其中一个需要另一个在场。我在与附加组件所需的数据库对象的主要产品相同的数据库中实现了一个单独的模式。因为该附加组件理论上也可以成为 future 产品的附加组件(尽管目前
它的作用:这是一个 Android 应用程序,将模仿我的团队正在创建的网站 apdata.info。这是第二页,它将显示符合他们请求的搜索的机场。 PHP ... $sql = "SELECT apn
我在 Angular 4 中使用 slider 。下面是我的 HTML 代码: Actual/Optimised
Linux RHEL5 机器 如何对以下输入进行排序以在 latest 变量中获取 1.0.0.1019?尝试了 -t、-k 和 -n 但没有帮助,或者可能是我遗漏了什么。 $ echo '1.0.0
因此,我有一个值为“app、beta、theta”的单元格,我想查看填充有上述单元格的列是否包含我的单元格值。例如:AA 列有这些单元格:“app”; “theta,应用程序”; “theta,app
我想读取一个包含多个(未终止的)Kafka 主机的字符串,并使用 cmd for 将它们列出在单独的行中。 字符串如下: host1:9092,host2:9092,host3:9092,... 我所
我突然想到,例如,假设我们有二维 N 点的训练数据。我们知道我们总是可以天真地构建一个决策树,以便我们可以对每个数据点进行分类。 (可能我们过拟合了,深度可以到2N) 但是,我们知道如果数据集是线性可
我知道这是一件奇怪的事情,但现在我正在构建一个测试项目,并且我将正在测试的应用程序的几个区域/容器分开在不同的类中,如保持组织的措施。因此,如果我想将一个元素从区域 A 拖动到区域 B,我必须将 D&
你好, 在编写 XSLT 样式表时,我遇到了一个无法解决的问题。我的基本 XML 结构如下 我想打印所有列的名称。因此,我使用了以下语句(我正在遍历所有 nonUniqueConstr
单一职责原则和关注点分离有什么区别? 最佳答案 Single Responsibility Principle (SRP)- give each class just one reason to ch
如何获取指定文件/文件夹路径的文件分隔符? 在Java中,我们可以这样写 File f = new File("C:\\MyFolder\\MyText.txt"); 请记住,这是一种文件表示(该文件
我正在开始开发一个新程序(用于学校项目),其中用户登录并有一个类似“时间线”的页面。目前它是一个简单的命令行 C 项目。 我想通过以下方式将数据存储在文本文件中: # Message here
我正在将 UIView(作为容器 View )添加到 UITableViewController。出于某种原因,UITableView 分隔符通过 UIView 可见。我运行的是 iOS 7。 UIV
产品代码在 UNIX 上运行,但需要在 Windows 上运行本地 DEV。 当前代码从数据库获取 UNIX 格式的路径,然后使用 file.separator 在该路径上构建,它添加了窗口分隔符,导
我正在使用 Eclipse 和本地服务器(如 XAMPP)在 Windows 中开发我的企业应用程序项目。 要从文件系统(部署文件夹外部)加载配置,我使用: String dataOrdner = S
我刚刚使用 iTextSharp 从 pdf 中获取所有文本,现在我需要将该文本拆分为单词。我以前使用 Acrobat 库,它会自动将它分成单词(使用 getPageNthWord())。 我不知道使
在WPF的集合控件中常常需要在每一个集合项之间插入一个分隔符样式,但是WPF的ItemsControl没有相关功能的直接实现,所以只能考虑曲线救国,经过研究,大概想到了以下两种实现方式。 先写出I
出现如下错误 Groovy script throws an exception of type class java.util.regex.PatternSyntaxException with m
请问有没有语法来分隔“for”标签中的某些元素? 例如我有一个用户列表,我想用“-”分隔符显示他们的用户名,所以预期的结果是:Mickael - Dave - Chris - ... 我找到了这个解决
我是一名优秀的程序员,十分优秀!