cookie httponly 未发送

Question

我正在构建一个带有 api 平台的 api 和带有 React 的前端（使用 api 平台的 React 模板）。我使用包含 jwt 的 httponly cookie 为客户端配置了身份验证和 return。但是当我的前台发出请求时，它不会发送这个 cookie...而且我完全不知道为什么，我认为它是由浏览器自动完成的，直到它在同一个域上。

这是我客户端的网络历史示例：

我的应用在 https://localhost:3000/

上运行

您是否发现这些请求有问题？或者有人知道它可能来自什么吗？我的应用程序和 api 正在使用 https 并拥有有效证书...

如果您需要任何其他信息，请随时询问，谢谢大家！！！

Answer 1

我假设你使用 xhr or fetch。

Cookie 忽略端口，但跨源策略不会。

您使用两个 URL（http://localhost:8443 和 http://localhost:3000）。所以你的应用正在制作 cross origin request 因为端口不同。

xhr 需要将其 withCredentials 属性设置为 true 以便通过 cross-origin 请求发送 cookie . fetch 需要将其 credentials 参数设置为 include.

服务器端，将Access-Control-Allow-Credentials设置为true。

另请注意，您的 cookie 是 samesite=strict。在生产中，如果您为您的应用程序和您的 api 使用两个域，它将永远不会被发送。

这里真正的问题是为什么使用 cookie 而不是 Authorization header ?

Answer 2

好吧，我不知道...当我试图解决我的问题时，我什么也没发现。我使用 cookie httponly 因为 :

我想试试 :D
很多安全文章说它更安全，因为客户端 api 无法访问这些 cookie，由浏览器管理。它似乎可以对抗 xss 和 cookies 的隐蔽性，但是如果我的 cookie 存储在 localforage 中，我想我没有这个问题，但是我有 localStorage，没有？
很酷不！我用经典的bearer auth做了太多的项目，我现在可以改进它

非常感谢您很好的回答 rugolinifr！

Answer 3

好的，我终于还是遇到了问题...我的浏览器没有发送 cookie...

我的身份验证请求返回不记名 cookie（有效，已通过邮递员测试）

我的 cookie 从身份验证请求中收到

我的 GET 请求没有那个授权 cookie

我遗漏了一些东西，但我没有找到... 我已经设置凭据，Access-Control-Allow-Credentials，samesite 是 'none'，用于将它发送到任何地方。还有别的事情要做吗？或者也许我在做一件错误的愚蠢小事？

Answer 4

我无法在评论中回答，因为有代码... 因此，它由 api-platform (https://api-platform.com/docs/admin/) 的 React 管理员管理，但我的配置是这样的：


const fetchHeaders = {
  credentials: 'include',
};

const fetchHydra = (url, options = {}) =>
  baseFetchHydra(url, {
    ...options,
    headers: new Headers(fetchHeaders),
  });

const apiDocumentationParser = (entrypoint) =>
  parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) }).then(
    ({ api }) => ({ api }),
    (result) => {
        ...
    },
  );

const dataProvider = baseHydraDataProvider(entrypoint, fetchHydra, apiDocumentationParser, true);

所以，所有的get，post等数据请求都是基于这个conf

但我的第一次身份验证调用是这样完成的：

login: ({ username, password }) => {
    const request = new Request(`${entrypoint}/authentication_token`, {
      method: 'POST',
      body: JSON.stringify({ username, password }),
      headers: new Headers({ 'Content-Type': 'application/json' }),
    });
    return fetch(request).then((response) => {
      if (response.status < 200 || response.status >= 300) {
        localStorage.removeItem('isAuthenticated');
        throw new Error(response.statusText);
      }
      localStorage.setItem('isAuthenticated', 'true');
    });
  },

Answer 5

好的，我找到了解决方案：将凭据添加到身份验证请求中，如果未添加 header，浏览器将不会存储 cookie。第二点：

const fetchHydra = (url, options = {}) =>
  baseFetchHydra(url, {
    ...options,
    credentials: 'include',
  });

credentials: 'include' 不在 header 选项中...很好！

cookie httponly 未发送

cookie httponly not sent

cookies

httponly

api-platform.com