如何实现仅WebKit/Chrome浏览器可访问网站并跳转至替代页面？

Absolutely! You can implement both of these browser restriction and redirection requirements using either client-side JavaScript or server-side backend languages. Let’s break down the solutions for each scenario step by step:

WebKit is the rendering engine used by Safari, and Blink (powering Chrome/Edge) is a fork of WebKit—adjust your detection logic based on whether you want to include Blink-based browsers or strictly limit to pure WebKit (like Safari).

Client-Side (JavaScript) Implementation #

This runs directly in the user’s browser, but note that it can be bypassed if someone modifies their browser’s user agent string.

// Option 1: Strictly pure WebKit (only Safari, exclude Chrome/Edge/Blink)
const isPureWebKit = /WebKit/.test(navigator.userAgent) && !/(Chrome|Chromium|Edg)/.test(navigator.userAgent);

// Option 2: Include Blink-based browsers (Chrome, Edge, etc., as they're WebKit derivatives)
// const isWebKitFamily = /WebKit/.test(navigator.userAgent);

// Redirect if not WebKit
if (!isPureWebKit) {
  window.location.href = "https://your-alternative-site.com";
}

Server-Side Implementation (More Reliable) #

Backend checks are harder to bypass since they run on your server. Below are examples for common frameworks:

Node.js/Express #

const express = require('express');
const app = express();

app.use((req, res, next) => {
  const userAgent = req.get('User-Agent');
  const isPureWebKit = /WebKit/.test(userAgent) && !/(Chrome|Chromium|Edg)/.test(userAgent);

  if (!isPureWebKit) {
    return res.redirect('https://your-alternative-site.com');
  }
  next();
});

// Your other routes go here
app.listen(3000, () => console.log('Server running'));

PHP #

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$isPureWebKit = preg_match('/WebKit/', $userAgent) && !preg_match('/(Chrome|Chromium|Edg)/', $userAgent);

if (!$isPureWebKit) {
    header('Location: https://your-alternative-site.com');
    exit;
}
?>

Chrome uses the Blink engine, but other browsers (like Edge, Opera, Brave) often mimic Chrome’s user agent—so we need to explicitly exclude those.

Client-Side (JavaScript) Implementation #

// Detect Chrome, exclude Edge, Opera, Brave, and other Chrome-like browsers
const isChrome = /Chrome/.test(navigator.userAgent) && !/(Edg|OPR|Brave)/.test(navigator.userAgent);

if (!isChrome) {
  window.location.href = "https://your-other-site.com";
}

Server-Side Implementation #

Node.js/Express #

app.use((req, res, next) => {
  const userAgent = req.get('User-Agent');
  const isChrome = /Chrome/.test(userAgent) && !/(Edg|OPR|Brave)/.test(userAgent);

  if (!isChrome) {
    return res.redirect('https://your-other-site.com');
  }
  next();
});

PHP #

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$isChrome = preg_match('/Chrome/', $userAgent) && !preg_match('/(Edg|OPR|Brave)/', $userAgent);

if (!$isChrome) {
    header('Location: https://your-other-site.com');
    exit;
}
?>

Key Notes to Consider #

• Client-Side Limitation: User agent strings can be spoofed, so client-side checks are best for non-critical restrictions. For strict access control, always use server-side detection.
• UA String Changes: Browser vendors update user agent strings over time, so you’ll need to periodically review and adjust your regex patterns to stay accurate.
• Mobile Browsers: Mobile versions of Chrome/Safari have slightly different user agent strings—make sure your regex accounts for variations like Chrome Mobile or Safari Mobile.

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