Security Best Practices
Security Best Practices — purpose and prerequisites
Application security requires validating inputs, avoiding unsafe HTML interpolation, parameterizing SQL, protecting credentials, and carefully handling cookies and tokens. Static typing catches type mistakes, not cross-site scripting or injection on its own. Prefer well-maintained libraries and secure defaults for cryptography and session handling.
What you’ll learn
- Explain the purpose of security best practices.
- Identify the typed contract, runtime responsibilities and common pitfalls.
- Run the example and extend its behavior with a practical exercise.
How the idea works
Every special character is replaced with an HTML entity, demonstrating output encoding for an HTML text context. In actual DOM code, setting textContent is usually a safer approach for plain text than constructing HTML.
One generic escape function is not safe in every context: HTML attributes, CSS, JavaScript, and URLs have different escaping requirements.
Visualize the flow
Run the checked TypeScript example
This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.
TypeScript source
function escapeHtml(text: string): string {
return text.replace(/[&<>"']/g, character => ({
"&": "&", "<": "<", ">": ">", '"': """, "'": "'",
})[character] ?? character);
}
console.log(escapeHtml('<img src="x" onerror="bad()">'));Verified output
<img src="x" onerror="bad()">Compile: npx tsc --strict --target es2022 --module commonjs security-best-practices.ts; run: node security-best-practices.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.
Trace the execution
Every special character is replaced with an HTML entity, demonstrating output encoding for an HTML text context. In actual DOM code, setting textContent is usually a safer approach for plain text than constructing HTML.
Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.
Common mistake and correction
One generic escape function is not safe in every context: HTML attributes, CSS, JavaScript, and URLs have different escaping requirements.
Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.
Your turn: extend the example
Review a mock API for string interpolation in SQL queries and direct innerHTML assignment, then replace both with safer APIs.
Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.
Check your understanding
Key idea to remember
Every special character is replaced with an HTML entity, demonstrating output encoding for an HTML text context. In actual DOM code, setting textContent is usually a safer approach for plain text than constructing HTML.
Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.
Reaching the recap and completing the quizzes are separate milestones.