表单提交时POST请求出现额外查询字符串参数的技术疑问

Great question—this is a super common pattern used for bot protection, request validation, or session tracking, and it’s all handled entirely client-side before the POST request ever leaves your browser. Here’s a breakdown of how it works:

1. Client-Side Script Takes Over Form Submission #

The obfuscated script in the page header is doing all the heavy lifting here. Here’s the step-by-step workflow (simplified, since the actual code is obfuscated):

• When the page loads, the script attaches a listener to your form’s submit event (or the button’s click event).
• When you click the search button, the script immediately stops the browser’s default form-submission behavior using event.preventDefault().
• It then generates those random-looking parameters locally—using things like timestamps, Math.random(), hashes of page state, or even values derived from user interaction patterns (like mouse movement).
• The script adds these new parameters to a FormData object (which includes your original search inputs) or directly constructs the POST request body.
• Finally, it sends the custom POST request to the server using fetch() or XMLHttpRequest, bypassing the browser’s default form submission entirely.

2. Why the Obfuscation? #

The script is scrambled to make it harder for automated bots or scrapers to reverse-engineer how the parameters are generated. If bots could easily replicate these values, they could bypass anti-bot protections or flood the server with fake requests. Obfuscation raises the bar for anyone trying to mimic a real user’s request.

3. Example (Simplified, Non-Obfuscated Code) #

To make this concrete, here’s what the unobfuscated version might look like (the actual code you’re seeing is just a messy, minified version of this idea):

// Listen for form submit
document.querySelector('#flight-search-form').addEventListener('submit', async (e) => {
  // Stop browser's default submit
  e.preventDefault();
  
  // Grab original form data
  const formData = new FormData(e.target);
  
  // Generate random/dynamic parameters locally
  const uniqueKey = `X-${randomString(8)}-uniqueStateKey`;
  formData.append(uniqueKey, randomValue(16));
  formData.append('X-6LdxA4pr-b', Date.now() + Math.floor(Math.random() * 1000));
  formData.append('X-6LdxA4pr-c', btoa(window.location.href)); // Example of state-based value
  
  // Send custom POST request
  const response = await fetch('/find-flights', {
    method: 'POST',
    body: formData,
    credentials: 'include'
  });
  
  // Handle the server's response (e.g., show results)
  const results = await response.json();
  displayFlightResults(results);
});

// Helper functions for random values (simplified)
function randomString(length) {
  return Array.from(crypto.getRandomValues(new Uint8Array(length)))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

function randomValue(length) {
  return Math.random().toString(36).substring(2, length + 2);
}

Why No Extra Network Requests? #

All of this logic runs locally in your browser—no need to fetch data from the server to generate the parameters. The script has everything it needs to create those values on the spot, which is why you don’t see any extra calls between clicking the button and sending the POST request.

In short: the script hijacks your form submission, adds custom parameters locally, and sends the request manually. It’s a clever way to add a layer of security or tracking without relying on hidden form fields.

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