Rethinking Web Security: A Front‑End Perspective on Attack and Defense

0. The Battle of Security Across All Ends

Because of the way development responsibilities are divided, many people instinctively split web security into front‑end security and back‑end security, even debating which is more important. Some claim front‑end security is meaningless because the code is open in the browser and only affects a single user.

But the debate is irrelevant; the important thing is to pause and think.

1. Rethink

Recently I reviewed my own web security practices and reflected on web security as a systematic effort to protect web systems. It requires both single‑endpoint defenses (front‑end or back‑end) and coordinated front‑back‑end cooperation.

2. My Definition of Web Security

Web security, simply put, is the prevention of attacks. Two core concepts:

Attack – actions performed by attackers.

Prevention – measures taken by the web platform provider.

Thus we can view defense from the attack side.

3. Defense from the Attack Perspective

3.1 Attack Goals

Attackers have various motives, generally falling into two categories:

Stealing user information – passwords, private data, etc., enabling identity theft, asset theft, or resale of privacy.

Disrupting product availability – overwhelming server interfaces, causing service denial.

3.2 Attack Targets & Weapons

Web attacks target three main components: the browser, the transmission channel, and the server.

The green arrows in the diagram (see image above) represent data flow, which is both the communication link and the attacker’s weapon.

3.3 The Essence of Attack

Attackers exploit data flow to compromise any of the three targets; compromising a single target can achieve the attack goal.

3.4 Defense Strategies Based on Attack Targets

① Attack on Transmission Channel

Transmission channels (both narrow and broad sense) can be attacked via data theft or tampering. Defenses: data encryption and parameter signing.

1. Data Encryption: Front‑end encrypts data (e.g., RSA) with a public key and nonce provided by the back‑end; the back‑end decrypts with its private key, ensuring intercepted data is useless.

<code>/**
 * Filter illegal XSS characters
 * @method filterScript
 * @param {String} str String to filter
 * @return {String} Filtered string
 */
function filterScript(str) {
    var text = document.createTextNode(str),
        parser = document.createElement("div"),
        value = "";
    parser.appendChild(text);
    value = parser.innerHTML;
    text = null;
    parser = null;
    return value;
}</code>

2. Data Signing: For URLs that may be altered (e.g., during sharing), sign URL parameters and verify the signature on the back‑end to reject tampered requests.

② Attack on Browser

Browser‑side attacks occur after data reaches the client. Two main methods:

Exploiting browser features (e.g., XSS). Defense: filter untrusted data before rendering.

Exploiting front‑end logic flaws (e.g., open redirects). Defense: whitelist allowed domains for redirect targets.

<code>/**
 * Check if redirect domain is in whitelist
 * Whitelist: testhost.com
 */
function isInWriteList() {
    var target = getParameter('target');
    return /^(https?:\/\/)?(testhost)\.com/i.test(target);
}</code>

③ Attack on Server

Server‑side attacks target backend code and logic, such as SQL injection or malicious file uploads. Defenses are primarily back‑end measures like input validation, file type checks, and isolation.

Backend logic vulnerabilities (e.g., improper permission checks, lack of malicious user detection, or user impersonation) also require server‑side safeguards, sometimes complemented by front‑end tokens (e.g., CSRF tokens).

4. Summary

Web is an end‑to‑end system. Attacks target either a single endpoint or the channel between endpoints. If the attack target is the channel, coordinated front‑back‑end defense is needed; if the target and vulnerability reside on the same side, that side alone can defend; otherwise, joint defense is required.

If the attack targets the channel, both ends must cooperate for defense.

If the attack and vulnerability are on the same side, only that side needs to defend.

If they are on different sides, coordinated defense is necessary.