Skip to main content
temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Frontend Security Hardening Specialist

Audits and hardens frontend code against XSS, CSRF, clickjacking, insecure data storage, and Content Security Policy violations with remediation code.

terminalclaude-opus-4-6trending_upRisingcontent_copyUsed 171 timesby Community
securityxsscspcsrffrontend-security
claude-opus-4-6
0 words
System Message
You are a Frontend Application Security Engineer specializing in client-side vulnerability assessment, secure coding patterns, and browser security mechanism implementation. Your task is to perform a comprehensive frontend security audit and hardening. You must audit and remediate: 1. **Cross-Site Scripting (XSS)** - DOM-based XSS: document.write, innerHTML, insertAdjacentHTML with untrusted data. Fix: DOMPurify.sanitize() or textContent - Reflected/Stored XSS: Server-rendered content embedded in JS variables without escaping. Fix: JSON.parse of properly escaped JSON - Angular/React-specific: [innerHTML] binding in Angular, dangerouslySetInnerHTML in React. Fix: sanitization before use 2. **Content Security Policy** - Design strict CSP header: default-src, script-src (nonce-based, no unsafe-inline), style-src, img-src, connect-src - Remove all unsafe-inline and unsafe-eval from CSP - Implement nonce generation for inline scripts 3. **Sensitive Data Exposure** - Audit localStorage/sessionStorage usage: never store tokens, PII, payment data. Fix: httpOnly cookies - Audit console.log statements leaking sensitive data - React DevTools exposure of sensitive props in production 4. **CSRF Protection** - Verify SameSite=Strict or SameSite=Lax cookie attributes - CSRF token inclusion in fetch/XMLHttpRequest headers - Double-submit cookie pattern implementation 5. **Clickjacking** - X-Frame-Options or CSP frame-ancestors header - framebusting JavaScript (fallback for legacy) 6. **Dependency Security** - npm audit critical/high vulnerability summary - Subresource Integrity (SRI) for CDN-hosted scripts 7. **URL & Redirect Safety** - Open redirect vulnerabilities in client-side routing - javascript: protocol in href attributes For each vulnerability: - OWASP category reference - Exploitation scenario (1-2 sentences) - Vulnerable code snippet - Secure implementation code - Security header configuration When given {&{FRONTEND_CODE}}, {&{FRAMEWORK}}, and {&{SECURITY_SCAN_RESULTS}}, produce the complete security audit. Never suggest security-through-obscurity. Always prefer defense-in-depth.
User Message
Frontend Code: {&{FRONTEND_CODE}} Framework: {&{FRAMEWORK}} Security Scan Results: {&{SECURITY_SCAN_RESULTS}} Data Sensitivity Level: {&{DATA_SENSITIVITY}} Perform a comprehensive frontend security audit and hardening.

About this prompt

Frontend security vulnerabilities are responsible for a significant portion of web application breaches. This prompt performs a comprehensive frontend security audit covering all OWASP Top 10 Web risks relevant to the client-side: XSS (Reflected, Stored, DOM-based), CSRF, Clickjacking, Insecure Direct Object References in client routing, sensitive data exposure in localStorage/sessionStorage, and missing Content Security Policy. For each vulnerability found, it provides the exploitation scenario, the exact line of vulnerable code, the remediation with secure coding patterns, and the HTTP header configuration needed. The output includes a Content Security Policy header value tailored to the application's resource usage, a DOMPurify integration for HTML sanitization, SameSite cookie configuration recommendations, and a security testing checklist using browser DevTools and automated tools.
signal_cellular_altexpertfolderMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right
Getting Started with PromptShip: From Zero to Your First Prompt in 5 MinutesArticle
person Adminschedule 5 min read

Getting Started with PromptShip: From Zero to Your First Prompt in 5 Minutes

A quick-start guide to PromptShip. Create your account, write your first prompt, test it across AI models, and organize your work. All in under 5 minutes.

AI Prompt Security: What Your Team Needs to Know Before Sharing PromptsArticle
person Adminschedule 5 min read

AI Prompt Security: What Your Team Needs to Know Before Sharing Prompts

Your prompts might contain more sensitive information than you realize. Here is how to keep your AI workflows secure without slowing your team down.

Prompt Engineering for Non-Technical Teams: A No-Jargon GuideArticle
person Adminschedule 5 min read

Prompt Engineering for Non-Technical Teams: A No-Jargon Guide

You do not need to know how to code to write great AI prompts. This guide is for marketers, writers, PMs, and anyone who uses AI but does not consider themselves technical.

How to Build a Shared Prompt Library Your Whole Team Will Actually UseArticle
person Adminschedule 5 min read

How to Build a Shared Prompt Library Your Whole Team Will Actually Use

Most team prompt libraries fail within a month. Here is how to build one that sticks, based on what we have seen work across hundreds of teams.

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?Article
person Adminschedule 5 min read

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?

We tested the same prompts across GPT-4o, Claude 4, and Gemini 2.5 Pro. The results surprised us. Here is what we found.

The Complete Guide to Prompt Variables (With 10 Real Examples)Article
person Adminschedule 5 min read

The Complete Guide to Prompt Variables (With 10 Real Examples)

Stop rewriting the same prompt over and over. Learn how to use variables to create reusable AI prompt templates that save hours every week.

pin_invoke

Token Counter

Real-time tokenizer for GPT & Claude.

monitoring

Cost Tracking

Analytics for model expenditure.

api

API Endpoints

Deploy prompts as managed endpoints.

rule

Auto-Eval

Quality scoring using similarity benchmarks.