咨询Spotify移动端浏览器检测及页面强制跳转的实现机制

Great question! I’ve spent some time investigating how Spotify enforces that mobile-to-desktop redirect (even when users spoof their User-Agent), and it turns out they’re using a combination of client-side and server-side checks that go way beyond simple regex matching. Here’s a breakdown of their approach and how you can replicate it in your own web app:

Spotify doesn’t rely on just User-Agent strings because those are easy to manipulate. Instead, they use multiple layers of detection:

• Client Hints: Modern browsers send additional request headers like Sec-CH-UA-Mobile (which returns ?1 for mobile devices, ?0 for desktop) that are harder to spoof. Spotify’s server checks this header first to trigger initial redirects.
• Client-Side Hardware/Feature Detection: Even if you fake your User-Agent, Spotify’s frontend JavaScript checks for mobile-specific features:
  • Screen viewport size (via window.innerWidth or CSS media queries)
  • Touch event support (checking for ontouchstart or navigator.maxTouchPoints)
  • These checks run in the browser, so they reflect the actual device capabilities, not just the spoofed UA.
• Combined Header Fingerprinting: The server also looks at a mix of other request headers (like Accept, Accept-Language, and even TLS encryption suite preferences) to build a device fingerprint. A spoofed UA won’t match the rest of the fingerprint from a mobile device, so the redirect still triggers.

To build a robust redirect system that resists UA spoofing, use a hybrid of server-side and client-side checks:

Server-Side Checks (Initial Redirect) #

Start with server-side validation using Client Hints, since they’re sent before the page loads:

1. First, tell browsers to send Client Hints by adding this response header:

   Accept-CH: Sec-CH-UA-Mobile
   

2. Then, check the Sec-CH-UA-Mobile header in your server code to redirect mobile users. Example in Node.js/Express:

   app.get('/', (req, res) => {
     // Check Client Hint first
     const isMobileViaHint = req.headers['sec-ch-ua-mobile'] === '?1';
     // Fallback to UA regex for older browsers that don't support Client Hints
     const isMobileViaUA = /Mobile|Android|iOS/.test(req.headers['user-agent']);
   
     if (isMobileViaHint || isMobileViaUA) {
       res.redirect('/mobile-landing');
     } else {
       res.send('Desktop Web App');
     }
   });
   

Client-Side Checks (Secondary Validation) #

Add client-side checks to catch users who might have spoofed their UA to bypass the server redirect. This runs after the page loads:

function isMobileDevice() {
  // Check viewport size (adjust the threshold to fit your needs)
  const isSmallScreen = window.innerWidth <= 768;
  // Check touch support
  const supportsTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  // Combine checks for accuracy
  return isSmallScreen && supportsTouch;
}

// Run on page load
if (isMobileDevice()) {
  // Redirect to mobile page if user is on a mobile device but bypassed server check
  window.location.href = '/mobile-landing';
}

Bonus: Add a Manual Override #

Always include a "Switch to Desktop Site" button on your mobile page. This improves user experience and aligns with best practices—even Spotify lets users access the web player via a workaround (though they make it tricky).

• Avoid relying solely on any single method: Combine server-side Client Hints, UA fallback, and client-side feature checks for the most robust system.
• Test across devices: Make sure your logic doesn’t misclassify tablets or foldable devices—adjust viewport thresholds and add edge-case checks as needed.

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