Question

我在通过弹出脚本中的Chrome扩展程序处理cookie时遇到了一些麻烦。

popup.js内容：

document.addEventListener('DOMContentLoaded', () => {
    function cookieinfo() {
        chrome.cookies.getAll({url: 'http://localhost:8080'}, function(cookie) {
            console.log('Found cookie: ', cookie)
            if (cookie == null)
                return;

            fetch('http://localhost:8080', {credentials: 'include'}).then((response) => {
                // do some stuff
                return response;
            });
        });
    }
    window.onload=cookieinfo;
}, false);

我执行的步骤：

登录到我在localhost上的应用程序（这样我就得到了cookie）
打开弹出窗口（执行popup.js）
我在控制台日志中看到chrome找到了必要的cookie
服务器说正在接收的请求中包含空Cookie
我刷新了本地应用程序的页面
我现在已注销

也许有人知道我在做什么错？

编辑：

似乎原因是我的cookie具有参数HttpOnly=true和SameSite=Lax（related link）。我可以在服务器日志中看到另一个cookie。但是由于this thread，如果将credentials参数设置为include，则将发送所有cookie，甚至httpOnly cookie。另外，由于this answer，我尝试将其发送到127.0.0.1而不是localhost。

我无法将httpOnly设置为false。这是由框架强制的。有人知道如何解决吗？

编辑2：

我终于安装了Cookie编辑器，并发现SameSite=Lax是原因。如果将其设置为No Restriction，则会在服务器端看到它。不幸的是，我正在使用的框架仅允许Lax和Strict选项（Chrome扩展都无法使用）。有谁知道如何从Chrome扩展程序发送Lax Cookie？

Answer 1

这是Chromium扩展中的问题，直到版本77。当跨站点Cookie设置为SameSite=Lax或SameSite=Strict时，该cookie不会与跨站点请求一起发送。

此问题已在所有平台的版本78中修复。现在，chrome扩展程序在SameSite=Lax或SameSite=Strict时发送cookie。

参考：

https://bugs.chromium.org/p/chromium/issues/detail?id=1007973

https://chromium-review.googlesource.com/c/chromium/src/+/1827503

https://bugs.chromium.org/p/chromium/issues/detail?id=617198

Answer 2

内容脚本是解决方案的100％。

基本上，您有两个单独的浏览器，常规浏览器和扩展弹出式浏览器。但是它们是完全分开的，只能来回发送消息。因此，您需要做的是让扩展上下文将消息发送到浏览器上下文，以指示该上下文中的某些代码获取document.cookies并将其发送回扩展上下文。

这是我从每个单独浏览器上下文中获取cookie的示例。

manifest.json

{
  "manifest_version": 2,
  "name": "Cookie Monster",
  "description": "Nom nom nom nom",
  "version": "1.0",
  "browser_action": {
    "default_popup": "html/extension.html",
    "default_title":"Cookie Monster"
  },
  "permissions": [
    "activeTab",
    "tabs",
    "http://*/*",
    "https://*/*"
 ],
  "content_scripts": [{
    "js":["/js/client.js"],
    "matches":["http://*/*","https://*/*"]
  }]
}

extension.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Cookies</title>
    <style>
      body {
        display: block; 
        min-height: 250px; 
        width: 250px; 
        padding: 5px; 
      }
      button {
        display: block; 
        margin: 0 0 10px 0; 
      }
    </style>
  </head>
  <body class="container">
    <h1>Cookies</h1>
    <button id="extension_cookies" type="button">Get PopUp Cookies</button>
    <button id="browser_cookies" type="button">Get Browser Cookies</button>
    <p id="result"></p>

    <script src="/js/extension.js" type="text/javascript"></script>
  </body>
</html>

extension.js

'use strict';
(function(){
    // cache import DOM elements
    const extension_btn = document.querySelector('#extension_cookies');
    const browser_btn = document.querySelector('#browser_cookies'); 
    const result = document.querySelector('#result');


    // runs in the popup window of the extension, 
    // which is it's own browser context 
    // and has it's own set of cookies
    extension_btn.addEventListener('click', () => {
        if (document.cookie === ''){
            result.innerText = 'No Cookies...';
        } else {
            result.innerText = document.cookie;
        }
    })

    // send message to browser context
    // message will inform browser client of what to do
    // the browser then needs to pass data to the callback function
    // then we can display results
    browser_btn.addEventListener('click', () => {
        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
            chrome.tabs.sendMessage(tabs[0].id, {message: 'GET_COOKIES'}, (data) => {
                result.innerText = data.cookies
            });
        });
    })
}());

client.js

'use strict';
(function(){

  // receive a callback function so I can pass data to extension
  // get document cookies, put into an object
  // use callback to send response to extension
  const get_browser_cookies = (sendResponse) => {
    const cookies = document.cookie; 
    console.clear(); 
    console.log(cookies);
    sendResponse({ cookies: cookies }); 
  }


  // listen for messages from extension
  // a switch statement can help run only the correct function
  // must pass the function a reference to the sendResponse function
  // so I can pass data back to extension
  chrome.runtime.onMessage.addListener(function(data_from_extension, sender, sendResponse){
    switch (data_from_extension.message){
      case 'GET_COOKIES': {
        get_browser_cookies(sendResponse); 
        break; 
      }
      default: null; 
    }
  });
}())

Answer 3

我发现 cookie 的 path 至关重要。任何不匹配都会导致误导行为。

这是我的设置：

在 localhost:8081 运行的后端服务器
chrome manifest 权限有 "http://localhost:8081/"
后端返回带有 path=/ 的 cookie，例如。这是一个示例响应标头 Set-Cookie: refresh_token=bar; Path=/; SameSite=Lax; HttpOnly
chrome 扩展可以手动查询 cookie：chrome.cookies.get({ url: 'http://localhost:8081/', name: 'refresh_token' }...

localhost:8081

chrome 扩展程序会自动附加 cookie，例如：
```
fetch('http://localhost:8081/v1/meh').then((response) => {
    console.log(response);
})
```
服务器端将看到 refresh_token cookie。

总结：设置在路径 /a 的 cookie 不会发送到路径 /b 的 url；设置在路径 / 的 cookie 将发送到同一域下的所有网址。

Chrome扩展程序不会发送SameSite = Lax cookie

3 个答案: