---
title: "Security and Firewall"
description: "Configure deployment protection and Web Application Firewall rules across microfrontend applications."
canonical_url: "https://vercel.com/academy/microfrontends-on-vercel/security-firewall"
md_url: "https://vercel.com/academy/microfrontends-on-vercel/security-firewall.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-11T16:50:35.992Z"
content_type: "lesson"
course: "microfrontends-on-vercel"
course_title: "Microfrontends on Vercel"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Security and Firewall

# Security and Firewall

Security in microfrontends requires understanding which rules apply where. Firewall rules on the default app affect all traffic. Rules on child apps only affect their paths.

## Outcome

Configure deployment protection for preview environments and understand how WAF rules cascade across microfrontends.

## Security Model Overview

Requests to microfrontends pass through security checks in a specific order:

```
Request → Firewall (default app) → Microfrontends Routing → Child App Security
```

This creates a layered security model:

| Layer                             | Scope                | Examples                       |
| --------------------------------- | -------------------- | ------------------------------ |
| Default app firewall              | All requests         | Rate limiting, DDoS protection |
| Default app deployment protection | Default app only     | Password protection            |
| Child app firewall                | Child app paths only | API-specific rules             |
| Child app deployment protection   | Child app only       | Per-app protection             |

## The Key Insight

**Firewall rules on the default app run for EVERY request.** They execute before microfrontends routing.

This means:

- Rate limiting on marketing applies to `/docs` and `/app` too
- IP blocking on marketing blocks access to all apps
- Custom WAF rules on marketing protect the entire domain

## Fast Track

1. Enable deployment protection on preview environments
2. Add a domain-wide rate limit rule
3. Test that rules apply across all microfrontends

## Hands-on Exercise 3.4

Configure security for the Acme Platform.

### Part 1: Enable Deployment Protection

In Vercel dashboard:

1. Go to your default app (marketing) → **Settings** → **Deployment Protection**
2. Enable **Vercel Authentication** for preview deployments
3. This protects all preview URLs from public access

Deployment Protection on the default app only applies to requests through the default app's domain. Direct access to a child app's domain bypasses it.

### Part 2: Configure Domain-Wide Rate Limiting

Add a rate limit rule to the default app:

1. Go to marketing project → **Settings** → **Firewall**
2. Click **Add Rule**
3. Configure:
   - **Name:** `rate-limit-all`
   - **Condition:** All requests
   - **Action:** Rate limit (100 requests per minute per IP)

This rule applies to all traffic, regardless of which microfrontend handles it.

### Part 3: Add App-Specific Rules

For dashboard-specific security (like stricter rate limits on API routes):

1. Go to dashboard project → **Settings** → **Firewall**
2. Add a rule:
   - **Name:** `strict-api-rate-limit`
   - **Condition:** Path starts with `/app/api`
   - **Action:** Rate limit (10 requests per minute per IP)

This rule only applies to requests routed to the dashboard.

### Part 4: Understand the Security Matrix

| Request                    | Default App Firewall | Child App Firewall | Protection        |
| -------------------------- | -------------------- | ------------------ | ----------------- |
| `acme.com/`                | ✓                    | N/A                | Default app rules |
| `acme.com/docs`            | ✓                    | Docs rules         | Both apply        |
| `acme.com/app`             | ✓                    | Dashboard rules    | Both apply        |
| `dashboard.vercel.app/app` | N/A                  | Dashboard rules    | Child only        |

## WAF Configuration

Web Application Firewall (WAF) rules work similarly:

**Default app WAF rules:**

- Apply to all requests entering through the default app's domain
- Good for: OWASP rules, SQL injection protection, XSS filtering

**Child app WAF rules:**

- Apply only to requests routed to that child app
- Good for: App-specific protections, custom rules

### Example: Block Known Bad Actors

On the default app:

```json
{
  "name": "block-bad-ips",
  "condition": {
    "ip": ["1.2.3.4", "5.6.7.8"]
  },
  "action": "deny"
}
```

This blocks these IPs from accessing any microfrontend.

### Example: Geo-Restriction for Dashboard

On the dashboard app only:

```json
{
  "name": "us-only-dashboard",
  "condition": {
    "geo": {
      "country": { "not": ["US", "CA"] }
    }
  },
  "action": "deny"
}
```

This restricts dashboard access to US and Canada, while marketing and docs remain globally accessible.

## Testing Security Rules

### Test Rate Limiting

```bash
# Send 101 requests quickly
for i in {1..101}; do
  curl -s -o /dev/null -w "%{http_code}\n" https://acme-platform.vercel.app/
done
```

After 100 requests, you should see `429` (Too Many Requests).

### Test Deployment Protection

1. Open an incognito window
2. Visit your preview URL
3. You should see a Vercel login prompt (if using Vercel Authentication)

## Done-When

- [ ] Deployment protection enabled for previews
- [ ] Domain-wide rate limit rule configured on default app
- [ ] Understand which rules apply to which requests
- [ ] Can explain the security matrix for microfrontends

## Common Security Patterns

| Pattern         | Where to Configure   | Why                                 |
| --------------- | -------------------- | ----------------------------------- |
| Rate limiting   | Default app          | Protects all endpoints              |
| Bot protection  | Default app          | Blocks bad traffic early            |
| Auth-only areas | Child app middleware | App-specific logic                  |
| API throttling  | Child app firewall   | Different limits per API            |
| Geo-blocking    | Depends on scope     | Default for all, child for specific |

## Commit

```bash
git add -A
git commit -m "docs: document security configuration for microfrontends"
```

## Security Checklist

Before going to production:

- [ ] Deployment protection on preview environments
- [ ] Rate limiting configured on default app
- [ ] WAF managed rulesets enabled
- [ ] App-specific protections where needed
- [ ] Authentication middleware in protected apps
- [ ] HTTPS enforced (Vercel handles this automatically)

## What's Next

Section 4 covers advanced patterns: feature flag routing for gradual rollouts and migrating from legacy applications.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)