A React application that demonstrates iframe detection functionality with security guards and access control.
- 🔍 Iframe Detection: Automatically detects if the app is running inside an iframe
- 🛡️ Security Guard: Restricts access based on iframe context
- 🔧 Development Mode: Bypasses restrictions in development for easier testing
- 📍 Referrer Validation: Optional validation of allowed parent domains
- 🎨 Modern UI: Clean, responsive design with real-time status indicators
react-iframe-secure-embed/
├── src/
│ ├── components/
│ │ ├── IframeGuard.tsx # Main guard component
│ │ └── AccessBlocked.tsx # Access denied screen
│ ├── hooks/
│ │ └── useIframeDetection.ts # Iframe detection logic
│ ├── App.tsx # Main application
│ ├── App.css # Component styles
│ ├── index.tsx # React entry point
│ └── index.css # Global styles
├── public/
│ └── index.html # HTML template
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
└── README.md # This file
The custom hook uses multiple detection methods:
- Window comparison: Checks if
window !== window.top - Parent validation: Verifies
window.parent !== window - Referrer checking: Validates
document.referrer - Cross-origin detection: Attempts to access parent properties
The guard component provides:
- Loading state: Shows verification message during detection
- Error handling: Displays security errors if detection fails
- Development bypass: Allows access in development mode
- Referrer validation: Checks allowed parent domains
- Access blocking: Shows blocked message for unauthorized access
Professional access denied screen with:
- Clear warning icon and message
- Status code indication
- Responsive design
- Customizable messaging
-
Install dependencies:
cd react-iframe-secure-embed npm install -
Start development server:
npm start
-
Build for production:
npm run build
import { IframeGuard } from './components/IframeGuard';
function App() {
return (
<IframeGuard>
<YourProtectedContent />
</IframeGuard>
);
}<IframeGuard
bypassInDevelopment={true}
allowedReferrers={['example.com', 'trusted-domain.com']}
customBlockedMessage="Custom access denied message"
>
<YourProtectedContent />
</IframeGuard>import { useIframeDetection } from './hooks/useIframeDetection';
function MyComponent() {
const { isInIframe, isLoading, error } = useIframeDetection();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return (
<div>
{isInIframe ? 'Running in iframe' : 'Running standalone'}
</div>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
children |
ReactNode |
- | Content to protect |
allowedReferrers |
string[] |
[] |
Allowed parent domains |
bypassInDevelopment |
boolean |
true |
Skip restrictions in dev mode |
customBlockedMessage |
string |
- | Custom access denied message |
| Property | Type | Description |
|---|---|---|
isInIframe |
boolean |
Whether app is in iframe |
isLoading |
boolean |
Detection in progress |
error |
string | null |
Error message if detection fails |
- Run
npm start- access is allowed by default - Check console for detection logs
- Build the app:
npm run build - Serve the build:
npx serve -s build - Direct access will be blocked
- Create an HTML file with iframe:
<!DOCTYPE html>
<html>
<head>
<title>Iframe Test</title>
</head>
<body>
<h1>Testing Iframe Detection</h1>
<iframe
src="http://localhost:3000"
width="800"
height="600"
style="border: 1px solid #ccc;">
</iframe>
</body>
</html>- Cross-origin safety: Handles cross-origin iframe restrictions
- Multiple detection methods: Reduces false positives/negatives
- Referrer validation: Optional additional security layer
- Development bypass: Configurable for different environments
- Error handling: Graceful fallbacks for detection failures
- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
MIT License - feel free to use in your projects!
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
If you encounter any issues or have questions:
- Check the console for detection logs
- Verify your iframe setup
- Test in different browsers
- Check network/security settings
Note: This is a demo application showcasing iframe detection techniques. Adapt the security measures according to your specific requirements and threat model.