Best practices

--- name: best-practices description: Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices," "conduct a security audit," "modernize code," "perform a code quality review," or "check for vulnerabilities." license: MIT metadata: author: web-quality-skills version: "1.0" --- # Best Practices Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns. ## Security ### HTTPS Everywhere Enforce HTTPS: ``html <!-- ❌ Mixed content --> <img src="http://example.com/image.jpg"> <script src="http://cdn.example.com/script.js"></script> <!-- ✅ HTTPS only --> <img src="https://example.com/image.jpg"> <script src="https://cdn.example.com/script.js"></script> ` Avoid protocol-relative URLs ( //example.com/...) : they're an HTTP-era pattern with no benefit on HTTPS-only sites and hide the actual scheme from reviewers. **HSTS Header:** ` Strict-Transport-Security: max-age=31536000; includeSubDomains; preload ` ### Content Security Policy (CSP) `html <!-- Basic CSP via meta tag --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.example.com;"> <!-- Better: HTTP header --> ` **CSP Header (recommended):** ` Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123' https://trusted.com; style-src 'self' 'nonce-abc123'; img-src 'self' data: https:; connect-src 'self' https://api.example.com; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; ` **Using nonces for inline scripts:** `html <script nonce="abc123"> // This inline script is allowed </script> ` ### Trusted Types (modern DOM-XSS defense) A strict CSP blocks loading untrusted *script files*, but it doesn't stop a string from reaching innerHTML, eval, or other DOM-XSS sinks. Trusted Types : Baseline across all major browsers since early 2026 : closes that hole by making sinks reject raw strings and accept only typed objects produced by a named policy. ` Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default; ` `javascript // One central policy that does the sanitization const escape = trustedTypes.createPolicy('default', { createHTML: (s) => DOMPurify.sanitize(s, { RETURN_TRUSTED_TYPE: true }) }); // ❌ This now throws TypeError under enforcement element.innerHTML = userInput; // ✅ Goes through the policy element.innerHTML = escape.createHTML(userInput); ` Roll out with Content-Security-Policy-Report-Only first to find every sink usage in your app, then flip to enforcement. Angular has built-in Trusted Types support; React 19+ produces TrustedHTML when Trusted Types are enforced; for everything else, [DOMPurify](https://github.com/cure53/DOMPurify) is the de-facto sanitizer. ### Subresource Integrity (SRI) for third-party scripts Pin every <script> and <link rel="stylesheet"> you load from a CDN you don't control. If the CDN is compromised : as happened to polyfill.io in 2024 : the browser refuses to execute a file whose hash doesn't match. `html <script src="https://cdn.example.com/lib@1.2.3/dist/lib.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous"></script> ` integrity accepts space-separated hashes; include the next version's hash before rotating to avoid downtime. Generate with openssl dgst-sha384 -binary file.js | openssl base64-A. SRI requires crossorigin and an Access-Control-Allow-Origin response header from the CDN. ### Security headers ` # Prevent clickjacking : prefer CSP frame-ancestors` (above); X-Frame-Options # is the legacy fallback for older browsers. X-Frame-Options: DENY # Prevent MIME type sniffing X-Content-Type-Options: nosniff # Do NOT send X-XSS-Protection. The legacy browser XSS auditor was deprecated # and removed (Chrome 78, Edge 17), and in some cases it int