如何在Chrome中通过JavaScript查找XHR请求内的动态密钥？

Absolutely! You can absolutely automate grabbing that dynamic, login-specific key using JavaScript—here are a few practical approaches tailored to how the site sends that XHR request.

Browser Environment (Manual Injection or Tampermonkey) #

If you're working directly in the browser (like via a userscript or dev console), you can intercept XHR/fetch requests to catch the key as it's sent or received.

Intercepting XMLHttpRequest #

Most older sites use XMLHttpRequest for XHR calls. You can override the prototype to listen for the target request:

// Save the original open method
const originalOpen = XMLHttpRequest.prototype.open;

// Override it to track requests
XMLHttpRequest.prototype.open = function(method, url) {
  // Listen for when the request finishes loading
  this.addEventListener('load', () => {
    // Match the request URL to your target endpoint (adjust this!)
    if (url.includes('auth/token') || url.includes('session/init')) {
      try {
        // Parse the response JSON
        const responseData = JSON.parse(this.responseText);
        // Extract the key—replace with your actual JSON path (e.g., responseData.token)
        const dynamicKey = responseData.data.sessionKey;
        console.log('✅ Found dynamic key:', dynamicKey);
        
        // Do something with the key here: store it in localStorage, use it in subsequent requests, etc.
        localStorage.setItem('siteAuthKey', dynamicKey);
      } catch (err) {
        console.error('❌ Failed to parse response:', err);
      }
    }
  });

  // Call the original open method so the request still works normally
  originalOpen.apply(this, arguments);
};

Intercepting Fetch API #

If the site uses the newer fetch API, you can wrap the global fetch function to intercept responses:

const originalFetch = window.fetch;

window.fetch = async (...args) => {
  const response = await originalFetch.apply(this, args);
  
  // Check if this is the target request (match the URL or request method)
  if (args[0].includes('auth/token') && args[1]?.method === 'POST') {
    // Clone the response (since responses are stream-only, we can't read them twice)
    const clonedResponse = response.clone();
    try {
      const responseData = await clonedResponse.json();
      const dynamicKey = responseData.data.sessionKey; // Adjust path as needed
      console.log('✅ Found dynamic key via fetch:', dynamicKey);
    } catch (err) {
      console.error('❌ Failed to parse fetch response:', err);
    }
  }

  return response;
};

Node.js Environment (Server-Side Scraping) #

If you're building a server-side scraper, use a library like axios with interceptors to catch the key:

const axios = require('axios');

// Add a response interceptor
axios.interceptors.response.use(
  (response) => {
    // Match the target endpoint
    if (response.config.url.includes('auth/token')) {
      const dynamicKey = response.data.data.sessionKey;
      console.log('✅ Found dynamic key:', dynamicKey);
      // Store or use the key for future requests
    }
    return response;
  },
  (error) => {
    console.error('Request failed:', error);
    return Promise.reject(error);
  }
);

// Make your login request (the one that triggers the key response)
axios.post('https://example.com/api/auth/login', {
  username: 'your-username',
  password: 'your-password'
});

Key Notes to Remember #

• Target the right request: Adjust the URL checks (url.includes(...)) to match the actual XHR request you found in DevTools. Look for unique parts of the endpoint, like auth or token.
• JSON path matters: Double-check the structure of the response JSON to make sure you're accessing the correct key (e.g., response.token vs response.data.authKey).
• Permissions: If using a browser extension, you'll need permissions like webRequest (Chrome) or webRequestBlocking to intercept requests across the site.
• Terms of Service: Always make sure automating requests to the site is allowed by their Terms of Service—don't violate any rules or rate limits.

内容的提问来源于stack exchange，提问作者Andrew