Hugging Face's logo

Spaces:
bep40
/
security
Running

App Files Community
security / index.html
bep40's picture
bep40
Add 3 files
a5ae2ba verified
raw
history blame contribute delete
20.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Secure Web Application with Advanced Security Measures">
<!-- Security Headers -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; style-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none'; object-src 'none';">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains">
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
<meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=()">
<title>Secure Web Application</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom CSS -->
<style>
/* Custom security-focused styles */
.security-badge {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* Secure form styling */
.secure-form input:focus {
outline: 2px solid #10b981;
outline-offset: 2px;
}
/* Security indicator */
.security-indicator {
position: relative;
}
.security-indicator::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background-color: #10b981;
border-radius: 50%;
border: 2px solid white;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- HTTPS Enforced Notice (would actually be enforced by server) -->
<div class="bg-green-600 text-white text-center py-2 px-4">
<div class="max-w-6xl mx-auto flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span>Secure Connection: All data is encrypted with HTTPS</span>
</div>
</div>
<!-- Main Navigation -->
<nav class="bg-white shadow-sm">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15l5-5m0 0l-5-5m5 5H7m10 4v1a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
<span class="ml-2 text-xl font-bold text-gray-900">SecureApp</span>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="border-green-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Security</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
Secure Login
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Hero Section -->
<div class="text-center mb-16">
<h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
Advanced Web Security
</h1>
<p class="mt-5 max-w-xl mx-auto text-xl text-gray-500">
Built with multiple layers of protection to keep your data safe.
</p>
</div>
<!-- Security Features Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<!-- Feature 1: HTTPS -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 security-indicator">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 class="ml-3 text-lg font-medium text-gray-900">HTTPS Encryption</h3>
</div>
<p class="mt-2 text-gray-600">
All communications are encrypted with TLS 1.2+ to prevent eavesdropping and man-in-the-middle attacks.
</p>
</div>
<!-- Feature 2: CSP -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 security-indicator">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15l5-5m0 0l-5-5m5 5H7m10 4v1a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
</div>
<h3 class="ml-3 text-lg font-medium text-gray-900">Content Security Policy</h3>
</div>
<p class="mt-2 text-gray-600">
Strict CSP prevents XSS attacks by restricting sources for scripts, styles, and other resources.
</p>
</div>
<!-- Feature 3: XSS Protection -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 security-indicator">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
</svg>
</div>
<h3 class="ml-3 text-lg font-medium text-gray-900">XSS Protection</h3>
</div>
<p class="mt-2 text-gray-600">
Built-in protections against cross-site scripting with automatic escaping and sanitization of user input.
</p>
</div>
<!-- Feature 4: CSRF Tokens -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 security-indicator">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
</svg>
</div>
<h3 class="ml-3 text-lg font-medium text-gray-900">CSRF Protection</h3>
</div>
<p class="mt-2 text-gray-600">
All forms include anti-CSRF tokens to prevent unauthorized actions on behalf of authenticated users.
</p>
</div>
<!-- Feature 5: Secure Headers -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 security-indicator">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
</div>
<h3 class="ml-3 text-lg font-medium text-gray-900">Security Headers</h3>
</div>
<p class="mt-2 text-gray-600">
Comprehensive security headers including X-Frame-Options, X-Content-Type-Options, and HSTS.
</p>
</div>
<!-- Feature 6: Rate Limiting -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 security-indicator">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="ml-3 text-lg font-medium text-gray-900">Rate Limiting</h3>
</div>
<p class="mt-2 text-gray-600">
Protection against brute force attacks with intelligent rate limiting on authentication endpoints.
</p>
</div>
</div>
<!-- Secure Login Form -->
<div class="bg-white shadow-md rounded-lg overflow-hidden max-w-md mx-auto">
<div class="bg-green-600 py-3 px-4">
<h2 class="text-white text-lg font-semibold flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
Secure Login
</h2>
</div>
<div class="p-6 secure-form">
<form id="loginForm" onsubmit="return handleLogin(event)">
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="your@email.com">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="••••••••">
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-green-600 hover:text-green-500">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
Sign in
</button>
</div>
</form>
<div id="securityNotice" class="mt-4 text-xs text-gray-500 flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15l5-5m0 0l-5-5m5 5H7m10 4v1a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
<span>This form is protected with CSRF tokens, HTTPS encryption, and rate limiting.</span>
</div>
</div>
</div>
<!-- Security Badge -->
<div class="mt-16 text-center">
<div class="inline-block bg-white p-6 rounded-full shadow-xl security-badge">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
<div class="ml-4 text-left">
<h3 class="text-lg font-bold text-gray-900">Security Verified</h3>
<p class="text-sm text-gray-600">This site implements industry-standard security measures</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="md:flex md:items-center md:justify-between">
<div class="flex justify-center md:order-2 space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Privacy Policy</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15l5-5m0 0l-5-5m5 5H7m10 4v1a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Security</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15l5-5m0 0l-5-5m5 5H7m10 4v1a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
</a>
</div>
<div class="mt-8 md:mt-0 md:order-1">
<p class="text-center text-base text-gray-400">
&copy; 2023 SecureApp. All rights reserved.
</p>
</div>
</div>
</div>
</footer>
<!-- Security Script -->
<script>
// This would be replaced with actual security implementations in a production environment
// Generate a CSRF token for the form
function generateCSRFToken() {
return 'csrf-' + Math.random().toString(36).substr(2, 9) + '-' + new Date().getTime();
}
// Add CSRF token to form
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('loginForm');
const csrfToken = generateCSRFToken();
const csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = '_csrf';
csrfInput.value = csrfToken;
form.appendChild(csrfInput);
// Store token in session storage for validation
sessionStorage.setItem('csrfToken', csrfToken);
});
// Handle form submission with security checks
function handleLogin(event) {
event.preventDefault();
// In a real app, this would be an AJAX call to your backend
console.log('Form submitted with security checks');
// Show success message
alert('Login attempt recorded (simulated). In a real app, this would be securely processed server-side.');
// Reset form
event.target.reset();
return false;
}
// Security headers would be enforced by the server in production
console.log('Security headers are active (simulated in this demo)');
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bep40/security" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>