如何使用Javascript列出当前页面的所有cookie？

Question

有没有办法在Javascript的帮助下，列出与当前页面关联的所有cookie？ 也就是说，如果我不知道cookie的名称但想检索它们所包含的所有信息。

- Speldosa

---

请澄清一下，“某个页面”是否指的是“用户当前所在的页面”。DixonD的回答对于当前页面的cookie是正确的。出于安全原因，所有其他域都是禁止访问的。 - Ben Zotto

是的，我在谈论用户当前所在的页面。 - Speldosa

好的。我已经编辑了标题和问题以反映这一点。DixonD的答案在这里是合适的。 - Ben Zotto

请注意，这实际上可能是您想要使用 HttpOnly 禁用的内容。这是因为它会使 XSS 攻击变得不那么强大。 - Flimm

Answer 1

您可以列出当前域的cookie：

function listCookies() {
    var theCookies = document.cookie.split(';');
    var aString = '';
    for (var i = 1 ; i <= theCookies.length; i++) {
        aString += i + ' ' + theCookies[i-1] + "\n";
    }
    return aString;
}

但出于安全原因，您无法列出其他域的 cookie

- DixonD

---

我在描述问题时可能有些笨拙。我的意图是获取同一目录下任何HTML文档创建的所有cookie列表。在HTML文档中，我只需添加以下代码：var x = document.cookie; window.alert(x);...然后我就可以看到我创建的所有cookie了。如果我表达不清楚，请原谅。感谢所有快速回答。我已经喜欢上这个网站了 :) - Speldosa

当 cookie 的 httpOnly 属性被设置为 true 时，这种方法无效。 - Risto Novik

通过 aString += i + ' ' + decodeURIComponent(theCookies[i-1]) + "\n"; 可以获得更好的输出。 - Mark Rajcok

Answer 2

实验规范（截至2023年4月，浏览器支持较差，请使用2022年的答案）：

const cookies = await cookieStore.getAll()
// Then...
Object.fromEntries(cookies.map(({name, value}) => [name, value]))
// OR
cookies.reduce((cs, c) => ({...cs, [c.name]: c.value}), {})

点击此处阅读更多：https://developer.mozilla.org/zh-CN/docs/Web/API/CookieStore/getAll

2022年更新

简而言之 - 这是一行代码：

Object.fromEntries(document.cookie.split('; ').map(c => c.split('=')))

注意：你不能在浏览器代码中获取http-only Cookie。

这里是同样的内容，解释说明：

const getCookieMap = () => {
  // Cookies are generally separated by a "; "
  // https://dev59.com/CG445IYBdhLWcg3wdqOO#4843598
  const cookieList = document.cookie.split('; ');

  // A key-value pair in the cookie list is separated by a "="
  // We pass a function to cookieList.map that will return
  // an array of tuples, like [key, value]
  const cookieToObjEntry = cookie => cookie.split('=')
  const cookieEntries = cookieList.map(cookieToObjEntry)

  // Such an array can be passed to Object.fromEntries to
  // obtain an object with all cookie key-value pairs as
  // the keys and values of an object
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
  return Object.fromEntries(cookieEntries)

  // So, for a cookies stored as "c1=v1; c2=v2", you'll get
  // an object like `{c1: v1, c2: v2}`
}

---

旧版答案

许多人已经提到document.cookie可以获取所有的cookie（除了http-only的）。

我只是想添加一小段代码来跟上时代的步伐。

document.cookie.split(';').reduce((cookies, cookie) => {
  const [ name, value ] = cookie.split('=').map(c => c.trim());
  cookies[name] = value;
  return cookies;
}, {});

该片段将返回一个对象，其中cookie名称作为键，cookie值作为值。

语法略有不同：

document.cookie.split(';').reduce((cookies, cookie) => {
  const [ name, value ] = cookie.split('=').map(c => c.trim());
  return { ...cookies, [name]: value };
}, {});

编辑：有人正确指出，如果您的cookie键或值中有=，则会遇到问题。也许考虑使用转义序列来减轻这个问题？

- Jayant Bhawal

Answer 3

var x = document.cookie; 
window.alert(x);

这将显示当前站点可以访问的所有 cookie。例如，如果您创建了两个 cookie "username=Frankenstein" 和 "username=Dracula"，这两行代码将显示 "username=Frankenstein; username=Dracula"。但是，到期日期等信息不会显示。

- Speldosa

---

如果您使用了httpOnly设置cookie，那么此方法将不起作用。建议使用httpOnly以减轻XSS攻击的负面影响。 - Flimm

Flimm，没有任何浏览器端可以让你这样做。这是基本的安全措施，因此不会降低答案的价值。 - oligofren

Answer 4

为了快速查看特定页面上的cookie，我会在收藏栏中保留一个名为"Cookie"的快捷方式，并将其URL设置为：

javascript:window.alert(document.cookie.split(';').join(';\r\n'));

- Paul Bishop

Answer 5

除了使用 document.cookie，您还可以使用 cookie 存储 API，主要是 CookieStore 的 getAll() 方法。

以下是一个简单的示例，您可以尝试类似这样的操作：

const cookies = await cookieStore.getAll(); //Array of all available cookie info
cookies.forEach(c => console.log(`${c.name}: ${c.value}`));

请注意，截至本文撰写时，此 API 仍处于实验性阶段，并且不受所有浏览器（例如 Firefox）的支持。

- Mr.Cat

Answer 6

编号。

浏览器提供的唯一用于处理Cookie 的 API 是通过键值对进行获取和设置。所有浏览器仅通过域名来处理 Cookie。

访问当前域中的所有Cookie 可以使用 document.cookie。

- Yuval Adam

---

如果您使用了httpOnly设置cookie，则此方法将无法正常工作。建议使用httpOnly设置cookie，因为它有助于减轻XSS攻击的负面影响。 - Flimm

Answer 7

function listCookies() {
    let cookies = document.cookie.split(';')
    cookies.map((cookie, n) => console.log(`${n}:`, decodeURIComponent(cookie)))
}

function findCookie(e) {
  let cookies = document.cookie.split(';')
  cookies.map((cookie, n) => cookie.includes(e) && console.log(decodeURIComponent(cookie), n))
}

这是专门为你所在的窗口而设计的。试图保持干净简洁。

- Fofaster

Answer 8

我在https://electrictoolbox.com/javascript-get-all-cookies/上找到了这段代码，比其他解决方案更适合我：

function get_cookies_array() {

    var cookies = { };

    if (document.cookie && document.cookie != '') {
        var split = document.cookie.split(';');
        for (var i = 0; i < split.length; i++) {
            var name_value = split[i].split("=");
            name_value[0] = name_value[0].replace(/^ /, '');
            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
         }
     }

     return cookies;
}

- Ely

Answer 9

一些cookie中包含referrer urls，其中有=。因此，简单地按=拆分会导致不规则的结果，并且先前的答案会随时间（或根据使用深度立即）而崩溃。

这只取等号符号的第一个实例。它返回一个带有cookie键值对的对象。

// Returns an object of key value pairs for this page's cookies
function getPageCookies(){

    // cookie is a string containing a semicolon-separated list, this split puts it into an array
    var cookieArr = document.cookie.split(";");

    // This object will hold all of the key value pairs
    var cookieObj = {};

    // Iterate the array of flat cookies to get their key value pair
    for(var i = 0; i < cookieArr.length; i++){

        // Remove the standardized whitespace
        var cookieSeg = cookieArr[i].trim();

        // Index of the split between key and value
        var firstEq = cookieSeg.indexOf("=");

        // Assignments
        var name = cookieSeg.substr(0,firstEq);
        var value = cookieSeg.substr(firstEq+1);
        cookieObj[name] = value;
   }
   return cookieObj;
}

- Travis J

Answer 10

没有。您只能读取与当前域相关联的信息。

- tur1ng

---

该死 :) 好的...跟进问题：

1. 有没有办法检查特定名称的 cookie 是否存在？
2. 是否有 JavaScript 的手册，例如详细描述 document.cookie 类？

- Speldosa

我也这么认为。不过，我想获取类似于这个的东西：http://download.oracle.com/javase/1.4.2/docs/api/overview-summary.html - Speldosa