react-cybershield

CyberShield security integration for React applications.

Installation

npm install react-cybershield

How It Works

This package works by acting as a Client-Side Interceptor. When your backend WAF (CyberShield) detects a threat, it doesn't just block the request; it returns a specific 403 Forbidden or 429 Too Many Requests JSON response.

react-cybershield automatically catches these specific responses on the frontend and forces a secure redirection to a block page, ensuring that SPA (Single Page Application) navigations behave securely without breaking the UI.

Usage

1. Standard Fetch API (Default)

To enable CyberShield protection for all standard fetch requests (including libraries like React Query or SWR), simply import the package at the very top of your application's entry file (usually index.js, main.jsx, or App.js).

Example index.js (Create React App / Vite):

import 'react-cybershield/cybersheild.js'; // 👈 Must be at the very top!
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

2. Is it really automatic for everything?

Yes! Starting from the latest version, CyberShield patches both window.fetch and XMLHttpRequest. This means:

• Native fetch() is automatically protected.
• Axios is automatically protected via XHR patch.
• React Query / SWR are automatically protected.
• jQuery AJAX is automatically protected.

3. Axios — Recommended explicit setup

For guaranteed protection with Axios (especially when the promise chain needs to be fully frozen), use applyCyberShieldToAxios on your Axios instance:

// src/api.js
import axios from 'axios';
import { applyCyberShieldToAxios } from 'react-cybershield/cybersheild.js';

const api = axios.create({ baseURL: 'https://api.yoursite.com' });

// On block (403/429): redirects and freezes the promise chain
applyCyberShieldToAxios(api);

export default api;

This ensures that when a request is blocked, the error never reaches your component's .catch() handler — the user is silently redirected to the block page.

Does it cover ALL cases?

• ✅ Standard fetch() (Native)
• ✅ React Query / SWR / RTK Query (if they use fetch)
• ✅ Axios (Fully automatic now!)
• ✅ Direct XMLHttpRequest (Fully automatic now!)