API Protection Demo - Cloudflare

À propos de l'API Protection Cloudflare

API Shield protège vos APIs contre les abus, les attaques et les fuites de données avec une validation de schémas, une détection d'anomalies et une protection DLP en temps réel. Cette démo simule la protection d'une API e-commerce moderne.

🛡️

API Shield

Actif - Validation de schéma

⚡

Rate Limiting

Actif - 1000 req/min

🔍

DLP

Monitoring - Données sensibles

🤖

Bot Detection

Actif - Score < 30 bloqué

🔗 Endpoints Disponibles

GET /api/users

POST /api/users

GET /api/orders/{id}

POST /api/auth/login

DELETE /api/data/sensitive

🚨 Tests d'Attaque

📊 Monitoring en Temps Réel

Req/min

100%

Succès

45ms

Latence

Menaces

📝 Journal des Requêtes API

[INIT] Monitoring API démarré

[INFO] Protection multicouches activée

', blocked: true, description: 'Cross-Site Scripting détecté' }, ddos: { endpoint: '/api/data', payload: '1000 requêtes/sec', blocked: true, description: 'Attaque DDoS mitigée' }, schema: { endpoint: '/api/users', payload: 'Invalid JSON schema', blocked: true, description: 'Violation de schéma API' } }; const attack = attacks[type]; logAPICall('ATTACK', attack.endpoint, 403, `- ${attack.description}: ${attack.payload}`); updateMetrics(); setTimeout(() => { logAPICall('SECURITY', 'WAF', 200, `- Règle activée: Block ${type.toUpperCase()} patterns`); }, 500); } function updateChart() { const canvas = document.getElementById('apiChart'); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); // Background ctx.fillStyle = '#f7fafc'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Grid ctx.strokeStyle = '#ebd5c1'; ctx.lineWidth = 1; for (let i = 0; i <= 5; i++) { const y = (canvas.height / 5) * i; ctx.beginPath(); ctx.moveTo(30, y); ctx.lineTo(canvas.width - 10, y); ctx.stroke(); } // Data line if (chartData.length > 1) { ctx.strokeStyle = '#ff4801'; ctx.lineWidth = 2; ctx.beginPath(); chartData.forEach((point, index) => { const x = 30 + (index / (chartData.length - 1)) * (canvas.width - 40); const y = canvas.height - 20 - (point / 100) * (canvas.height - 40); if (index === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } }); ctx.stroke(); } // Labels ctx.fillStyle = '#718096'; ctx.font = '12px Arial'; ctx.fillText('Requêtes/min', 10, canvas.height / 2); ctx.fillText('Temps', canvas.width / 2, canvas.height - 5); } // Initialize chart data for (let i = 0; i < 20; i++) { chartData.push(Math.random() * 100); } // Update chart every 2 seconds setInterval(() => { chartData.push(Math.random() * 100 + requestCount); if (chartData.length > 20) { chartData.shift(); } updateChart(); }, 2000); // Background traffic simulation setInterval(() => { if (Math.random() < 0.3) { const endpoints = ['/api/users', '/api/orders/456', '/api/auth/refresh']; const methods = ['GET', 'POST', 'PUT']; testAPI( methods[Math.floor(Math.random() * methods.length)], endpoints[Math.floor(Math.random() * endpoints.length)] ); } }, 3000); // Initialize updateChart();

📡 API Protection

À propos de l'API Protection Cloudflare

🔗 Endpoints Disponibles

🚨 Tests d'Attaque

📊 Monitoring en Temps Réel

📝 Journal des Requêtes API