<p>Data must be properly escaped at each layer during the transfer from the database to the user's browser to prevent security vulnerabilities. 1. Database layer: Use parameterized queries to prevent SQL injection and avoid string splicing; 2. Server layer: Input needs to be verified and cleaned, and output is escaped according to the context, such as HTML entity encoding, JavaScript string escape, URL encoding, etc., and priority is given to the use of built-in escape functions of the framework; 3. API layer: Use built-in methods such as JSON.stringify or json_encode to serialize data, and enable JSON_HEX_TAG and other flags to prevent XSS; 4. Front-end layer: avoid innerHTML inserting unfiltered user data, use textContent or DOMPurify to clean HTML, prohibit dynamic inline events, and set CSP policy; 5. Other layers: Format-specific escape of user input in HTTP headers, logs and external services (such as mail, command lines), preventing attacks such as CRLF injection and log forgery. In short, the output should always be escaped according to the context, following the principle of "late escape, regular escape, appropriate escape", and combining input verification and in-depth defense mechanism to ensure security. </p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175382496276469.jpg" class="lazy" alt="From Database to Browser: A Complete Guide to Escaping Data at Every Layer"></p> <p> When data travels from your database to a user's browser, it passes through multiple layers — each one a potential entry point for security vulnerabilities if not handled properly. One of the most critical practices across this journey is <strong>data escaping (or output encoding)</strong> . Failing to escape data correctly at each stage can lead to serious exploits like SQL injection, XSS (Cross-Site Scripting), and command injection. </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175382496376247.jpeg" class="lazy" alt="From Database to Browser: A Complete Guide to Escaping Data at Every Layer"><p> Let's walk through the full path — from database to browser — and see exactly where and how to escape data at every layer.</p> <hr> <h3> 1. <strong>Database Layer: Prevent SQL Injection with Parameterized Queries</strong> </h3> <p> Before data even enters your database, you need to ensure that user input doesn't corrupt your queries. </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175382496465038.jpeg" class="lazy" alt="From Database to Browser: A Complete Guide to Escaping Data at Every Layer"><p> <strong>Threat:</strong> SQL Injection<br> <strong>Solution:</strong> Use parameterized queries (prepared statements), not string concatenation.</p> <h4 id="Do-This"> ? Do This:</h4><pre class='brush:php;toolbar:false;'> # Python with SQLite cursor.execute("INSERT INTO users (name, email) VALUES (?, ?)", (name, email))</pre><pre class='brush:php;toolbar:false;'> // Node.js with PostgreSQL (using pg) pool.query(&#39;INSERT INTO users (name, email) VALUES ($1, $2)&#39;, [name, email]);</pre><h4 id="Don-t-Do-This"> ? Don't Do This:</h4><pre class='brush:php;toolbar:false;'> "INSERT INTO users (name) VALUES (&#39;" name "&#39;)"</pre><blockquote><p> <strong>Note:</strong> Escaping alone (like <code>mysql_real_escape_string</code> ) is outdated and error-prone. Always prefer <strong>prepared statements</strong> — they handle escaping automatically and correctly. </p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175382496531472.jpeg" class="lazy" alt="From Database to Browser: A Complete Guide to Escaping Data at Every Layer" /></blockquote><hr /><h3 id="strong-Server-Layer-Validate-Sanitize-Input-Escape-Output-strong"> 2. <strong>Server Layer: Validate & Sanitize Input, Escape Output</strong></h3><p> Once data is retrieved from the database, you must treat it as untrusted until properly escaped for its destination context.</p><h4 id="Input-Validation-Sanitization"> Input Validation & Sanitization</h4><ul><li> Validate data types, lengths, formats (eg, email regex).</li><li> Sanitize where appropriate (eg, strip unwanted HTML if allowing limited markup).</li></ul><p> But <strong>don't rely on sanitization alone</strong> — escaping at output is still required.</p><h4 id="Output-Escaping-Context-Matters"> Output Escaping (Context Matters!)</h4><p> The same data may need different escaping depending on where it's used:</p><table><thead><tr><th> Output Context</th><th> Escaping Method</th></tr></thead><tbody><tr><td> HTML Body</td><td> HTML entity encoding</td></tr><tr><td> JavaScript in HTML</td><td> JavaScript string escaping HTML</td></tr><tr><td> URLs</td><td> URL encoding</td></tr><tr><td> CSS</td><td> CSS escaping</td></tr></tbody></table><h4 id="Example-HTML-Escaping"> Example: HTML Escaping</h4><pre class='brush:php;toolbar:false;'> function escapeHtml(text) { const map = { &#39;&&#39;: &#39;&&#39;, &#39;<&#39;: &#39;<&#39;, &#39;>&#39;: &#39;>&#39;, &#39;"&#39;: &#39;"&#39;, "&#39;": &#39;&#x27;&#39;, }; return text.replace(/[&<>"&#39;]/g, m => map[m]); }</pre><p> Use libraries like:</p><ul><li> <strong>DOMPurify</strong> (for HTML with safe markup)</li><li> <strong>Lodash</strong> ( <code>_.escape()</code> )</li><li> Framework built-ins (eg, React auto-escapes, Django templates auto-escape)</li></ul><blockquote><p> ? Rule of thumb: <strong>Escape as close as possible to the output context.</strong></p></blockquote><hr /><h3 id="strong-API-Layer-Encode-Data-for-JSON-Safely-strong"> 3. <strong>API Layer: Encode Data for JSON Safely</strong></h3><p> When sending data via JSON APIs (eg, REST, GraphQL), ensure special characters don't break structure or enable XSS.</p><h4 id="Key-Points"> Key Points:</h4><ul><li> Use built-in JSON serialization ( <code>JSON.stringify</code> , <code>json_encode</code> , etc.) — they handle escaping automatically.</li><li> Never manually build JSON strings from user data.</li></ul><h4 id="Safe"> ? Safe:</h4><pre class='brush:php;toolbar:false;'> echo json_encode([&#39;name&#39; => $name], JSON_HEX_TAG | JSON_HEX_APOS);</pre><p> The flags like <code>JSON_HEX_TAG</code> convert <code><</code> to <code>\u003C</code> , preventing accidental HTML interpretation.</p><h4 id="Danger"> ?? Danger:</h4><pre class='brush:php;toolbar:false;'> // Don&#39;t inject raw data into JSON-like strings `{"name": "${userInput}"}`</pre><p> Even if you use <code>JSON.stringify</code> , be cautious when embedding JSON in HTML or JavaScript — that's a double-context problem.</p><hr /><h3 id="strong-Frontend-Browser-Layer-Prevent-XSS-in-Dynamic-Content-strong"> 4. <strong>Frontend / Browser Layer: Prevent XSS in Dynamic Content</strong></h3><p> Just because data came from your server doesn't mean it's safe — especially if you're rendering it dynamically with JavaScript.</p><h4 id="Risks"> Risks:</h4><ul><li> <code>innerHTML</code> with unescaped data → XSS</li><li> Unsafe use of <code>eval()</code> or <code>JSON.parse()</code> on untrusted input</li><li> Injecting user data into <code>href</code> , <code>onclick</code> , or script URLs</li></ul><h4 id="Best-Practices"> Best Practices:</h4><ul><li> Use <code>textContent</code> instead of <code>innerHTML</code> unless HTML is explicitly allowed.</li><li> If you must use <code>innerHTML</code> , sanitize with <strong>DOMPurify</strong> :<pre class='brush:php;toolbar:false;'> const clean = DOMPurify.sanitize(userGeneratedHtml); element.innerHTML = clean;</pre></li><li> Avoid inline event handlers ( <code><div onclick="..."></code> ) with dynamic data.</li><li> Set <code>Content-Security-Policy</code> (CSP) headers to reduce XSS impact.</li></ul><h4 id="Example-of-a-Hidden-Risk"> Example of a Hidden Risk:</h4><pre class='brush:php;toolbar:false;'> <script> const userData = "<?php echo $name; ?>"; // If $name contains ", chaos begins </script></pre><p> ? Fix: Escape for JavaScript string context:</p><pre class='brush:php;toolbar:false;'> json_encode($name, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT)</pre><p> This ensures the output is safe for embedding in <code><script></script></code> tags.</p> <hr> <h3> 5. <strong>Additional Layers: Headers, Logs, and External Services</strong> </h3> <p> Don't forget less obvious destinations:</p> <h4 id="HTTP-Headers"> HTTP Headers</h4> <ul> <li> Never include user input in headers (eg, <code>Location</code> , <code>Content-Disposition</code> ) without strict validation.</li> <li> CRLF injection can occur if <code>\r\n</code> is allowed.</li> </ul> <h4 id="Logs"> Logs</h4> <ul> <li> Avoid logging raw user input without truncation or sanitization.</li> <li> Prevent log injection (eg, fake log entries with <code>\n</code> or color codes).</li> </ul> <h4 id="External-Services-Emails-CLI-etc"> External Services (Emails, CLI, etc.)</h4> <ul><li> Use proper escaping for the target format:<ul> <li> Shell commands → <code>escapeshellarg()</code> in PHP</li> <li> Email headers → encode with <code>quoted_printable_encode()</code> or similar</li> </ul> </li></ul> <hr> <h3 id="Summary-Escaping-by-Layer"> Summary: Escaping by Layer</h3> <table> <thead><tr> <th> Layer</th> <th> Threat</th> <th> Primary Defense</th> </tr></thead> <tbody> <tr> <td> Database</td> <td> SQL Injection</td> <td> Parameterized queries</td> </tr> <tr> <td> Server Output</td> <td> XSS, Code Injection</td> <td> Context-aware escaping</td> </tr> <tr> <td> API (JSON)</td> <td> XSS, Parsing Errors</td> <td> <code>JSON.stringify</code> hex escaping</td> </tr> <tr> <td> Frontend</td> <td> XSS</td> <td> Sanitize <code>innerHTML</code> , use CSP</td> </tr> <tr> <td> Other Outputs</td> <td> Injection, Spoofing</td> <td> Format-specific encoding</td> </tr> </tbody> </table> <hr> <h3 id="Final-Tips"> Final Tips</h3> <ul> <li> <strong>Never trust "clean" data.</strong> Data from the database isn't inherently safe — it's only as safe as the escaping used when it was inserted.</li> <li> <strong>Escape at output, not input.</strong> You can't predict all future use cases when storing data.</li> <li> <strong>Use modern frameworks.</strong> React, Angular, Django, Laravel, etc., have built-in protections — but understand their limits.</li> <li> <strong>Defense in depth.</strong> Combine escaping with input validation, CSP, and secure headers.</li> </ul> <hr> <p> Escaping isn't a one-time cleanup — it's a continuous practice at every layer where data changes context. Get it right, and you close one of the most common doors attackers walk through.</p> <p> Basically: <strong>escape late, escape often, and escape appropriately.</strong></p>

The above is the detailed content of From Database to Browser: A Complete Guide to Escaping Data at Every Layer. For more information, please follow other related articles on the PHP Chinese website!