XSS Attack #

# Backend yang rentan — Stored XSS
@app.route('/comments', methods=['POST'])
def create_comment():
    text = request.json['text']
    # Simpan langsung tanpa sanitasi apapun
    Comment.create(text=text)
    return jsonify({'status': 'ok'})

@app.route('/post/<int:post_id>')
def show_post(post_id):
    post = Post.query.get(post_id)
    comments = Comment.query.filter_by(post_id=post_id).all()
    # Render langsung — komentar yang berisi <script> akan dieksekusi browser
    return render_template('post.html', post=post, comments=comments)

<!-- Template yang rentan -->
{% for comment in comments %}
  <div class="comment">
    {{ comment.text | safe }}  ← | safe menonaktifkan auto-escape!
  </div>
{% endfor %}

<!-- Template yang aman — Jinja2 auto-escape by default -->
{% for comment in comments %}
  <div class="comment">
    {{ comment.text }}  ← auto-escaped: < → &lt;, > → &gt;, dll
  </div>
{% endfor %}

# Backend yang rentan — Reflected XSS
@app.route('/search')
def search():
    query = request.args.get('q', '')
    results = Product.query.filter(Product.name.contains(query)).all()

    # Merender query langsung ke template tanpa encoding
    return render_template('search.html', query=query, results=results)

<!-- Template yang rentan -->
<h2>Hasil pencarian untuk: {{ query | safe }}</h2>
<!-- query bisa berisi <script>...</script> -->

<!-- Template yang aman -->
<h2>Hasil pencarian untuk: {{ query }}</h2>
<!-- Jinja2 auto-escape mengubah < menjadi &lt; -->
<!-- <script> muncul sebagai teks, bukan dieksekusi -->

// Sumber yang tidak aman untuk DOM manipulation:

// 1. location.hash — tidak pernah dikirim ke server, jadi tidak ada server-side protection
const productId = location.hash.slice(1);
document.getElementById('product').innerHTML = productId;
// URL: https://app.com/products#<img src=x onerror=alert(1)>
// Browser akan mengeksekusi onerror handler!

// 2. location.search — URL parameter
const params = new URLSearchParams(location.search);
const name = params.get('name');
document.getElementById('greeting').innerHTML = 'Halo, ' + name;
// URL: https://app.com/?name=<script>alert(1)</script>

// 3. document.referrer
document.getElementById('back').innerHTML = 'Kembali ke: ' + document.referrer;

// 4. postMessage tanpa validasi origin
window.addEventListener('message', function(event) {
    // Tidak ada validasi event.origin!
    document.getElementById('content').innerHTML = event.data;
});

// Solusi untuk DOM-based XSS — gunakan textContent, bukan innerHTML

// ANTI-PATTERN: innerHTML menerima dan mengeksekusi HTML
element.innerHTML = userControlledValue;

// BENAR: textContent hanya menerima teks, karakter HTML di-escape otomatis
element.textContent = userControlledValue;

// BENAR: setAttribute untuk value di dalam attribute
const link = document.createElement('a');
link.textContent = linkText;  // bukan innerHTML
link.href = validateUrl(url); // validasi URL sebelum set
container.appendChild(link);

// Jika MEMANG butuh render HTML (misal: rich text editor):
// Gunakan DOMPurify untuk sanitasi sebelum dimasukkan ke innerHTML
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(richTextContent);
// DOMPurify menghapus tag dan attribute yang berbahaya
// tapi mempertahankan formatting yang legitimate

<!-- Konteks 1: HTML content — gunakan HTML entity encoding -->
<p>Nama: {{ user.name }}</p>
<!-- Ali → Ali ✓ -->
<!-- <script>... → &lt;script&gt; ✓ (tidak dieksekusi) -->

<!-- Konteks 2: HTML attribute — encoding berbeda diperlukan -->
<input value="{{ user.name }}">
<!-- Jika nama mengandung " atau ' bisa membreak attribute -->
<!-- Benar: gunakan template engine yang handle ini otomatis -->
<!-- Atau manual: replace " dengan &quot; -->

<!-- Konteks 3: JavaScript — encoding berbeda lagi! -->
<script>
  var username = "{{ user.name }}";
  // Jika nama mengandung ", ini membreak string dan membuka celah XSS
  // Contoh nama berbahaya: "; alert(1); //
</script>

<!-- BENAR untuk Konteks 3: gunakan JSON encoding -->
<script>
  var username = {{ user.name | tojson }};
  // tojson menghasilkan: "Ali" (dengan escape yang benar)
  // Jika nama mengandung karakter berbahaya, mereka di-escape ke \uXXXX
</script>

<!-- Konteks 4: URL — URL encoding -->
<a href="/search?q={{ query | urlencode }}">Cari</a>

<!-- Konteks 5: CSS — jarang tapi perlu diperhatikan -->
<!-- Jangan pernah masukkan user input ke dalam CSS context -->
<style>
  .user-color { color: {{ user.color }}; }
  /* Berbahaya! expression(), javascript: bisa dieksekusi di CSS lama */
</style>

// React — jebakan dangerouslySetInnerHTML
function Comment({ comment }) {
  // ANTI-PATTERN: bypass React's auto-escaping
  return (
    <div dangerouslySetInnerHTML={{ __html: comment.text }} />
  );
  // Nama "dangerously" bukan kebetulan — ini memang berbahaya
  // Jika comment.text dari user, ini adalah XSS

  // BENAR: biarkan React handle rendering (auto-escape)
  return <div>{comment.text}</div>;
  // React menggunakan textContent di bawahnya — aman dari XSS

  // Jika MEMANG butuh render HTML (rich text):
  const sanitized = DOMPurify.sanitize(comment.text);
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}

// Jebakan lain di React: href dengan javascript:
function UserProfile({ user }) {
  // ANTI-PATTERN: URL dari user bisa mengandung javascript:
  return <a href={user.website}>Website</a>;
  // User bisa set website = "javascript:alert(document.cookie)"
  // Browser mengeksekusi alert saat link diklik

  // BENAR: validasi URL sebelum render
  function isSafeUrl(url) {
    try {
      const parsed = new URL(url);
      return ['https:', 'http:'].includes(parsed.protocol);
    } catch {
      return false;
    }
  }

  return isSafeUrl(user.website)
    ? <a href={user.website}>Website</a>
    : <span>Website tidak valid</span>;
}

<!-- Vue — jebakan v-html -->
<template>
  <!-- ANTI-PATTERN: v-html bypass Vue's auto-escaping -->
  <div v-html="comment.text"></div>

  <!-- BENAR: interpolasi biasa (auto-escaped) -->
  <div>{{ comment.text }}</div>

  <!-- Jika butuh rich text: sanitasi dulu -->
  <div v-html="sanitize(comment.text)"></div>
</template>

<script>
import DOMPurify from 'dompurify';
export default {
  methods: {
    sanitize(html) {
      return DOMPurify.sanitize(html);
    }
  }
}
</script>

# Implementasi CSP dengan nonce di Flask
import secrets
from flask import g

@app.before_request
def set_csp_nonce():
    g.csp_nonce = secrets.token_urlsafe(16)

@app.after_request
def add_security_headers(response):
    nonce = getattr(g, 'csp_nonce', '')
    response.headers['Content-Security-Policy'] = (
        f"default-src 'self'; "
        f"script-src 'self' 'nonce-{nonce}'; "
        f"style-src 'self' 'unsafe-inline'; "
        f"img-src 'self' data: https:; "
        f"frame-ancestors 'none'; "
        f"base-uri 'self'; "
        f"form-action 'self'"
    )
    return response

<!-- Gunakan nonce di setiap script tag -->
<script nonce="{{ g.csp_nonce }}">
  // Hanya script dengan nonce yang valid yang dieksekusi
  // Attacker tidak bisa menyisipkan script karena tidak tahu nonce-nya
  // Nonce berubah setiap request
  initApp();
</script>

<!-- Script tanpa nonce TIDAK akan dieksekusi meskipun ada di halaman -->
<script>alert('XSS')</script>  ← browser blokir — tidak ada nonce yang valid

// DOMPurify — library sanitasi HTML yang paling banyak digunakan
import DOMPurify from 'dompurify';

// Konfigurasi default — aman untuk sebagian besar kasus
const clean = DOMPurify.sanitize(dirtyHTML);

// Konfigurasi ketat — hanya izinkan subset kecil HTML
const clean = DOMPurify.sanitize(dirtyHTML, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li', 'ol'],
    ALLOWED_ATTR: ['href', 'title'],
    // Paksa semua link buka di tab baru dengan rel noopener
    ADD_ATTR: ['target'],
    FORCE_BODY: true
});

// Konfigurasi untuk mencegah data: URLs (bisa dipakai untuk XSS)
const clean = DOMPurify.sanitize(dirtyHTML, {
    FORBID_ATTR: ['onerror', 'onload', 'onclick', 'style'],
    FORBID_TAGS: ['script', 'iframe', 'object', 'embed'],
    ALLOW_DATA_ATTR: false
});

# Python — bleach (alternatif DOMPurify untuk backend)
import bleach

ALLOWED_TAGS = ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'li', 'ol', 'br']
ALLOWED_ATTRIBUTES = {
    'a': ['href', 'title', 'rel'],
}

def sanitize_html(raw_html):
    # Hanya izinkan tag dan attribute yang didefinisikan
    clean = bleach.clean(
        raw_html,
        tags=ALLOWED_TAGS,
        attributes=ALLOWED_ATTRIBUTES,
        strip=True  # hapus tag yang tidak diizinkan (bukan escape)
    )
    # Tambahkan rel="noopener noreferrer" ke semua link
    return bleach.linkify(clean, callbacks=[
        bleach.callbacks.nofollow,
        bleach.callbacks.target_blank
    ])

# Session cookie yang tahan XSS
response.set_cookie(
    'session',
    value=session_token,
    httponly=True,   # JavaScript tidak bisa baca cookie ini
    secure=True,     # hanya dikirim via HTTPS
    samesite='Lax',  # perlindungan dasar terhadap CSRF
    max_age=3600     # expire setelah 1 jam
)

# Efek HttpOnly:
# document.cookie → tidak mengandung cookie yang HttpOnly
# fetch('/steal?c=' + document.cookie) → session cookie tidak ada di sini
# → serangan session theft via XSS gagal untuk cookie yang HttpOnly

// ✗ Anti-pattern 1: innerHTML dengan data dari luar
element.innerHTML = userInput;
element.innerHTML = apiResponse.description;
element.innerHTML = location.hash.slice(1);
// Semua ini membuka celah DOM-based XSS

// ✓ Solusi:
element.textContent = userInput;                    // untuk teks biasa
element.innerHTML = DOMPurify.sanitize(richText);  // untuk rich text

────────────────────────────────────────────────────────────────────────────

// ✗ Anti-pattern 2: eval() dengan data eksternal
const data = localStorage.getItem('config');
eval(data);  // jika data dikontrol attacker → RCE di browser

new Function(userCode)();  // sama berbahayanya
setTimeout(userInput, 1000);  // setTimeout dengan string juga eval!

// ✓ Solusi: jangan pernah eval data dari luar

────────────────────────────────────────────────────────────────────────────

// ✗ Anti-pattern 3: URL redirect tanpa validasi
const redirectTo = location.search.get('next');
window.location.href = redirectTo;
// Bisa diredirect ke: javascript:alert(1) atau https://phishing.com

// ✓ Solusi: validasi URL sebelum redirect
function safeRedirect(url) {
    const safe = new URL(url, window.location.origin);
    if (safe.origin !== window.location.origin) {
        throw new Error('External redirect not allowed');
    }
    window.location.href = safe.href;
}

────────────────────────────────────────────────────────────────────────────

// ✗ Anti-pattern 4: | safe / v-html / dangerouslySetInnerHTML dengan data user
{# Jinja2 #}
{{ user.bio | safe }}  ← user.bio bisa berisi script

// ✓ Solusi: hanya gunakan "safe" bypass pada konten yang sudah disanitasi
{{ user.bio | sanitize_html | safe }}  ← sanitasi dulu, baru safe