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>