react-secure-frame

A secure, rate-limited iframe component for React applications that prevents unwanted navigation and enforces usage limits.

Features

✅ Rate Limiting - Prevent excessive reloads
✅ Navigation Lock - Only specified URL remains visible
✅ Sandboxed - Enhanced security with customizable policies
✅ Responsive - Adapts to container size
✅ Type Checking - PropTypes validation

Installation

npm install react-secure-frame prop-types
# or
yarn add react-secure-frame prop-types

Basic Usage

import { SecureFrame } from 'react-secure-frame';

function App() {
  return (
    <SecureFrame
      url="https://example.com"
      title="Secure Content Viewer"
      height="500px"
    />
  );
}

Advanced Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | url | string | required | URL to display in iframe | | title | string | required | Accessibility title | | width | string/number | '100%' | Iframe width | | height | string/number | '500px' | Iframe height | | rateLimit | number | 5 | Max reloads per time window | | rateLimitWindow | number | 60000 (1 min) | Rate limit window in ms | | sandbox | string | 'allow-scripts allow-forms' | Sandbox permissions | | className | string | '' | Additional CSS class | | style | object | {} | Inline styles |

Security Configuration

Customize sandbox attributes for your security needs:

<SecureFrame
  url="https://example.com"
  title="Secure Content"
  sandbox="allow-same-origin allow-scripts"
/>

Rate Limiting Example

<SecureFrame
  url="https://example.com"
  title="Rate Limited Content"
  rateLimit={10}          // 10 reloads max
  rateLimitWindow={30000} // 30 second window
/>

Handling Blocked Content

When rate limits are exceeded, users will see:

• A friendly message (customizable via CSS)
• Automatic reset after the rate limit window expires

Styling

Import the default styles or provide your own:

/* Custom styling example */
.secure-frame-blocked {
  background: #ffe6e6;
  border: 1px solid #ff9999;
  padding: 20px;
  text-align: center;
}

Best Practices

1. Always set a title for accessibility
2. Use strict sandbox policies when possible
3. Monitor rate limits in high-traffic applications
4. Combine with CSP headers for additional security

Development

git clone https://github.com/your-repo/react-secure-frame.git
cd react-secure-frame
npm install
npm run build

License

MIT © [Nuvo AI Pvt Ltd]