通过 Chrome DevTools 协议读取 DOMStorage / LocalStorage答案

【问题标题】：Read DOMStorage / LocalStorage via Chrome DevTools Protocol通过 Chrome DevTools 协议读取 DOMStorage / LocalStorage
【发布时间】：2020-06-13 07:27:33
【问题描述】：

我知道下面的代码 sn-p 允许我读取所有当前的 cookie：

let Main = await import('./main/main.js');
await Main.MainImpl.sendOverProtocol('Network.getCookies');

现在，出于测试目的，我需要获取所有可用的LocalStorage 条目。我尝试了一些东西，但不幸的是我没有得到它。 Chrome DevTools 本身只使用已经可用的securityOrigin 变量来查询它，我不知道它是从哪里获取的：

我也找到了Page.getFrameTree，但缺少一些条目-所以我认为这与LocalStorage的条目无关：

我缺少的文档中还有其他方法吗？

编辑#1

正如 cmets 中提到的，我让它与 Page.getResourceTree 一起工作。不幸的是，我得到的下一个问题如下：

Protocol error (DOMStorage.getDOMStorageItems): Frame not found for the given security origin.

【问题讨论】：

securityOrigin 只是 URL 的 protocol://hostname:port 部分，因此您只需通过 Page.getResourceTree 枚举页面中的所有框架（这是 devtools 使用的）。
@wOxxOm 我刚试过Page.getResourceTree，不幸的是我从来没有得到https://vars.hotjar.com。原因是vars.hotjar.com的一个脚本是通过https://static.hotjar.com的另一个脚本启动的。
在 puppeteer 中执行时页面可能没有创建该框架。也许您需要稍等片刻或滚动页面。另请注意，虽然脚本可以创建框架，但框架与脚本无关。无论如何，这就是 devtools 的工作方式。
我让它工作了，但我遇到了一个新错误。我已经编辑了问题。

标签： google-chrome-devtools puppeteer chrome-devtools-protocol

【解决方案1】：

这就够了吗？

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('http://example.org/');

    await page.evaluate(() => { window.localStorage.setItem('foo', 42); });

    const cdp = await page.target().createCDPSession();

    const data = await cdp.send('DOMStorage.getDOMStorageItems', {
      storageId: {
        securityOrigin: await page.evaluate(() => window.origin),
        isLocalStorage: true,
      },
    });
    console.log(data);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

输出：

{ entries: [ [ 'foo', '42' ] ] }

【讨论】：

我让它工作了，不幸的是，当我尝试获取另一个域的 LocalStorage 时收到此错误消息：请参阅已编辑的问题（编辑 #1）
你能用解决方案更新你的帖子吗？同样的问题

【解决方案2】：

我使用以下代码：

getLocalStorage = async function(page, data = {}) {
  // based on https://stackoverflow.com/a/54355801/1407622
  const client = page._client;
  for (const frame of page.frames()) {
    // it is unclear when the following url values occur:
    // potentially about:blank is the frame before the very first page is browsed
    if(!frame.url().startsWith('http')) continue; // filters chrome-error://, about:blank and empty url

    const securityOrigin = new url.URL(frame.url()).origin;
    const response = await client.send('DOMStorage.getDOMStorageItems',
      { storageId: { isLocalStorage: true, securityOrigin } },
    );
    if (response.entries.length > 0) {
      let entries = {};
      for (const [key,val] of response.entries) {
        entries[key] = {
          value: safeJSONParse(val),
        };
      }
      // console.log(response.entries);
      data[securityOrigin] = Object.assign({}, data[securityOrigin], entries);
    }
  }
  return data;
};

来源：https://github.com/EU-EDPS/website-evidence-collector/blob/master/lib/tools.js
原始SA来源：Get all values from localStorage using Puppeteer

但是，有时我会收到相同的错误：“未找到给定安全来源的框架”

【讨论】：

【解决方案3】：

Puppeteer 可能会打开一个空白的 chromium 选项卡，因此您可能会得到错误的框架网址，例如 about:blank 或空网址。

我通过添加两个简单的检查来绕过这个错误：

      if (!frame.url()) {
        continue;
      }

      if (frame.url() === 'about:blank') {
        continue;
      }

好像也有一些不好的网址，比如：

chrome-error://chromewebdata/

【讨论】：