Web Security in Front‑End Development: XSS and CSRF Prevention with Midway

In a front‑end/back‑end separated development model, front‑end developers are now required to write server‑side code, which introduces new web security challenges that must be addressed.

Cross‑Site Scripting (XSS) Defense

XSS is one of the most common attacks where malicious scripts are injected into a page and executed with the victim's privileges. The basic mitigation is to HTML‑escape any data rendered in the page.

<textarea name="description">$description</textarea>

When $description contains a script, the rendered output becomes: <textarea name="description"></textarea><script>alert('hello')</script>

After HTML escaping the variable, the output is safe: <textarea name="description">&lt;/textarea&gt;&lt;script&gt;alert(&quot;hello!&quot;)&lt;/script&gt;

Midway Solution for XSS

Escaping All User‑Generated Output

Midway uses the KISSY xtemplate engine, where {{val}} automatically HTML‑escapes the value, while {{{val}}} outputs raw data.

Developers can also call the built‑in security utilities directly:

var Security = require('midway-security');

data.html = Security.escapeHtml(data.html);

xtpl = xtpl.render(data);

Filtering Rich Text

For user‑submitted rich text (e.g., message boards), Midway provides Security.richText to strip dangerous tags and CSS properties.

<div class="message-board">{{{message}}}</div>

After calling Security.richText(message) , malicious <script> tags and unsafe CSS (e.g., position:fixed ) are removed, leaving harmless HTML.

Cross‑Site Request Forgery (CSRF) Prevention

CSRF attacks forge requests that appear to come from an authenticated user. The mitigation strategy consists of using POST instead of GET for state‑changing actions and validating a CSRF token that is stored in the session.

Midway CSRF Solution

Disable GET Form Submissions

Configure the server to reject GET requests that carry form data, forcing attackers to rely on JavaScript for POST, which is harder to exploit.

Validate CSRF Tokens

Midway forwards a token from server to client and expects the same token back with the request; the framework itself does not perform the verification, but developers can implement token comparison in middleware.

Other Common Web Security Issues

CRLF injection in HTTP headers

Cookie‑size denial‑of‑service attacks

Cookie theft via XSS – mitigate by using HttpOnly and proper expiration

Node.js Specific Risks

Never trust user input: avoid reading files based on user‑supplied paths, avoid eval on unchecked data, and always validate/escape all external inputs.

Conclusion

In a front‑end‑back‑end separated architecture, front‑end developers must also consider server‑side security; Midway offers built‑in utilities for HTML escaping, rich‑text sanitization, and CSRF token handling to help mitigate XSS, CSRF, and related vulnerabilities.