Security — Weblisk

Input Sanitization

Type HTML/script tags below — they'll be sanitized in real-time.

Sanitized output appears here

import { enhance } from 'weblisk';
import { sanitize, escapeHTML } from 'weblisk/security/sanitize.js';

enhance('#demo-sanitize', (el, { $ }) => {
  $('#sanitize-input').addEventListener('input', () => {
    const raw = $('#sanitize-input').value;
    const clean = sanitize(raw);
    const escaped = escapeHTML(raw);
    $('#output-sanitize').textContent =
      `Raw:       ${raw}\nSanitized: ${clean}\nEscaped:   ${escaped}`;
  });
});

Trusted Types

Trusted Types policy strips dangerous content from HTML strings.

Ready...

import { enhance } from 'weblisk';
import { trustedHTML } from 'weblisk/security/trusted.js';

enhance('#demo-trusted', (el, { $ }) => {
  $('#btn-trusted').addEventListener('click', () => {
    const dangerous =
      '<img src=x onerror="alert(1)">' +
      '<p>Safe content</p>' +
      '<script>evil()</script>';
    try {
      const safe = trustedHTML(dangerous);
      $('#output-trusted').textContent =
        `Input:  ${dangerous}\nOutput: ${safe}\n\n` +
        'Scripts and handlers stripped';
    } catch (e) {
      $('#output-trusted').textContent =
        `Trusted Types: ${e.message}`;
    }
  });
});

CSRF Tokens

Generate cryptographic tokens and protect forms automatically.

No token

import { enhance } from 'weblisk';
import { generateToken, csrfToken } from 'weblisk/security/csrf.js';

enhance('#demo-csrf', (el, { $ }) => {
  $('#btn-csrf').addEventListener('click', () => {
    const token = generateToken();
    const reactiveToken = csrfToken();
    $('#output-csrf').textContent =
      `Token:    ${token}\n` +
      `Reactive: ${reactiveToken}\n` +
      `Length:   ${token.length} chars (64 hex = 32 bytes)\n\n` +
      'Cryptographically random';
  });
});

CSP + Permissions

Content Security Policy and Permissions Policy are active (applied at boot).

Click to inspect active policies

import { enhance } from 'weblisk';
import { buildCSP } from 'weblisk/security/csp.js';

enhance('#demo-csp-perms', (el, { $ }) => {
  $('#btn-check-csp').addEventListener('click', () => {
    const cspMeta = document.querySelector(
      'meta[http-equiv="Content-Security-Policy"]'
    );
    const permMeta = document.querySelector(
      'meta[http-equiv="Permissions-Policy"]'
    );
    const generated = buildCSP();

    let text = `CSP Meta:  ${cspMeta ? 'Applied' : 'Not found'}\n`;
    if (cspMeta) text += `  ${cspMeta.content.substring(0, 80)}...\n\n`;
    text += `Permissions: ${permMeta ? 'Applied' : 'Not found'}\n`;
    text += `\nbuildCSP() default:\n  ${generated.substring(0, 100)}...`;
    $('#output-csp').textContent = text;
  });
});