Skip to main content
skill CX Codex

mapbox-token-security — Claude Code skill: what it does

Security guidelines for Mapbox access tokens: scope management, URL restrictions, and client initialization guards.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add mapbox/mapbox-agent-skills --skill mapbox-token-security -a claude-code
Open on GitHub

What mapbox-token-security does

The skill instructs coding assistants on securing Mapbox access tokens. It separates keys into public pk.*, secret sk.*, and temporary tk.* tokens capped at 1 hour. Client-side tokens receive only minimal scopes like styles:read and fonts:read, reserving write privileges for server-side operations.

In frontend code, the skill enforces token guards before running new mapboxgl.Map. Skipping the check yields a blank canvas without visible errors. It also warns against combining import.meta.env with process.env in one expression because that triggers a runtime ReferenceError in browsers.

Public tokens receive strict domain allowlists. Secret keys stay in environment variables and rotate every 90 days.

What it helps with

  • configure least-privilege scopes for client-facing Mapbox tokens
  • restrict public token usage by exact URL patterns
  • add runtime guards before calling mapboxgl.Map
  • separate access tokens across development, staging, and production

Example prompts for the agent

  • Review my Vite application for Mapbox token security issues
  • Generate a restricted public token config for our frontend domain
  • Show how to safely handle Mapbox secret tokens on a backend server

How to install mapbox-token-security

1Skills CLI (Vercel)

npx skills add mapbox/mapbox-agent-skills --skill mapbox-token-security -a claude-code

2Manually: put the files in place

~/.claude/skills/mapbox-token-security/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/mapbox-token-security/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about mapbox-token-security

How to install mapbox-token-security in Claude Code?

Run npx skills add mapbox/mapbox-agent-skills --skill mapbox-token-security -a claude-code. The file is saved to ~/.claude/skills/mapbox-token-security/SKILL.md.

What does mapbox-token-security do?

It provides security rules for configuring Mapbox access tokens, scope boundaries, and domain allowlists. It also teaches the assistant to guard against blank map renders caused by unverified tokens.

Why must Mapbox tokens be validated before map initialization?

Calling new mapboxgl.Map without a valid token fails silently as an empty canvas without an error modal. A runtime guard catches missing environment variables early.

Source text

SKILL.md · MIT
---
name: mapbox-token-security
description: Security best practices for Mapbox access tokens, including scope management, URL restrictions, rotation strategies, and protecting sensitive data. Use when creating, managing, or advising on Mapbox token security.
---

# Mapbox Token Security Skill

This skill provides security expertise for managing Mapbox access tokens safely and effectively.

## Token Types and When to Use Them

### Public Tokens (pk.\*)

**Characteristics:**

- Can be safely exposed in client-side code
- Limited to specific public scopes only
- Can have URL restrictions
- Cannot access sensitive APIs

**When to use:**

- Client-side web applications
- Mobile apps
- Public-facing demos
- Embedded maps on websites

**Allowed scopes:**

- `styles:tiles` - Display style tiles (raster)
- `styles:read` - Read style specifications
- `fonts:read` - Access Mapbox fonts
- `datasets:read` - Read dataset data
- `vision:read` - Vision API access

### Secret Tokens (sk.\*)

**Characteristics:**

- **NEVER expose in client-side code**
- Full API access with any scopes
- Server-side use only
- Can create/manage other tokens

**When to use:**

- Server-side applications
- Backend services
- CI/CD pipelines
- Administrative tasks
- Token management

**Common scopes:**

- `styles:write` - Create/modify styles
- `styles:list` - List all styles
- `tokens:read` - View token information
- `tokens:write` - Create/modify tokens
- User feedback management scopes

### Temporary Tokens (tk.\*)

**Characteristics:**

- Short-lived (max 1 hour)
- Created by secret tokens
- Single-purpose use
- Automatically expire

**When to use:**

- One-time operations
- Temporary delegated access
- Short-lived demos
- Security-conscious workflows

## Scope Management Best Practices

### Principle of Least Privilege

**Always grant the minimum scopes needed:**

❌ **Bad:**

```javascript
// Overly permissive - don't do this
{
  scopes: ['styles:read', 'styles:write', 'styles:list', 'styles:delete', 'tokens:read', 'tokens:write'];
}
```

✅ **Good:**

```javascript
// Only what's needed for displaying a map
{
  scopes: ['styles:read', 'fonts:read'];
}
// Add 'styles:tiles' if your map uses raster tile sources
{
  scopes: ['styles:read', 'fonts:read', 'styles:tiles'];
}
```

### Scope Combinations by Use Case

**Public Map Display (client-side):**

```json
{
  "scopes": ["styles:read", "fonts:read", "styles:tiles"],
  "note": "Public token for map display",
  "allowedUrls": ["https://myapp.com/*"]
}
```

**Style Management (server-side):**

```json
{
  "scopes": ["styles:read", "styles:write", "styles:list"],
  "note": "Backend style management - SECRET TOKEN"
}
```

**Token Administration (server-side):**

```json
{
  "scopes": ["tokens:read", "tokens:write"],
  "note": "Token management only - SECRET TOKEN"
}
```

**Read-Only Access:**

```json
{
  "scopes": ["styles:list", "styles:read", "tokens:read"],
  "note": "Auditing/monitoring - SECRET TOKEN"
}
```

## URL Restrictions

### Why URL Restrictions Matter

URL restrictions limit where a public token can be used, preventing unauthorized usage if the token is exposed.

### Effective URL Patterns

✅ **Recommended patterns:**

```
https://myapp.com/*           # Production domain
https://*.myapp.com/*         # All subdomains
https://staging.myapp.com/*   # Staging environment
http://localhost:*            # Local development
```

❌ **Avoid these:**

```
*                             # No restriction (insecure)
http://*                      # Any HTTP site (insecure)
*.com/*                       # Too broad
```

### Multiple Environment Strategy

Create separate tokens for each environment:

```javascript
// Production
{
  note: "Production - myapp.com",
  scopes: ["styles:read", "fonts:read"],
  allowedUrls: ["https://myapp.com/*", "https://www.myapp.com/*"]
}

// Staging
{
  note: "Staging - staging.myapp.com",
  scopes: ["styles:read", "fonts:read"],
  allowedUrls: ["https://staging.myapp.com/*"]
}

// Development
{
  note: "Development - localhost",
  scopes: ["styles:read", "fonts:read"],
  allowedUrls: ["http://localhost:*", "http://127.0.0.1:*"]
}
```

## Token Storage and Handling

### Server-Side (Secret Tokens)

✅ **DO:**

- Store in environment variables
- Use secret management services (AWS Secrets Manager, HashiCorp Vault)
- Encrypt at rest
- Limit access via IAM policies
- Log token usage

❌ **DON'T:**

- Hardcode in source code
- Commit to version control
- Store in plaintext configuration files
- Share via email or Slack
- Reuse across multiple services

**Example: Secure Environment Variable:**

```bash
# .env (NEVER commit this file)
MAPBOX_SECRET_TOKEN=sk.ey...

# .gitignore (ALWAYS include .env)
.env
.env.local
.env.*.local
```

### Client-Side (Public Tokens)

✅ **DO:**

- Use public tokens only
- Apply URL restrictions
- Use different tokens per app
- Rotate periodically
- Monitor usage

❌ **DON'T:**

- Expose secret tokens
- Use tokens without URL restrictions
- Share tokens between unrelated apps
- Use tokens with excessive scopes

**Example: Safe Client Usage (Vite):**

> **Note:** This example uses **Vite**. For Next.js, CRA, Angular, or a plain `window.MAPBOX_ACCESS_TOKEN` / CDN setup, see [Token Management](references/token-management.md). Do not chain `import.meta.env` and `process.env` in one expression — the unused path throws `ReferenceError` in the browser.

```javascript
// Public token with URL restrictions - SAFE (Vite)
const mapboxToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;

// Guard BEFORE constructing the map — missing tokens otherwise yield a silent blank map
if (!mapboxToken || mapboxToken === 'YOUR_MAPBOX_ACCESS_TOKEN') {
  throw new Error('Missing VITE_MAPBOX_ACCESS_TOKEN — set it in env before creating the map');
}

mapboxgl.accessToken = mapboxToken;
```

### Agent anti-pattern: skip the token guard

Agents often assign `mapboxgl.accessToken` and call `new mapboxgl.Map(...)` with no check. That fails closed as a blank canvas with no UI error.

**Always:**

1. Resolve the token from the env pattern for your bundler (never hardcode a real `pk.` in source)
2. Validate it is present and not a placeholder
3. Only then set `accessToken` and construct the map

## Security Checklist

**Token Creation:**

- [ ] Use public tokens for client-side, secret for server-side
- [ ] Apply principle of least privilege for scopes
- [ ] Add URL restrictions to public tokens
- [ ] Use descriptive names/notes for token identification
- [ ] Document intended use and environment

**Token Management:**

- [ ] Store secret tokens in environment variables or secret managers
- [ ] Never commit tokens to version control
- [ ] Rotate tokens every 90 days (or per policy)
- [ ] Remove unused tokens promptly
- [ ] Separate tokens by environment (dev/staging/prod)
- [ ] Guard missing tokens in client code before `new mapboxgl.Map`

**Monitoring:**

- [ ] Track token usage patterns
- [ ] Set up alerts for unusual activity
- [ ] Regular security audits (monthly)
- [ ] Review team access quarterly
- [ ] Scan repositories for exposed tokens

**Incident Response:**

- [ ] Documented revocation procedure
- [ ] Emergency contact list
- [ ] Rotation process documented
- [ ] Post-incident review template
- [ ] Team training on security procedures

## Reference Files

For detailed guidance on specific topics, load these references as needed:

- **`references/token-management.md`** — Bundler-specific env var names and access patterns (Vite / Next / CRA / Angular / CDN). Load when: wiring tokens in a different framework than the Vite example above.
- **`references/rotation-monitoring.md`** — Token rotation strategies (zero-downtime + emergency), monitoring metrics, alerting rules, and monthly/quarterly audit checklists. Load when: implementing rotation, setting up monitoring, or conducting audits.
- **`references/incident-response.md`** — Step-by-step incident response plan and common security mistakes with code examples. Load when: responding to a token compromise, reviewing code for security issues, or training on anti-patterns.

## When to Use This Skill

Invoke this skill when:

- Creating new tokens
- Deciding between public vs secret tokens
- Setting up token restrictions
- Implementing token rotation
- Investigating security incidents
- Conducting security audits
- Training team on token security
- Reviewing code for token exposure

© mapbox · MIT · mapbox/mapbox-agent-skills

Similar skills

Everything for Security →

From the same set18

mapbox-cartography A skill that feeds your agent cartographic rules: layer hierarchy, color palettes, typography and zoom strategy for Mapbox styles. CX Codex +1 2,100installs mapbox-data-visualization-patterns Data visualization patterns for Mapbox GL JS in Claude Code, covering choropleth maps, heatmaps, and 3D styling. Helpful when plotting statistical data or point densities. CX Codex +1 2,100installs mapbox-style-quality A skill that walks your agent through Mapbox style QA: expression and GeoJSON validation, WCAG contrast checks, and style optimization. CX Codex +1 2,000installs mapbox-search-integration Walks your agent through the full Mapbox search rollout: discovery questions first, then a working integration with the right API and parameters. CX Codex +1 1,900installs mapbox-search-patterns Tells your agent which Mapbox search tool to call and which parameters to set for geocoding, POI search and address lookup. CX Codex +1 1,800installs mapbox-store-locator-patterns Store locator patterns for Mapbox GL JS. Helps agents implement marker layers, synchronized lists, and Turf distance calculations without DOM overhead. CX Codex +1 1,700installs mapbox-ios-patterns Official integration patterns for Mapbox Maps SDK v11 on iOS in Swift, SwiftUI and UIKit. Useful when you need a map, markers or GeoJSON data in an app. CX Codex +1 1,500installs mapbox-mcp-devkit-patterns A skill that shows your AI assistant how to drive the Mapbox MCP DevKit Server: styles, tokens, validation and docs lookup from the chat. CX Codex +1 1,500installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor