HtmlSanitizer

// Beispiel «Bereinigung ausprobieren» (Basis).
//
// Selbst bereinigen muss hier niemand: Die Skript-Sammlung der Basis bringt sanitizeString(text)
// mit (fmh-client-sanitizer.js). Die Funktion holt die Whitelist des Servers einmalig ab, merkt
// sie sich in window.sanitizerSettings und lässt DOMPurify damit arbeiten.
//
// sanitizeString ist async und liefert ein Promise.
document.addEventListener('click', function (ereignis) {
    if (ereignis.target.id !== 'sanitizerPruefen') {
        return;
    }

    var eingabe = document.getElementById('sanitizerEingabe');
    var ausgabe = document.querySelector('[data-sanitizer-ausgabe]');
    var vorschau = document.querySelector('[data-sanitizer-vorschau]');

    sanitizeString(eingabe.value).then(function (bereinigt) {
        ausgabe.textContent = bereinigt;

        // Bewusst innerHTML: Genau das ist der Zweck der Bereinigung, was hier ankommt, darf in
        // die Seite. Ungeprüfte Eingaben gehören niemals so eingesetzt.
        vorschau.innerHTML = bereinigt;
    });
});

// Dieselbe Umsetzung mit jQuery. Diese Datei wird NICHT geladen, sie steht nur im Code-Tab
// «jQuery». Würden beide Fassungen laufen, liefe jeder Klick doppelt.
//
// Unterschied zur nativen Fassung gibt es hier fast keinen: sanitizeString stammt aus der
// Skript-Sammlung der Basis und liefert ein Promise, .then() bleibt also auch mit jQuery.
// jQuery steuert nur die Delegation und den Zugriff auf die Elemente bei.
$(document).on('click', '#sanitizerPruefen', function () {
    var $ausgabe = $('[data-sanitizer-ausgabe]');
    var $vorschau = $('[data-sanitizer-vorschau]');

    sanitizeString($('#sanitizerEingabe').val()).then(function (bereinigt) {
        $ausgabe.text(bereinigt);

        // Bewusst html(): Genau das ist der Zweck der Bereinigung.
        $vorschau.html(bereinigt);
    });
});

using System;
using System.Linq;
using databinding.WebSecurity.Headers;
using databinding.WebSecurity.HtmlSanitizer.Settings;
using FMH.ICT.Basis.Web.Security.Security;
using FMH.Komponente.Basis.Erweiterungen;
using FMH.Komponente.BenutzerPraesenzCheck;
using FMH.Komponente.Infrastruktur;
using FMH.Komponente.Infrastruktur.Bundle;
using FMH.Komponente.Infrastruktur.Mvc.Errors;
using FMH.Komponente.Serilog.Ingestion;
using FMH.Komponente.Tabelle.Erweiterungen;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.StaticFiles;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Net.Http.Headers;
using Serilog;
using Serilog.Sinks.SystemConsole.Themes;

namespace FMH.Komponente.WebUI
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            var configuration = builder.Configuration;

            builder.Host.UseSerilog((context, services, config) => config.Enrich.WithRequestHeader("User-Agent")
                .Enrich.WithClientIp()
                ////.Enrich.With(services.GetService<BenutzerTraceIdNet6Enricher>()) // Einkommentieren mit isAuthEnabled = true
                .ReadFrom.Configuration(configuration)
                .WriteTo.Console(theme: ConsoleTheme.None));

            // Stellt sicher, dass Static Web Assets referenzierter Razor Class Libraries (z.B. FMH.Komponente.Basis)
            // unabhängig von der Hosting-Umgebung auflösbar sind, damit WebOptimizer deren SCSS-/JS-Dateien findet.
            builder.WebHost.UseStaticWebAssets();

            // Add services to the container.
            // AdditionalMetadataProvider registrieren, damit [AdditionalMetadata(...)] die
            // ModelMetadata.AdditionalValues füllt, Voraussetzung für die Listen-EditorTemplates
            // (DropdownList/RadioList/CheckboxList/…, Schlüssel "Selection") sowie für die
            // Display-Optionen Bold/ValueColorClass und die Icons in Auswahlbox/CheckInfo.
            builder.Services.AddControllersWithViews(options =>
            {
                options.AddFmhWidgetOptions();

                // Nötig für die Tabellen-Beispiele mit AjaxDataUrl: Ohne den Binder darin kommt
                // GridDatatableParameter leer im Endpunkt an (DataTables sendet start/length/
                // order[0][dir]/search[value], nicht Skip/Take/…). AddFmhWidgetOptions kann ihn
                // nicht mitbringen, FMH.Komponente.Basis referenziert die Tabelle nicht.
                options.AddFmhTabelleOptions();
            });

            builder.Services.AddBundledAssets();

            // Links im Richtext zulassen. Die Voreinstellung des Sanitizers kennt weder das a-Tag
            // noch Attribute, ein eingefügter Link würde samt Text entfernt.
            //
            // Muss VOR der ersten Verwendung stehen: Serverseitig liest HtmlWhitelistSanitizer die
            // Werte über HtmlSanitizerRichtextDefauls.Options(), clientseitig meldet sie der
            // Endpunkt /api/widgets/HtmlSanitizer/settings an DOMPurify. Beide Seiten arbeiten damit
            // gegen dieselbe Liste.
            HtmlSanitizerRichtextDefauls.AddAllowedTags("a");
            HtmlSanitizerRichtextDefauls.AddAllowedAttributes("href", "target", "rel");

            // Die Upload-Validierung (DocumentUploadRequired) liest die Anzahl bereits
            // vorhandener Dokumente aus dem Request – dafür braucht sie den HttpContext.
            builder.Services.AddHttpContextAccessor();

            // Bindet die Section "BenutzerPraesenzPruefer" der appsettings.json an das Setting und
            // macht es über IOptions injizierbar, die Demo-Seite nutzt es genau so wie ein Projekt.
            builder.Services.AddBenutzerPraesenzPruefer(builder.Configuration);

            // Bindet die Section "ErrorPages" an das Setting. Die Fehlerseiten des Pakets
            // Infrastruktur sind über /400, /401, /403, /404 und /500 ohnehin erreichbar; erst
            // diese Zeile gibt ihnen Logo und Texte dieser Anwendung.
            //
            // Bewusst OHNE app.UseSiwfErrorPages(...): Die Middleware würde in Betrieb die
            // Umleitung auf die Fehlerseiten übernehmen und damit UseExceptionHandler ersetzen.
            // Beim Entwickeln hält sie sich über ihren Entwicklermodus selbst zurück, sie bleibt
            // hier trotzdem aussen vor, damit die Pipeline dieser Anwendung dem entspricht, was
            // die Code-Tabs der Demo-Seite «Fehlerseiten» zeigen.
            builder.Services.AddSiwfErrorPages(builder.Configuration);

            var app = builder.Build();
            app.UseSiwfLogIngestion();
            var isDev = app.Environment.IsDevelopment();

            // Configure the HTTP request pipeline.
            if (!isDev)
            {
                app.UseExceptionHandler("/Home/Error");

                // Ausnahme für die Integrationstests: Die Seiten der Area Integration zeigen auch
                // ausserhalb von Development die Entwickler-Fehlerseite. Der Test der doppelten
                // Render-Aufrufe liest dort die Meldung der Ausnahme, die allgemeine Fehlerseite
                // verschluckt sie. Liegt innerhalb von UseExceptionHandler und fängt deshalb zuerst.
                app.UseWhen(
                    context => context.Request.Path.StartsWithSegments("/Integration"),
                    integration => integration.UseDeveloperExceptionPage());

                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            var headerCollection = new HeaderCollectionBuilder().AddConnectSrcLocalhost()
                .AddUnsafeInlineScriptSrc()
                .AddBlazor()
                .Build();

            // frame-src/frame-ancestors auf 'self': Die Doku-Seite AnalyseDemo/Demo/AnalyseSeite zeigt
            // die Analyse-Seite derselben Anwendung in einem Rahmen. frame-src erlaubt das Einbetten,
            // frame-ancestors das Eingebettetwerden, beides bleibt auf die eigene Herkunft beschränkt.
            // Der HeaderCollectionBuilder kennt dafür keine Kurzform, deshalb hier am fertigen
            // HeaderCollection ergänzt, statt die Richtlinie neu aufzubauen.
            headerCollection.GetContentSecurityPolicyBuilder()
                .AddFrameSrc(direktive => direktive.Self())
                .AddFrameAncestors(direktive => direktive.Self());

            app.UseHeaderSecurity(headerCollection);

            app.UseHttpsRedirection();

            app.UseWebOptimizer();

            // Native ES-Module werden nicht gebündelt. Der Versionsstempel wirkt nur auf die jeweilige
            // Einstiegsdatei, nicht auf die transitiv importierten Module. Deshalb erzwingen wir für die
            // Modulverzeichnisse eine ETag-Revalidierung bei jedem Laden, damit Änderungen an jeder Datei
            // im Modul-Graphen sofort sichtbar werden. Die Verzeichnisse liefert der Modulkatalog, damit
            // ein neues Modul hier nicht nachgetragen werden muss.
            var modulVerzeichnisse = app.Services.GetRequiredService<ModuleScriptRegistry>()
                .GetModuleDirectories();

            // Nur für die Demo: Dateitypen ohne bekannten MIME-Typ liefert UseStaticFiles nicht aus.
            // Die Beispiele des DocumentViewers brauchen aber ein Format, das er bewusst nicht
            // darstellen kann, dort ist eine Outlook-Nachricht der realistische Fall.
            var inhaltstypen = new FileExtensionContentTypeProvider();
            inhaltstypen.Mappings[".msg"] = "application/vnd.ms-outlook";

            // Nicht nur für die Demo: pdf.js im PDFViewer lädt Zeichensatztabellen (.bcmap) und
            // Farbprofile (.icc) nach, beide kennt UseStaticFiles nicht und antwortet mit 404.
            inhaltstypen.Mappings[".bcmap"] = "application/octet-stream";
            inhaltstypen.Mappings[".icc"] = "application/vnd.iccprofile";

            app.UseStaticFiles(
                new StaticFileOptions
                {
                    ContentTypeProvider = inhaltstypen,
                    OnPrepareResponse = context =>
                    {
                        var pfad = context.Context.Request.Path.Value;

                        if (pfad != null && modulVerzeichnisse.Any(verzeichnis =>
                                pfad.StartsWith(verzeichnis, StringComparison.OrdinalIgnoreCase)))
                        {
                            context.Context.Response.Headers[HeaderNames.CacheControl] = "no-cache, must-revalidate";
                        }
                    },
                });

            app.UseRouting();

            app.UseAuthorization();

            app.MapControllerRoute("areas", "{area:exists}/{controller=Home}/{action=Index}/{id?}");

            // Sprechende Adressen für die Anleitungen: /Anleitungen/logging/ueberblick. Beide Segmente
            // sind Pflicht, deshalb fällt /Anleitungen weiter auf die Default-Route und landet auf Index.
            app.MapControllerRoute("anleitungen", "Anleitungen/{gruppe}/{seite}", new { controller = "Anleitungen", action = "Seite" });

            app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");

            app.Run();
        }
    }
}

// Beispiel «Whitelist der Anwendung» (Basis).
//
// loadSanitizerSettings() aus fmh-client-sanitizer.js holt /api/widgets/HtmlSanitizer/settings ab
// und legt das Ergebnis in window.sanitizerSettings. Ein zweiter Aufruf liefert den gemerkten
// Stand zurück, ohne erneut beim Server nachzufragen.
var whitelistAusgabe = document.querySelector('[data-whitelist-ausgabe]');

if (whitelistAusgabe !== null) {
    loadSanitizerSettings().then(function (einstellungen) {
        whitelistAusgabe.textContent =
            'ALLOWED_TAGS (' + einstellungen.ALLOWED_TAGS.length + ')\n  ' +
            einstellungen.ALLOWED_TAGS.join(', ') + '\n\n' +
            'ALLOWED_ATTR (' + einstellungen.ALLOWED_ATTR.length + ')\n  ' +
            einstellungen.ALLOWED_ATTR.join(', ');
    });
}

// Dieselbe Umsetzung mit jQuery. Diese Datei wird NICHT geladen, sie steht nur im Code-Tab
// «jQuery».
//
// loadSanitizerSettings stammt aus der Skript-Sammlung der Basis und liefert ein Promise; jQuery
// ändert daran nichts und steuert hier nur den Zugriff auf das Ausgabefeld bei.
var $whitelistAusgabe = $('[data-whitelist-ausgabe]');

if ($whitelistAusgabe.length > 0) {
    loadSanitizerSettings().then(function (einstellungen) {
        $whitelistAusgabe.text(
            'ALLOWED_TAGS (' + einstellungen.ALLOWED_TAGS.length + ')\n  ' +
            einstellungen.ALLOWED_TAGS.join(', ') + '\n\n' +
            'ALLOWED_ATTR (' + einstellungen.ALLOWED_ATTR.length + ')\n  ' +
            einstellungen.ALLOWED_ATTR.join(', '));
    });
}