- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我在不同的域上使用基于 session 的授权同时使用前端和后端应用程序。我已经设置了一个有效的 CORS 配置,它在 localhost
上按预期工作(例如,从端口 :9000
到端口 :8080
)。一旦我在安全域(两个域都只允许 HTTPS)上部署应用程序,JavaScript 中就无法再访问 CSRF cookie,从而导致前端的后续请求不正确(缺少 CSRF header )。
cookie 由后端在Set-Cookie
header 中设置,没有 使用HttpOnly
标志。它实际上是在浏览器的某处设置的,因为后续的请求中同时包含了session cookie和CSRF cookie。尝试通过 JavaScript 访问它(例如在控制台中使用 document.cookie
)返回一个空字符串。 Chrome 的 DevTools 不会在前端域上显示任何 cookie(甚至没有列出后端域)。
我希望 cookie 被设置并在当前域(前端域)上可见。我正在使用 axios 的 withCredentials
标志图书馆。
您知道为什么无法从 JavaScript 或 Chrome 中的 DevTools 访问 cookie 吗?这与 Strict-Transport-Security
header 有什么关系吗?
1。初始 GET 响应 header
HTTP/1.1 401 Unauthorized
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://[my-frontend-domain]
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Encoding: gzip
Content-Type: application/json;charset=UTF-8
Date: Wed, 20 Sep 2017 11:57:07 GMT
Expires: 0
Pragma: no-cache
Server: Apache-Coyote/1.1
Set-Cookie: CSRF-TOKEN=[some-token]; Path=/
Vary: Origin,Accept-Encoding
X-Content-Type-Options: nosniff
X-Vcap-Request-Id: [some-token]
X-Xss-Protection: 1; mode=block
Content-Length: [some-length]
Strict-Transport-Security: max-age=15768000; includeSubDomains
2。后续 POST 请求头
POST /api/authentication HTTP/1.1
Host: [my-backend-host]
Connection: keep-alive
Content-Length: [some-length]
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: [my-frontend-host]
User-Agent: [Google-Chrome-User-Agent]
Content-Type: application/x-www-form-urlencoded
DNT: 1
Referer: [my-frontend-host]
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,de-CH;q=0.2,it;q=0.2
Cookie: [some-other-cookies]; CSRF-TOKEN=[same-token-as-in-the-previous-request]
This request should contain a CSRF header which would automatically be added if the cookie was accessible with JavaScript.
最佳答案
TL;DR:无法读取跨域 cookie。将 CSRF token 添加到响应 header 将是一种解决方案。另一种完全规避 CORS 和跨域请求的解决方案是使用反向代理。
正如我在上面的问题中所述,我前端的 JavaScript 部分(例如 https://example1.com
正在尝试访问非HttpOnly
cookie从我的后端,例如 https://example2.com
。为了能够使用 JavaScript 访问远程 API,我正在使用 CORS。这允许请求通过。我在前端使用 withCredentials: true
,在后端使用 Access-Control-Allow-Credentials: true
。Set-Cookie
header 然后将 cookie 设置在后端源而不是前端源。因此,cookie 在 DevTools 和 JavaScript 中的 document.cookie
命令中都不可见。
在后端源上设置的 Cookie 始终是通过 CORS 向后端发出的请求的一部分。但是,我需要访问 CSRF cookie 的 content 以将 token 添加到请求 header 中(以防止 CSRF 攻击)。正如我发现的那样,无论使用何种 CORS 设置,都无法使用 JavaScript 读取(或写入)来自不同域的 cookie(请参阅这些 StackOverflow 答案:[1]、[2])。浏览器将对 cookie 内容的访问限制为同域来源。
由此得出结论,即不可能访问不同域的非HttpOnly
cookie 的内容。此问题的解决方法是将 CSRF token 设置为额外的自定义响应 header 。这些 header 通常也不能被不同的域访问。但是,它们可以通过后端的 CORS 设置 Access-Control-Expose-Headers
公开。这是安全的,只要使用严格限制的 Access-Control-Allow-Origin
header 即可。
另一种解决方法是使用反向代理,它可以完全避免 CORS 和跨域请求的问题。使用这样的反向代理在前端提供了一条特殊路径,该路径将被重定向到后端(服务器端)。例如,对 https://front-end/api
的调用被代理到 https://back-end/api
。因为前端的所有请求都是向同域的前端代理发出的,所以浏览器将每次调用都视为同域请求,并直接在前端源上设置cookie。该解决方案的缺点包括潜在的性能问题,因为另一台服务器介于两者之间(延迟),并且需要在两个源上设置 cookie(直接访问后端时登录两次)。可以使用 nginx、apache 或在 Node.js 中使用 http-proxy-middleware
轻松设置反向代理:
var express = require('express');
var proxy = require('http-proxy-middleware');
var options = {
target: 'https://[server]',
changeOrigin: true,
secure: true
};
var exampleProxy = proxy(options);
var app = express();
app.use('/api', exampleProxy);
app.use(express.static(__dirname + "/public"));
app.listen(process.env.PORT || 8080);
关于javascript - 在 JavaScript(和开发工具)中无法访问 Cookie,但会与 XHR 请求一起发送(不使用 httponly),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46322346/
我正在尝试从该网站抓取历史天气数据: http://www.hko.gov.hk/cis/dailyExtract_uc.htm?y=2016&m=1 在阅读了 AJAX 调用后,我发现请求数据的正确
我有两个 postman 请求 x,y,它们命中了两个不同的休息 api X,Y 中的端点。 x 会给我一个身份验证 token ,这是发出 y 请求所必需的。如何在请求 y 中发出请求 x ?也就是
我使用请求库通过 API 与其他服务器进行通信。但现在我需要同时发送多个(10 个或更多)POST 请求,并且只有在所有响应都正确的情况下才能进一步前进。通常语法看起来有点像这样: var optio
背景:当用户单击按钮时,其类会在class1和class2之间切换,并且此数据是通过 AJAX 提交。为了确认此数据已保存,服务器使用 js 进行响应(更新按钮 HTML)。 问题:如果用户点击按钮的
我正在将 Node.js 中的请求库用于 Google 的文本转语音 API。我想打印出正在发送的请求,如 python example . 这是我的代码: const request = requi
我经常使用requests。最近我发现还有一个 requests2 和即将到来的 requests3 虽然有一个 page其中简要提到了 requests3 中的内容,我一直无法确定 requests
我正在尝试将图像发送到我的 API,然后从中获取结果。例如,我使用发送一个 bmp 图像文件 file = {"img": open("img.bmp)} r = requests.post(url,
我发现 Google Cloud 确保移出其物理环境的任何请求都经过强制加密,请参阅(虚拟机到虚拟机标题下的第 6 页)this link Azure(和 AWS)是否遵循类似的程序?如果有人能给我指
我有一个 ASP.NET MVC 应用程序,我正在尝试在 javascript 函数中使用 jQuery 来创建一系列操作。该函数由三部分组成。 我想做的是:如果满足某些条件,那么我想执行同步 jQu
我找不到如何执行 get http 请求,所以我希望你们能帮助我。 这个想法是从外部url(例如 https://api.twitter.com/1.1/search/tweets.json?q=tw
我的应用只需要使用“READ_SMS”权限。我的问题是,在 Android 6.0 上,当我需要使用新的权限系统时,它会要求用户“发送和查看短信”。 这是我的代码: ActivityCompat.re
我的前端代码: { this.searchInput = input; }}/> 搜索 // search method: const baseUrl = 'http://localho
我有一个由 AJAX 和 C# 应用程序使用的 WCF 服务, 我需要通过 HTTP 请求 header 发送一个参数。 在我的 AJAX 上,我添加了以下内容并且它有效: $.ajax({
我正在尝试了解如何使用 promises 编写代码。请检查我的代码。这样对吗? Node.js + 请求: request(url, function (error, response, body)
如果失败(除 HTTP 200 之外的任何响应代码),我需要重试发送 GWT RPC 请求。原因很复杂,所以我不会详细说明。到目前为止,我在同一个地方处理所有请求响应,如下所示: // We
当用户单击提交按钮时,我希望提交表单。然而,就在这种情况发生之前,我希望弹出一个窗口并让他们填写一些数据。一旦他们执行此操作并关闭该子窗口,我希望发出 POST 请求。 这可能吗?如果可能的话如何?我
像 Facebook 这样的网站使用“延迟”加载 js。当你必须考虑到我有一台服务器,流量很大时。 我很感兴趣 - 哪一个更好? 当我一次执行更多 HTTP 请求时 - 页面加载速度较慢(由于限制(一
Servlet 容器是否创建 ServletRequest 和 Response 对象或 Http 对象?如果是ServletRequest,谁在调用服务方法之前将其转换为HttpServletReq
这是维基百科文章的摘录: In contrast to the GET request method where only a URL and headers are sent to the serv
我有一个循环,每次循环时都会发出 HTTP post 请求。 for(let i = 1; i console.log("succes at " + i), error => con
我是一名优秀的程序员,十分优秀!