部署前NodeJS API安全配置求助：仅限Angular/Flutter访问的设置教程

Great question! Since you're focused on restricting API access only to your Angular and Flutter apps (not user authentication), let's break down each method you mentioned and how to implement them in a Node.js backend:

CORS is the first line of defense for your browser-based Angular app. You’ll want to explicitly whitelist only your Angular app’s deployment domain(s) and block all other origins.

Using the cors npm package with Express:

const cors = require('cors');
const allowedOrigins = ['https://your-angular-app.com', 'http://localhost:4200']; // Add your dev/prod domains

const corsOptions = {
  origin: function (origin, callback) {
    // Allow requests with no origin (like mobile apps) but validate via other methods later
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true // Enable if your app uses cookies or auth-related headers
};

app.use(cors(corsOptions));

Note: CORS only enforces restrictions on browser requests (Angular). Flutter mobile apps don’t respect CORS rules, so you’ll need additional validation checks for them.

Add a secret, custom header that your Angular and Flutter apps send with every request. Your Node backend will reject any request missing or containing an invalid token.

Step 1: Define a secure secret token #

Generate a strong, random string (e.g., via crypto.randomBytes(32).toString('hex')). Never hardcode this directly in frontend code:

• For Angular: Inject it via environment variables (compile-time variables, obfuscate the build for extra safety)
• For Flutter: Store it in secure device storage (like flutter_secure_storage) and avoid embedding it in source files

Step 2: Backend validation middleware #

const validateAppToken = (req, res, next) => {
  const appToken = req.headers['x-app-secret'];
  const validToken = process.env.APP_SECRET; // Store this in environment variables, not code

  if (!appToken || appToken !== validToken) {
    return res.status(403).json({ message: 'Invalid or missing app token' });
  }
  next();
};

// Apply to all API routes
app.use('/api', validateAppToken);

Static header tokens can be intercepted or extracted from app bundles. Request signing adds a dynamic layer: your app generates a unique signature for each request using a secret key, and the backend verifies it to ensure the request hasn’t been tampered with.

How it works: #

1. Client (Angular/Flutter) creates a signature using:
   • Current timestamp (to prevent replay attacks)
   • Request method (GET/POST/etc.)
   • Request path
   • Request body (if applicable)
   • Your secret signing key
2. Client sends X-Timestamp and X-Signature headers with the request.
3. Backend recalculates the signature using the same parameters and compares it to the incoming X-Signature.

Backend validation middleware example: #

const crypto = require('crypto');

const validateRequestSignature = (req, res, next) => {
  const timestamp = req.headers['x-timestamp'];
  const signature = req.headers['x-signature'];
  const secret = process.env.APP_SIGNING_SECRET;

  // Reject requests older than 5 minutes to block replay attacks
  if (Date.now() - parseInt(timestamp) > 5 * 60 * 1000) {
    return res.status(403).json({ message: 'Request expired' });
  }

  // Combine request data to generate the signature
  const dataToSign = `${timestamp}${req.method}${req.path}${JSON.stringify(req.body)}`;
  const calculatedSignature = crypto.createHmac('sha256', secret)
    .update(dataToSign)
    .digest('hex');

  if (signature !== calculatedSignature) {
    return res.status(403).json({ message: 'Invalid request signature' });
  }
  next();
};

app.use('/api', validateRequestSignature);

Implement the same HMAC-SHA256 logic in your Angular/Flutter apps to generate the signature before sending requests.

If your Angular app is hosted on a server with a static public IP, you can whitelist that IP to block requests from unknown addresses. This method won’t work for Flutter mobile apps (since user devices have dynamic IPs).

Express middleware for IP whitelisting: #

const allowedIPs = ['123.45.67.89', '98.76.54.32']; // Add your Angular server's public IPs

const validateIP = (req, res, next) => {
  const clientIP = req.ip || req.connection.remoteAddress;
  // If using a reverse proxy (like Nginx), enable this to get the real client IP
  // app.set('trust proxy', true);

  if (!allowedIPs.includes(clientIP)) {
    return res.status(403).json({ message: 'IP not whitelisted' });
  }
  next();
};

// Apply to Angular-specific routes or combine with other checks
app.use('/api/angular-only', validateIP);

• Combine methods: Use CORS + Header Token + Request Signing for maximum security. IP whitelisting can be an extra layer for your Angular app.
• Secure your secrets: Always use environment variables for Node backend secrets, and secure storage for mobile/frontend secrets.
• Obfuscate code: For Angular, use Terser to obfuscate compiled builds; for Flutter, enable code obfuscation in release mode.
• Test rigorously: Simulate unauthorized requests (via curl, Postman with missing headers) to verify your restrictions work as expected.

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