Buwe-Security · Website

Statische Firmenwebseite für Buwe-Security, eine Beratung für Informationssicherheit, Business Continuity und IT-Risikomanagement. Die Seite besteht aus reinem HTML, CSS und JavaScript, ohne Build-Schritt, Frameworks oder externe Ressourcen. Sie setzt keine Cookies und nutzt kein Tracking.

Design und Entscheidungen: docs/superpowers/specs/2026-11-03-buwe-security-website-design.md

Dateien

Datei	Inhalt
index.html	Startseite (One-Pager) mit Preisrechner
impressum.html, datenschutz.html	Rechtsseiten (noch Platzhalter)
css/style.css	gesamte Gestaltung
js/config.js	Preisparameter des Rechners
js/rechner.js	Rechnerlogik und Anzeige
js/main.js	Klasse js, Mobilmenü, Jahreszahl
fonts/	Source Serif 4, Source Sans 3 (WOFF2) mit Lizenzen
img/	Ablage für portrait.jpg
favicon.svg	Favicon
.htaccess	HTTPS-Weiterleitung und Sicherheits-Header (Apache)
.well-known/security.txt	Sicherheitskontakt (RFC 9116)
tests/	Tests und lokaler Testserver (werden nicht hochgeladen)

Lokal ansehen

python3 tests/serve.py        # http://127.0.0.1:8000

Der Testserver schickt dieselben Sicherheits-Header mit wie .htaccess. Verstöße gegen die Content-Security-Policy erscheinen dadurch schon lokal in der Browser-Konsole.

Tests

node --test                   # Preisformel, HTML-Regeln, Inhalte (Node ≥ 22, keine Abhängigkeiten)
bash tests/apache-test.sh     # .htaccess in echtem Apache prüfen (braucht docker oder podman)

Preise anpassen

1. Werte in js/config.js ändern.
2. In index.html die beiden festen Beispiele im Block rechner-statisch anpassen. Diese sieht man nur ohne JavaScript.
3. Ebenso die Vorbelegung von #preis, #rabatt, #tage und den Link #rechner-mail (Startwerte 5 Abteilungen / 50 Assets).
4. node --test ausführen. Der Test meldet, wenn die festen Beispiele oder die Vorbelegung nicht mehr zur Formel passen.

Was muss ich noch eintragen?

Punkt	Wo	Umgang
Telefonnummer	index.html (Kontakt: Text [TELEFON] und Link tel:TELEFON-EINTRAGEN), impressum.html	Nummer eintragen, im Link ohne Leerzeichen und mit Ländervorwahl, z. B. tel:+49201123456
Foto	img/portrait.jpg	Hochformat 4:5, etwa 800 × 1000 px. Bis dahin zeigt die Seite einen Farbverlauf, und der Browser meldet einen 404 für die fehlende Datei.
Anschrift	impressum.html, datenschutz.html: [ANSCHRIFT]	eintragen
USt-IdNr.	impressum.html: [USt-IdNr.]	eintragen oder Abschnitt entfernen
Berufsangaben	impressum.html: [BERUFSANGABEN, falls zutreffend]	eintragen oder Abschnitt entfernen
Hoster, Speicherdauer	datenschutz.html: [HOSTER], [SPEICHERDAUER]	eintragen
Aufsichtsbehörde	datenschutz.html: [AUFSICHTSBEHÖRDE]	z. B. die Landesbeauftragte für Datenschutz NRW
Stand	datenschutz.html: [STAND]	Datum eintragen
Hinweis „Platzhalter“	Kasten oben in impressum.html und datenschutz.html	nach rechtlicher Prüfung entfernen
„kostenloses Erstgespräch“	index.html (Rechner)	bleibt, lässt sich leicht entfernen
security.txt	Expires:	jährlich erneuern, höchstens ein Jahr im Voraus (aktuell 2027-10-31). node --test meldet, wenn das Datum abgelaufen ist.

Alle Stellen finden:

grep -rn 'TELEFON\|\[[A-ZÄÖÜ]' *.html

Veröffentlichen

Hochladen sollen alle Dateien außer docs/, tests/, .superpowers/, .git/ und README.md.

Achtung: .htaccess und der Ordner .well-known/ beginnen mit einem Punkt. Manche FTP-Programme blenden solche Dateien aus und laden sie dann nicht mit hoch.

Sicherheits-Header bei anderen Hostern

.htaccess wirkt nur auf Apache (mit mod_headers und mod_rewrite). Bei anderen Hostern müssen dieselben Header anders gesetzt werden.

Ionos-Webhosting läuft auf Apache, dort gilt .htaccess unverändert. Verzeichnislisten (etwa /css/) sperrt die .htaccess über mod_rewrite statt mit Options -Indexes, weil manche Hoster Options in .htaccess verbieten und dann jede Seite mit Fehler 500 antwortet. Wer es lieber mit Options -Indexes lösen will, sollte das nach dem Hochladen sofort im Browser prüfen.

Netlify (Datei _headers im Wurzelverzeichnis):

/*
  Content-Security-Policy: default-src 'self'; img-src 'self' data:; style-src 'self'; script-src 'self'; font-src 'self'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'
  Strict-Transport-Security: max-age=31536000; includeSubDomains
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=(), interest-cohort=()

nginx:

server {
    listen 80;
    server_name buwe-security.de;
    return 301 https://$host$request_uri;
}

server {
    # listen 443 ssl; … Zertifikat …
    add_header Content-Security-Policy "default-src 'self'; img-src 'self' data:; style-src 'self'; script-src 'self'; font-src 'self'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'" always;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), interest-cohort=()" always;
    autoindex off;   # Standard bei nginx, keine Verzeichnislisten
    charset utf-8;
    charset_types text/plain text/css application/javascript;
}

Hinter einem Proxy oder Load-Balancer, der TLS beendet: Dort sieht Apache jede Anfrage als HTTP, %{HTTPS} ist also immer off, und die Weiterleitung in .htaccess läuft in eine Endlosschleife. In dem Fall die Bedingung ersetzen durch:

RewriteCond %{HTTP:X-Forwarded-Proto} !https

includeSubDomains bei HSTS gilt für alle Subdomains von buwe-security.de. Diese müssen dann ebenfalls per HTTPS erreichbar sein.

Lizenzen

Die Schriften Source Serif 4 und Source Sans 3 (Adobe) stehen unter der SIL Open Font License 1.1, siehe fonts/OFL-*.txt.