Front End Development Case Studies & Practical Application 3 — Questions and Answers
Question 1: A fintech app stores a user's JWT in localStorage. A security audit flags this. What is the recommended alternative and why?
- Store the JWT in sessionStorage for automatic expiry
- Store the JWT in an HttpOnly, Secure, SameSite=Strict cookie to prevent JavaScript access (Correct answer)
- Base64-encode the JWT before storing in localStorage
- Store the JWT in a Redux store
Correct answer: Store the JWT in an HttpOnly, Secure, SameSite=Strict cookie to prevent JavaScript access
HttpOnly cookies are inaccessible to JavaScript, eliminating the XSS attack vector that makes localStorage storage of JWTs dangerous.
Question 2: A marketing team requests a page that renders differently for each of 500,000 users based on their account tier. Which rendering strategy is most appropriate?
- Static Site Generation (SSG) with a CDN
- Incremental Static Regeneration (ISR)
- Client-Side Rendering (CSR) after fetching user data from an API (Correct answer)
- Pre-render all 500,000 pages at build time
Correct answer: Client-Side Rendering (CSR) after fetching user data from an API
When content is unique per authenticated user, CSR after an authenticated API call is correct; SSG/ISR is for shared, cacheable content.
Question 3: A developer uses innerHTML to render user-submitted comments on a community forum. What vulnerability does this introduce, and what is the fix?
- SQL injection; use parameterized queries
- Cross-Site Scripting (XSS); sanitize input with a library like DOMPurify or use textContent instead (Correct answer)
- CSRF; add a token to each request
- Clickjacking; add an X-Frame-Options header
Correct answer: Cross-Site Scripting (XSS); sanitize input with a library like DOMPurify or use textContent instead
Inserting unsanitized user content via innerHTML allows attackers to inject executable scripts; using textContent or a sanitizer prevents this.
Question 4: A team migrates a monolithic CSS file (8,000 lines) to a component library. Existing styles bleed into new components. The most scalable long-term solution is:
- Add !important to all new component styles
- Use CSS Modules or CSS-in-JS to scope styles to their component (Correct answer)
- Prefix every new class with a unique namespace manually
- Delete the old CSS file immediately
Correct answer: Use CSS Modules or CSS-in-JS to scope styles to their component
CSS Modules and CSS-in-JS automatically generate unique class names, eliminating global scope leakage without manual namespacing.
Question 5: A web app has a Core Web Vitals issue: Cumulative Layout Shift (CLS) of 0.35. The main culprit is likely:
- Too many HTTP requests
- Images and ad slots without explicitly set width and height attributes (Correct answer)
- Render-blocking JavaScript
- Large main-thread tasks
Correct answer: Images and ad slots without explicitly set width and height attributes
Images and ads without reserved dimensions cause the browser to reflow content when they load, which is the most common cause of high CLS.
Question 6: A user reports that a date picker component is unusable with a keyboard. After pressing Tab to focus the input, arrow keys do nothing. The root cause is most likely:
- The input has type='text' instead of type='date'
- Arrow key events are not handled; the component only responds to mouse click events (Correct answer)
- The component is inside a form element
- The date picker uses absolute positioning
Correct answer: Arrow key events are not handled; the component only responds to mouse click events
Custom interactive widgets must implement keyboard event handlers for Arrow, Enter, Escape, and Tab to be keyboard-operable per WCAG 2.1.1.
Question 7: A team wants to A/B test two checkout flow designs. The experiment must not affect SEO. The safest implementation is:
- Serve different HTML files at different URLs and 301 redirect test users
- Split traffic at the server edge and add a Vary header, keeping the same canonical URL (Correct answer)
- Use JavaScript to rewrite the DOM after load based on a cookie
- Create duplicate pages and use noindex on the variant
Correct answer: Split traffic at the server edge and add a Vary header, keeping the same canonical URL
Edge-level splitting with a single canonical URL keeps link equity intact and avoids content duplication signals seen by crawlers.
Front End Development Case Studies & Practical Application 3
A fintech app stores a user's JWT in localStorage.
A security audit flags this.
What is the recommended alternative and why?