Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
File size: 20,050 Bytes
6dddc11 86c5005 d543fc1 4cc970e d543fc1 8ee9a90 d543fc1 4cc970e 8ee9a90 4cc970e d543fc1 8ee9a90 4cc970e 8ee9a90 4cc970e 8ee9a90 4cc970e 86c5005 4cc970e 8ee9a90 4cc970e 8ee9a90 4cc970e 8ee9a90 4cc970e 8ee9a90 4cc970e 86c5005 d543fc1 4cc970e d543fc1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 | import { useState } from 'react';
import { Link } from 'react-router-dom';
export const Help = () => {
const [activeFaq, setActiveFaq] = useState(null);
const toggleFaq = (index) => {
setActiveFaq(activeFaq === index ? null : index);
};
return (
<div className="max-w-6xl mx-auto w-full animate-fade-in py-md">
<div className="mb-xl text-center pt-sm">
<h1 className="text-3xl font-bold text-on-surface mb-sm">How can we help you?</h1>
<p className="text-on-surface-variant font-body-lg max-w-2xl mx-auto">
Search our knowledge base or browse the frequently asked questions below to find the answers you need to secure your infrastructure.
</p>
</div>
<div className="bg-surface-container-low border border-outline-variant rounded-xl p-md md:p-xl mb-xl shadow-sm">
<div className="flex items-center gap-sm border border-outline-variant bg-surface rounded-lg px-md py-sm mb-lg shadow-inner focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-all">
<span className="material-symbols-outlined text-outline">search</span>
<input
type="text"
placeholder="Search for articles, guides, or troubleshooting steps..."
className="w-full bg-transparent border-none outline-none text-on-surface font-body-md placeholder:text-outline"
/>
</div>
<h2 className="text-xl font-bold text-on-surface mb-md">Frequently Asked Questions</h2>
<div className="flex flex-col gap-sm">
{/* FAQ 1 */}
<div className={`border rounded-lg overflow-hidden transition-all duration-200 ${activeFaq === 0 ? 'border-primary bg-primary/5' : 'border-outline-variant bg-surface hover:border-outline'}`}>
<button
onClick={() => toggleFaq(0)}
className="w-full text-left px-md py-md flex items-center justify-between focus:outline-none cursor-pointer border-0 bg-transparent"
>
<span className="font-label-lg font-bold text-on-surface pr-sm">How do I start a new security scan?</span>
<span className="material-symbols-outlined text-on-surface-variant transition-transform duration-200" style={{ transform: activeFaq === 0 ? 'rotate(180deg)' : 'rotate(0deg)' }}>
expand_more
</span>
</button>
<div className={`px-md overflow-hidden transition-all duration-300 ease-in-out ${activeFaq === 0 ? 'max-h-[500px] pb-md opacity-100' : 'max-h-0 opacity-0'}`}>
<p className="text-on-surface-variant font-body-md leading-relaxed m-0 border-t border-outline-variant/30 pt-sm">
You can start a new scan by navigating to the 'New Scan' page from the sidebar. Select your target application, choose the appropriate scan intensity (Quick, Advanced, or Deep), and click 'Start Scan'. The process will begin immediately.
</p>
</div>
</div>
{/* FAQ 2 */}
<div className={`border rounded-lg overflow-hidden transition-all duration-200 ${activeFaq === 1 ? 'border-primary bg-primary/5' : 'border-outline-variant bg-surface hover:border-outline'}`}>
<button
onClick={() => toggleFaq(1)}
className="w-full text-left px-md py-md flex items-center justify-between focus:outline-none cursor-pointer border-0 bg-transparent"
>
<span className="font-label-lg font-bold text-on-surface pr-sm">What is the difference between Quick, Advanced, and Deep scans?</span>
<span className="material-symbols-outlined text-on-surface-variant transition-transform duration-200" style={{ transform: activeFaq === 1 ? 'rotate(180deg)' : 'rotate(0deg)' }}>
expand_more
</span>
</button>
<div className={`px-md overflow-hidden transition-all duration-300 ease-in-out ${activeFaq === 1 ? 'max-h-[500px] pb-md opacity-100' : 'max-h-0 opacity-0'}`}>
<p className="text-on-surface-variant font-body-md leading-relaxed m-0 border-t border-outline-variant/30 pt-sm">
Quick scans focus on basic security controls, SSL/TLS configurations, and surface-level misconfigurations. Advanced scans run targeted security scripts against common web vulnerabilities like the OWASP Top 10. Deep scans use our complete arsenal of fuzzers and deep-crawling tools for exhaustive analysis.
</p>
</div>
</div>
{/* FAQ 3 */}
<div className={`border rounded-lg overflow-hidden transition-all duration-200 ${activeFaq === 2 ? 'border-primary bg-primary/5' : 'border-outline-variant bg-surface hover:border-outline'}`}>
<button
onClick={() => toggleFaq(2)}
className="w-full text-left px-md py-md flex items-center justify-between focus:outline-none cursor-pointer border-0 bg-transparent"
>
<span className="font-label-lg font-bold text-on-surface pr-sm">How do I download a PDF report of my scan results?</span>
<span className="material-symbols-outlined text-on-surface-variant transition-transform duration-200" style={{ transform: activeFaq === 2 ? 'rotate(180deg)' : 'rotate(0deg)' }}>
expand_more
</span>
</button>
<div className={`px-md overflow-hidden transition-all duration-300 ease-in-out ${activeFaq === 2 ? 'max-h-[500px] pb-md opacity-100' : 'max-h-0 opacity-0'}`}>
<p className="text-on-surface-variant font-body-md leading-relaxed m-0 border-t border-outline-variant/30 pt-sm">
Navigate to the 'Reports' section in the sidebar. Find your completed scan in the history list, and click the 'Download PDF' button. You can also view the interactive report directly in the dashboard before downloading.
</p>
</div>
</div>
{/* FAQ 4 */}
<div className={`border rounded-lg overflow-hidden transition-all duration-200 ${activeFaq === 3 ? 'border-primary bg-primary/5' : 'border-outline-variant bg-surface hover:border-outline'}`}>
<button
onClick={() => toggleFaq(3)}
className="w-full text-left px-md py-md flex items-center justify-between focus:outline-none cursor-pointer border-0 bg-transparent"
>
<span className="font-label-lg font-bold text-on-surface pr-sm">Why am I getting false positives in Single Page Applications (SPAs)?</span>
<span className="material-symbols-outlined text-on-surface-variant transition-transform duration-200" style={{ transform: activeFaq === 3 ? 'rotate(180deg)' : 'rotate(0deg)' }}>
expand_more
</span>
</button>
<div className={`px-md overflow-hidden transition-all duration-300 ease-in-out ${activeFaq === 3 ? 'max-h-[500px] pb-md opacity-100' : 'max-h-0 opacity-0'}`}>
<p className="text-on-surface-variant font-body-md leading-relaxed m-0 border-t border-outline-variant/30 pt-sm">
SPAs often handle routing dynamically on the client side, which can trick traditional scanners into thinking non-existent pages are real (Soft 404s). LarShield uses advanced baseline fingerprinting to minimize these, but if you notice recurring issues, please contact support.
</p>
</div>
</div>
{/* FAQ 5: How can I manage members in my organization? */}
<div className={`border rounded-lg overflow-hidden transition-all duration-200 ${activeFaq === 4 ? 'border-primary bg-primary/5' : 'border-outline-variant bg-surface hover:border-outline'}`}>
<button
onClick={() => toggleFaq(4)}
className="w-full text-left px-md py-md flex items-center justify-between focus:outline-none cursor-pointer border-0 bg-transparent"
>
<span className="font-label-lg font-bold text-on-surface pr-sm">How can I manage members in my organization?</span>
<span className="material-symbols-outlined text-on-surface-variant transition-transform duration-200" style={{ transform: activeFaq === 4 ? 'rotate(180deg)' : 'rotate(0deg)' }}>
expand_more
</span>
</button>
<div className={`px-md overflow-hidden transition-all duration-300 ease-in-out ${activeFaq === 4 ? 'max-h-[500px] pb-md opacity-100' : 'max-h-0 opacity-0'}`}>
<p className="text-on-surface-variant font-body-md leading-relaxed m-0 border-t border-outline-variant/30 pt-sm">
If you are an Organization Admin, go to the 'Organization' settings. From there, you can invite new members via email, manage their roles (e.g., Executive User, Admin), and revoke access if necessary.
</p>
</div>
</div>
{/* FAQ 6: How is the Security Risk Score calculated? */}
<div className={`border rounded-lg overflow-hidden transition-all duration-200 ${activeFaq === 5 ? 'border-primary bg-primary/5' : 'border-outline-variant bg-surface hover:border-outline'}`}>
<button
onClick={() => toggleFaq(5)}
className="w-full text-left px-md py-md flex items-center justify-between focus:outline-none cursor-pointer border-0 bg-transparent"
>
<span className="font-label-lg font-bold text-on-surface pr-sm">How is the Security Risk Score calculated?</span>
<span className="material-symbols-outlined text-on-surface-variant transition-transform duration-200" style={{ transform: activeFaq === 5 ? 'rotate(180deg)' : 'rotate(0deg)' }}>
expand_more
</span>
</button>
<div className={`px-md overflow-hidden transition-all duration-300 ease-in-out ${activeFaq === 5 ? 'max-h-[2500px] pb-md opacity-100' : 'max-h-0 opacity-0'}`}>
<div className="border-t border-outline-variant/30 pt-md flex flex-col gap-md text-on-surface-variant font-body-md">
<p className="m-0 leading-relaxed">
This assessment utilizes an enterprise CVSS-weighted, category-capped vulnerability risk scoring algorithm. The score calculation is fully deterministic, auditable, and reproducible.
</p>
{/* Section 1 */}
<div>
<h4 className="font-bold text-on-surface text-base mb-xs">1. Severity Base Weights & Formula</h4>
<p className="m-0 text-sm font-mono text-outline-variant/90 bg-surface border border-outline-variant/40 rounded px-sm py-xs inline-block mb-sm">
Deduction per Finding = Severity Base Weight × [0.2 + 0.8 × (CVSS / 10)] × Confidence Multiplier
</p>
<ul className="list-disc pl-md space-y-xs m-0">
<li><strong className="text-on-surface">Critical:</strong> 25.0 pts (CVSS Scaling Range: 0.20 - 1.00x) - Immediate threat to core business logic or full system compromise.</li>
<li><strong className="text-on-surface">High:</strong> 12.0 pts (CVSS Scaling Range: 0.20 - 1.00x) - Direct threat to application confidentiality or integrity.</li>
<li><strong className="text-on-surface">Medium:</strong> 4.0 pts (CVSS Scaling Range: 0.20 - 1.00x) - Indirect threat or security control misconfiguration.</li>
<li><strong className="text-on-surface">Low:</strong> 1.5 pts (CVSS Scaling Range: 0.20 - 1.00x) - Minor hardening flaw or minimal impact finding.</li>
<li><strong className="text-on-surface">Informational:</strong> 0.0 pts (CVSS Scaling Range: 0.00x) - Best practice advisory or design note.</li>
</ul>
</div>
{/* Section 2 */}
<div>
<h4 className="font-bold text-on-surface text-base mb-xs">2. Category Deduction Caps</h4>
<p className="m-0 leading-relaxed mb-xs">
To prevent non-exploitable misconfigurations from disproportionately penalizing the overall score, category deduction caps are enforced:
</p>
<ul className="list-disc pl-md space-y-xs m-0">
<li><strong className="text-on-surface">Security Headers:</strong> 15.0 pts max (Capped)</li>
<li><strong className="text-on-surface">SSL/TLS Configuration:</strong> 15.0 pts max (Capped)</li>
<li><strong className="text-on-surface">HTTP Method Tampering:</strong> 12.0 pts max (Capped & Root-Cause Deduped)</li>
<li><strong className="text-on-surface">Cookie Security:</strong> 10.0 pts max (Capped)</li>
<li><strong className="text-on-surface">DNS Security:</strong> 10.0 pts max (Capped)</li>
<li><strong className="text-on-surface">Compliance Framework Signals:</strong> 0.0 pts (Unlinked — Reported Separately)</li>
</ul>
</div>
{/* Section 3 */}
<div>
<h4 className="font-bold text-on-surface text-base mb-xs">3. Graduated Confidence Multipliers & Posture Floor</h4>
<ul className="list-disc pl-md space-y-xs m-0">
<li><strong className="text-on-surface">Confirmed / High:</strong> 1.00x Multiplier. Floor: 75 / 100 (Grade C) if 0 Critical & 0 Highs (≤ 15 Mediums).</li>
<li><strong className="text-on-surface">Likely:</strong> 0.60x Multiplier. Floor: 60 / 100 (Grade D) if 0 Critical & 0 Highs (> 15 Mediums).</li>
<li><strong className="text-on-surface">Medium:</strong> 0.50x Multiplier. Floor: 55 / 100 (Grade D) if 0 Criticals (≤ 15 Mediums).</li>
<li><strong className="text-on-surface">Low / Unconfirmed:</strong> 0.20x Multiplier. No Floor (Grade F) if 1+ Critical Vulnerability.</li>
</ul>
</div>
{/* Section 4: Worked Calculation Examples */}
<div>
<h4 className="font-bold text-on-surface text-base mb-sm">4. Worked Calculation Examples</h4>
<div className="flex flex-col gap-sm">
{/* Example 1 Card */}
<div className="bg-surface border border-outline-variant/60 rounded-lg p-md shadow-xs">
<h5 className="font-bold text-on-surface text-sm m-0 mb-xs">Example 1: Application with 15 Missing Security Headers (Capped Deduction)</h5>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">Raw calculation: 15 × [4.0 × (0.2 + 0.8 × 0.53) × 1.0] = 37.4 pts.</p>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">Category Cap applied: Security Headers deduction is capped at <strong>15.0 pts max</strong>.</p>
<p className="text-xs text-on-surface-variant m-0">Posture Floor rule: No Critical/High findings → Score = 100 - 15 = <strong>85 / 100 (Grade B — Good)</strong>.</p>
</div>
{/* Example 2 Card */}
<div className="bg-surface border border-outline-variant/60 rounded-lg p-md shadow-xs">
<h5 className="font-bold text-on-surface text-sm m-0 mb-xs">Example 2: Audit with 1 High, 5 Mediums, and 1 Low Finding</h5>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">High (No Brute-Force, CVSS 7.5): 12.0 × (0.2 + 0.8 × 0.75) × 1.0 = 9.6 pts.</p>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">Mediums (CORS, Cookie, DNS): Sum of capped category deductions = 15.8 pts.</p>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">Low (Server Header): 1.5 × (0.2 + 0.8 × 0.31) × 1.0 = 0.7 pts.</p>
<p className="text-xs text-on-surface-variant m-0">Total Deduction = 26.1 pts → Score = 100 - 26.1 = <strong>74 / 100 (Grade C — Fair)</strong>.</p>
</div>
{/* Example 3 Card */}
<div className="bg-surface border border-outline-variant/60 rounded-lg p-md shadow-xs">
<h5 className="font-bold text-on-surface text-sm m-0 mb-xs">Example 3: Application with Critical Blind SQL Injection (CVSS 9.8)</h5>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">Critical (Blind SQLi, CVSS 9.8): 25.0 × (0.2 + 0.8 × 0.98) × 1.0 = 24.6 pts.</p>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">High (Auth Bypass, CVSS 8.1): 12.0 × (0.2 + 0.8 × 0.81) × 1.0 = 10.2 pts.</p>
<p className="text-xs text-on-surface-variant m-0 mb-[2px]">Total Deduction = 34.8 pts → Posture Floor Disabled (Critical Present).</p>
<p className="text-xs text-on-surface-variant m-0">Final Score = 100 - 34.8 = <strong>65 / 100 (Grade D — Poor)</strong>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/* FAQ 7: Privacy Policy & Data Handling */}
<div className={`border rounded-lg overflow-hidden transition-all duration-200 ${activeFaq === 6 ? 'border-primary bg-primary/5' : 'border-outline-variant bg-surface hover:border-outline'}`}>
<button
onClick={() => toggleFaq(6)}
className="w-full text-left px-md py-md flex items-center justify-between focus:outline-none cursor-pointer border-0 bg-transparent"
>
<span className="font-label-lg font-bold text-on-surface pr-sm">Privacy Policy & Data Handling</span>
<span className="material-symbols-outlined text-on-surface-variant transition-transform duration-200" style={{ transform: activeFaq === 6 ? 'rotate(180deg)' : 'rotate(0deg)' }}>
expand_more
</span>
</button>
<div className={`px-md overflow-hidden transition-all duration-300 ease-in-out ${activeFaq === 6 ? 'max-h-[500px] pb-md opacity-100' : 'max-h-0 opacity-0'}`}>
<div className="border-t border-outline-variant/30 pt-sm flex flex-col gap-sm text-on-surface-variant font-body-md">
<p className="m-0 leading-relaxed">
We are fully committed to protecting your data and privacy. We align our data collection and handling procedures with global standards, including GDPR, CCPA, and India's DPDP Act.
</p>
<ul className="list-disc pl-md space-y-xs m-0">
<li><strong className="text-on-surface">Data Encryption:</strong> All vulnerability scan data is encrypted at rest (AES-256) and in transit (TLS 1.3).</li>
<li><strong className="text-on-surface">Audit Logs:</strong> To prevent abuse, we retain metadata regarding IP origins, target configurations, and timestamped actions.</li>
<li><strong className="text-on-surface">Third-Party Sharing:</strong> We do not sell or share your data with third parties for marketing purposes. Data is only shared with essential infrastructure providers or law enforcement if legally compelled.</li>
</ul>
<div className="pt-xs">
<Link
to="/legal/privacy"
className="inline-flex items-center gap-xs text-primary font-bold hover:underline font-label-md"
>
Read our full Privacy Policy <span className="material-symbols-outlined text-sm">arrow_forward</span>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
|