Kategorie: Angular

Kategorien
Angular

Angular 17 neue Features

Im Rahmen der stetigen Evolution von Angular, einer der führenden Plattformen für die Entwicklung von Webanwendungen, wurden kürzlich mehrere neue Features eingeführt, die die Art und Weise, wie Entwickler mit dieser Framework arbeiten, signifikant beeinflussen. Zu diesen Neuerungen gehören die Direktiven @if, @for, @SWITCH sowie die Einführung von Signals. Diese Elemente erweitern die Möglichkeiten der bedingten Darstellung und Schleifen in Angular-Anwendungen und bringen ein neues Paradigma für die Zustandsverwaltung mit Signals ein. In diesem Artikel werfen wir einen genaueren Blick auf diese Neuerungen, ihre Funktionsweisen und den Mehrwert, den sie für Angular-Entwickler darstellen.

@if Direktive

Die @if Direktive in Angular ermöglicht eine einfache und effiziente Methode zur bedingten Darstellung von Komponenten oder Elementen im DOM. Ähnlich wie die *ngIf Direktive, die bereits seit Längerem in Angular verfügbar ist, erlaubt @if Entwicklern, bestimmte Teile eines Templates basierend auf einem booleschen Ausdruck ein- oder auszublenden. Der Hauptunterschied besteht darin, dass @if eine direktere und deklarativere Syntax bietet, die die Lesbarkeit und Wartbarkeit des Codes verbessert.

@if (isAdmin) {
  <button>Erase database</button>
} @else {
  <p>You are not authorized.</p>
}

@for Direktive

Mit der Einführung der @for Direktive erweitert Angular seine Fähigkeiten in Bezug auf die Darstellung von Listen oder Arrays. Diese Direktive ersetzt die herkömmliche *ngFor Direktive und bietet eine verbesserte Performance und Flexibilität beim Durchlaufen von Datenstrukturen. @for arbeitet nahtlos mit den neuen Signals zusammen, um effizient auf Änderungen in den Daten reagieren zu können.

<ul>
  @for (ingredient of ingredientList; track ingredient.name) {
  <li>{{ ingredient.quantity }} - {{ ingredient.name }}</li>
  }
</ul>

Der track Ausdruck in der Angular @for-Schleife, spezifisch track ingredient.name in dem gegebenen Beispiel, dient dazu, die Identität jedes Elements in einer Liste eindeutig zu bestimmen, insbesondere bei Operationen, die die Liste verändern, wie das Hinzufügen, Entfernen oder Neuanordnen von Elementen. Diese Technik verbessert die Performance, da Angular dadurch nur die veränderten Elemente im DOM aktualisieren muss, anstatt die komplette Liste neu zu rendern.

Angenommen, Sie haben eine Liste von Zutaten, und jede Zutat hat einen einzigartigen Namen. Wenn sich die Eigenschaften einer spezifischen Zutat ändern (z.B. die Menge) oder wenn Zutaten hinzugefügt oder entfernt werden, ermöglicht der track Ausdruck Angular, genau diese Veränderungen nachzuverfolgen und nur die betroffenen Elemente im DOM zu aktualisieren. Das bedeutet, dass Angular effizienter arbeiten kann, da es nicht nötig ist, die gesamte Liste neu zu rendern, wenn sich nur ein Teil davon ändert. Diese Vorgehensweise ist besonders nützlich in dynamischen Anwendungen, wo Listen häufig aktualisiert werden und die Performance kritisch sein kann.

@switch Direktive

Die @switch Direktive stellt eine Erweiterung der bedingten Renderings in Angular dar. Sie ermöglicht es Entwicklern, komplexe bedingte Logik innerhalb ihrer Templates auf eine übersichtliche und strukturierte Weise zu implementieren. Mit @switch können mehrere Bedingungen geprüft und entsprechend unterschiedliche Komponenten oder Elemente dargestellt werden, ähnlich einer Switch-Case-Struktur in traditionellen Programmiersprachen.

@switch (color) {
  @case ("red") {
    <div>Red</div>
  }
  @case ("blue") {
    <div>Blue</div>
  }
  @default {
    <div>Default</div>
} }

Signals

Eines der aufregendsten Features in der neuesten Angular-Version ist die Einführung von Signals. Signals repräsentieren eine neue Art der Zustandsverwaltung, die reaktive Programmierung in Angular-Anwendungen vereinfacht. Sie erlauben es Entwicklern, Zustände auf eine Weise zu verwalten, die sowohl leistungseffizient als auch einfach zu verstehen ist. Signals fördern eine engere Integration von reaktiven Patterns in Angular und ermöglichen eine feinkörnigere Kontrolle über die Aktualisierung von Ansichten in Reaktion auf Zustandsänderungen.

Damit kann die Change Detection gesteuert und die Performance verbessert werden.

Fazit

Die neuen Direktiven @if, @for, @switch sowie die Einführung von Signals markieren einen signifikanten Schritt vorwärts in der Entwicklung von Angular. Sie bieten Entwicklern mächtige Werkzeuge, um ihre Anwendungen effizienter, reaktiver und mit einer besseren Benutzererfahrung zu gestalten. Durch die Vereinfachung komplexer Logiken und die Verbesserung der Performance bei der Datenverarbeitung setzen diese Neuerungen neue Maßstäbe in der Webentwicklung. Es bleibt spannend zu sehen, wie diese Features die Zukunft von Angular und der Entwicklung moderner Webanwendungen insgesamt prägen werden.

Kategorien
Angular

vis.js VIS Network Demo in Angular

Um vis.js in Angular zu verwenden und ein Netzwerk zu erstellen kann man folger Maßen vorgehen:

  1. Installieren das v-network-graph-Paket über npm:
npm install v-network-graph

2. Erstellen der Angular Komponente mit Beispiel Kanten und Knoten:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { DataSet } from "vis-data/peer";
import {Network, Node} from "vis-network/peer";

@Component({
  selector: 'app-network',
  template: `
    <div #network id="network"></div>
  `,
  styles: [
    '#network{height: 800px;width: 1200px;}'
  ]
})
export class NetworkComponent implements OnInit{
  @ViewChild('network', { static: true }) networkContainer?: ElementRef;

  ngOnInit() {

    const container = this.networkContainer?.nativeElement;

    const nodes: DataSet<Node> = new DataSet<Node>({});
    nodes.add([
      { id: 1, label: 'Node 1' },
      { id: 2, label: 'Node 2' },
      { id: 3, label: 'Node 3' },
      { id: 4, label: 'Node 4' },
      { id: 5, label: 'Node 5' }
    ]);

    const edges = new DataSet<any>({});
    edges.add([
      { from: 1, to: 2, label: 'Edge 1-2' },
      { from: 1, to: 3, label: 'Edge 1-3' },
      { from: 2, to: 4, label: 'Edge 2-4' },
      { from: 2, to: 5, label: 'Edge 2-5' }
    ]);

    const data = {
      nodes: nodes,
      edges: edges
    };

    const options = {};

    new Network(container, data, options);
  }
}

Ergebnis:

vis.js Netzwerk / Graph Beispiel in Angular
Kategorien
Angular three.js WebGL

Angular three.js Demo

Mit den folgenden Schritten kann man eine webgl three.js Komponenete in Angular erstellen:

  1. Installiere Three.js als Abhängigkeit:
npm install three

2. Installiere die Three.js-Typdefinitionen, um die Typüberprüfung und Code-Intelligenz in deinem Angular-Projekt zu verbessern. Führe den folgenden Befehl aus:

npm install @types/three --save-dev

3. Erstelle einer Angular Komponente

import {Component, OnInit} from '@angular/core';
import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {TextGeometry} from "three/examples/jsm/geometries/TextGeometry";
import {FontLoader} from "three/examples/jsm/loaders/FontLoader";
import {Mesh, MeshBasicMaterial, Scene, SphereGeometry, WebGLRenderer} from "three";

@Component({
  selector: 'app-mindmap',
  template: `
    <div id="mindmap" #mindmap></div>
  `,
  styles: [
    '#mindmap{  width: 1200px;height: 400px;display: block;}'
  ]
})
export class MindmapComponent implements OnInit {

  nodeA!: Mesh<SphereGeometry, MeshBasicMaterial>;
  nodeB!: Mesh<SphereGeometry, MeshBasicMaterial>;
  nodeC!: Mesh<SphereGeometry, MeshBasicMaterial>;

  @ViewChild('mindmap', { static: true }) mindmap?: ElementRef;

  private font: any;

  width = 1200;
  height = 400;

  private renderer!: WebGLRenderer;
  private scene!: Scene;

  ngOnInit(): void {

    // Laden der Schriftart
    var fontLoader = new FontLoader();
    fontLoader.load('assets/font/helvetiker_regular.typeface.json', (font: any) => {
      this.font = font;
      this.drawMindmap();
    });
  }

  private drawMindmap()
  {

// Initialisieren der Szene, Kamera und Renderer
    this.initialize();

    this.createNodes();

    // Erstellen der Textgeometrie mit der geladenen Schriftart
    this.createText();

    this.addControls();


    this.createConnections();
  }

  private initialize() {
    this.scene = new THREE.Scene();

    this.renderer = new THREE.WebGLRenderer({antialias: true});
    this.renderer.setSize(this.width, this.height);
    this.renderer.setClearColor(0xffffff); // Hintergrundfarbe auf Weiß setzen

  this.mindmap?.nativeElement.appendChild(this.renderer.domElement);

    const axesHelper = new THREE.AxesHelper( 1 );
    this.scene.add( axesHelper );
  }

  private createNodes() {
// Erstellen der Knoten-Geometrie und Materialien
    var geometry = new THREE.SphereGeometry(0.05, 32, 32); // Größe der Kugeln auf 10% reduzieren
    var material = new THREE.MeshBasicMaterial({color: 0x0000ff}); // Dunkelblau für das Material

// Erstellen der Knoten A
    var nodeA = new THREE.Mesh(geometry, material);
    this.scene.add(nodeA);
    nodeA.position.set(-1, 0, 0);

    this.nodeA = nodeA;

// Erstellen der Knoten B
    var nodeB = new THREE.Mesh(geometry, material);
    this.scene.add(nodeB);
    nodeB.position.set(0, 1, 0); // Knoten B nach unten verschieben

    this.nodeB = nodeB;

// Erstellen der Knoten C
    var nodeC = new THREE.Mesh(geometry, material);
    this.scene.add(nodeC);
    nodeC.position.set(1, 0, 0);

    this.nodeC= nodeC;
  }

  private addControls() {
    /**
     *     fov: Das Sichtfeld (Field of View) in Grad. Es definiert den vertikalen Erfassungswinkel der Kamera. Ein größerer Wert führt zu einem breiteren Sichtfeld und umgekehrt.
     *     aspect: Das Seitenverhältnis (Aspect Ratio) der Kamera. Es wird üblicherweise als Breite durch Höhe definiert. In diesem Fall wird this.width / this.height verwendet, wobei this.width und this.height die Breite und Höhe des Anzeigebereichs (Canvas oder Fenster) sind. Das Seitenverhältnis beeinflusst das Verhältnis der horizontalen zur vertikalen Sicht und wird verwendet, um die Szene korrekt zu skalieren.
     *     near: Der nahe Clip-Abstand. Objekte, die näher an der Kamera liegen als dieser Wert, werden abgeschnitten und nicht gerendert.
     *     far: Der ferne Clip-Abstand. Objekte, die weiter entfernt von der Kamera liegen als dieser Wert, werden ebenfalls abgeschnitten.
     */
    var camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);

    // Berechnen der Bounding Box der Knoten
    const boundingBox = new THREE.Box3().setFromObject(this.nodeA);
    boundingBox.expandByObject(this.nodeB);
    boundingBox.expandByObject(this.nodeC);
    const center = new THREE.Vector3();
    const size = new THREE.Vector3();
    boundingBox.getCenter(center);
    boundingBox.getSize(size);

// Berechnen des Kameraabstands basierend auf der Größe der Bounding Box
    const maxDimension = Math.max(size.x, size.y, size.z);
    const cameraDistance = maxDimension ; // Faktor 2 für etwas zusätzlichen Abstand
    camera.position.z = cameraDistance;

// Setzen der Kamera-Position auf den Schwerpunkt der Bounding Box
    camera.lookAt(center);

// Anpassen des Kamera-Zooms
    const cameraZoom = 1.5; // Passen Sie den Zoomwert an Ihre Anforderungen an
    camera.zoom = cameraZoom;
    camera.updateProjectionMatrix();

      // Maussteuerung für das Drehen der Szene hinzufügen
    var controls = new OrbitControls(camera, this.renderer.domElement);
    controls.target.set(0, 0, 0); // Drehachse in der Mitte des Bildes

    // Animations-Schleife
    const animate = () => {
      requestAnimationFrame(animate);

      // Animationen oder Interaktionen hier einfügen

      this.renderer.render(this.scene, camera);
    }
    animate();
  }

  private createText() {
    var textMaterial = new THREE.MeshBasicMaterial({color: 0x000000}); // Schriftfarbe auf Schwarz setzen

    var textGeometryA = new TextGeometry("A", {
      font: this.font,
      size: 0.05, // Größe der Schrift auf 5% reduzieren
      height: 0.005, // Höhe der Schrift auf 0.5% reduzieren
    });
    var textA = new THREE.Mesh(textGeometryA, textMaterial);
    textA.position.copy(this.nodeA.position);
    textA.position.y -= 0.2; // Knoten A TextNode nach unten verschieben
    this.scene.add(textA);

    var textGeometryB = new TextGeometry("B", {
      font: this.font,
      size: 0.05,
      height: 0.005,
    });
    var textB = new THREE.Mesh(textGeometryB, textMaterial);
    textB.position.copy(this.nodeB.position);
    textB.position.y -= 0.2; // Knoten B TextNode nach unten verschieben
    this.scene.add(textB);

    var textGeometryC = new TextGeometry("C", {
      font: this.font,
      size: 0.05,
      height: 0.005,
    });
    var textC = new THREE.Mesh(textGeometryC, textMaterial);
    textC.position.copy(this.nodeC.position);
    textC.position.y -= 0.2; // Knoten C TextNode nach unten verschieben
    this.scene.add(textC);
  }

  private createConnections() {
    // Erstellen der Beziehungslinien
    var lineMaterial = new THREE.LineBasicMaterial({color: 0x000000, linewidth: 4}); // Linienfarbe auf Schwarz und Linienbreite auf 4 setzen

    var lineABGeometry = new THREE.BufferGeometry().setFromPoints([this.nodeA.position, this.nodeB.position]);
    var lineAB = new THREE.Line(lineABGeometry, lineMaterial);
    this.scene.add(lineAB);

    var lineBCGeometry = new THREE.BufferGeometry().setFromPoints([this.nodeB.position, this.nodeC.position]);
    var lineBC = new THREE.Line(lineBCGeometry, lineMaterial);
    this.scene.add(lineBC);

    var lineCAGeometry = new THREE.BufferGeometry().setFromPoints([this.nodeC.position, this.nodeA.position]);
    var lineCA = new THREE.Line(lineCAGeometry, lineMaterial);
    this.scene.add(lineCA);
  }
}

Ergebnis:

Kategorien
Angular JavaScript Security

JSONP und Sicherheit von Web Anwendungen

JavaScript Object Notation with Padding (JSONP) ist eine Methode, die in der Webentwicklung verwendet wird, um das Same-Origin-Policy-Problem zu umgehen. Es ermöglicht den Abruf von Daten aus einer anderen Domain, umgeht dabei aber die Cross-Origin-Restriktionen, die in Web-Browsern eingebaut sind. JSONP arbeitet durch das Einbetten einer Remote-Anfrage in einen <script>-Tag anstelle eines XMLHttpRequest.

Ein ausführliches JavaScript / PHP Beispiel findet man hier.

JSONP hat mehrere Nachteile und aus Sicherheitstechnischen Gründen wird empfohlen, JSONP nicht mehr zu verwenden, sofern es nicht unbedingt erforderlich ist. Hier sind einige der Hauptnachteile:

  1. Sicherheitsrisiken: JSONP öffnet potenziell Sicherheitslücken, insbesondere im Zusammenhang mit Cross-Site Scripting (XSS) und Cross-Site Request Forgery (CSRF). JSONP ermöglicht das Ausführen von beliebigem JavaScript-Code auf der Seite, was zu potenziellen Angriffen und Datenlecks führen kann.
  2. Unsicherer Datentransfer: JSONP überträgt Daten im Klartext, da es keine standardmäßige Verschlüsselung oder Sicherheitsmaßnahmen bietet. Dies kann zu Datenschutzproblemen führen, insbesondere bei der Übertragung sensibler Daten.

Aufgrund dieser Nachteile wird empfohlen, moderne Alternativen wie CORS (Cross-Origin Resource Sharing) zu verwenden, die bessere Kontrolle, Flexibilität und Sicherheit bieten. CORS ermöglicht eine feinere Kontrolle über den Zugriff auf Ressourcen, unterstützt verschiedene HTTP-Methoden und ermöglicht den sicheren Austausch von Daten zwischen verschiedenen Domains.

Kategorien
Angular JavaScript Security

Frontent Sicherheit mit Sandboxing

Sandbox-Iframes bieten eine wichtige Sicherheitsschicht, wenn Sie Drittanbieterinhalte auf Ihrer Website einbetten möchten. Ohne die Sandbox können Iframes potenziell schädlichen Code enthalten und ausführen. Sie könnten bösartige Skripte ausführen, die Benutzerdaten stehlen, unerwünschte Werbung anzeigen oder andere schädliche Aktionen ausführen. Mit der Sandbox können Sie genau kontrollieren, was im Iframe erlaubt ist und was nicht.

Das sandbox Attribut für Iframes kann mit den folgenden Direktiven oder Werten gefüllt werden, um verschiedene Einschränkungen für den Inhalt des Iframes zu setzen:

Sandbox-AttributBeschreibungBeispiel
allow-formsErlaubt dem eingebetteten Dokument, Formulareinreichungen zu tätigen.document.forms[0].submit();
allow-modalsErlaubt dem eingebetteten Dokument, Modal-Dialoge zu öffnen (z. B. mit alert, confirm, prompt oder print).alert(„Hallo, Welt!“);
allow-orientation-lockErlaubt dem eingebetteten Dokument, den Bildschirm zu sperren mit der screen.orientation.lock(‚landscape‘);
allow-pointer-lockErlaubt dem eingebetteten Dokument, den Mauszeiger zu sperren und die Pointer Lock API zu verwenden.canvas.addEventListener("click", async () => {
await canvas.requestPointerLock();
});
allow-popupsErlaubt dem eingebetteten Dokument, Pop-up-Fenster oder -Tabs zu öffnen.window.open(„https://example.com“);
allow-popups-to-escape-sandboxErlaubt Pop-up-Fenstern, die vom eingebetteten Dokument geöffnet wurden, den Sandbox-Modus zu verlassen.Angenommen, Sie haben ein iFrame mit sandbox="allow-popups", aber ohne das allow-popups-to-escape-sandbox Attribut. Wenn dann das iFrame ein Popup mit window.open() öffnet, gelten dieselben Sandbox-Einschränkungen auch für dieses Popup-Fenster. Mit dem allow-popups-to-escape-sandbox Attribut wird das Popup-Fenster dagegen nicht von den Sandbox-Einschränkungen des iFrames beeinflusst.
allow-presentationErlaubt eingebetteten Dokumenten, die Presentation API zu verwenden.var request = new PresentationRequest([„https://example.com/presentation.html“]);
allow-same-originErlaubt dem eingebetteten Dokument, die gleiche Herkunft wie das einbettende Dokument zu behandeln. Ohne dieses Schlüsselwort sind sie von fremden Ursprungs und werden nicht erlaubt.var xhr = new XMLHttpRequest();
xhr.open(„GET“, „/api/data“, true);
xhr.send();
allow-scriptsErlaubt dem eingebetteten Dokument, Skripte auszuführen (aber nicht automatische Ausführungen von Pop-ups).document.getElementById(„foo“).innerHTML = „bar“;
allow-storage-access-by-user-activationErlaubt auf den lokalen Speicher zuzugreifen, wenn es durch Benutzeraktivierung gestartet wird.localStorage.setItem(„key“, „value“);
allow-top-navigationErlaubt dem eingebetteten Dokument, das einbettende Dokument zu navigieren.top.location.href = „https://example.com“;
allow-top-navigation-by-user-activationErlaubt dem eingebetteten Dokument, das einbettende Dokument zu navigieren, aber nur wenn dies durch Benutzeraktivierung geschieht.
<a href=“https://example.com“ target=“_top“>Besuchen Sie example.com</a>
Das Iframe sandbox Attribut

Ohne spezifische Direktiven blockiert ein gesandboxter Iframe alle diese Aktionen.

Beispiel für die Verwendung des sandbox Attributs mit mehreren Direktiven:

<iframe sandbox="allow-scripts allow-forms" src="https://example.com"></iframe>

In diesem Beispiel können innerhalb des Iframes Skripte ausgeführt und Formulare übermittelt werden. Alle anderen Aktionen, die durch die obigen Direktiven gesteuert werden, sind jedoch blockiert.

Sandboxing und Einbinden von Dirttanbieter JavaScript

Um Drittanbieter-JavaScript in einem Sandbox-Iframe zu nutzen, können Sie einen Ansatz wie den folgenden verwenden:

<iframe sandbox="allow-scripts" src="https://your-website.com/iframe-content.html"></iframe>

In diesem Beispiel wird ein Iframe erstellt, der das Ausführen von Skripten erlaubt (allow-scripts). Der Inhalt des Iframes wird von iframe-content.html geladen, das auf Ihrer eigenen Website gehostet ist.

Die iframe-content.html Datei könnte so aussehen:

<!DOCTYPE html>
<html>
<body>
    <script src="https://third-party.com/some-script.js"></script>
</body>
</html>

In diesem Fall wird das Drittanbieter-Skript innerhalb des Iframes geladen und ausgeführt. Es ist jedoch auf das Iframe beschränkt und kann nicht auf Elemente oder Daten außerhalb des Iframes zugreifen, es sei denn, Sie erweitern die Sandbox-Erlaubnisse mit zusätzlichen Direktiven.

Kategorien
Angular Security

Subresource Integrity (SRI) mit Angular

Subresource Integrity (SRI) ist ein Sicherheitsmechanismus, der es Webbrowsern ermöglicht, zu überprüfen, ob Inhalte, die sie von einem Server herunterladen (z.B. Skripte oder Stylesheets), unverändert bleiben. Der Mechanismus wurde entwickelt, um das Risiko zu verringern, dass ein Angreifer diese Inhalte ändern kann, entweder durch die Kompromittierung des Servers selbst oder durch Manipulation der Daten während der Übertragung.

SRI funktioniert, indem es einen Hash-Wert für den erwarteten Inhalt bereitstellt. Der Hash-Wert wird in einem integrity Attribut bereitgestellt, das einem <script> oder <link> Tag hinzugefügt wird. Hier ist ein Beispiel:

<script 
  src="https://example.com/script.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous">
</script>

In diesem Beispiel ist der Hash-Wert (beginnend mit sha384-) der Base64-kodierte SHA-384-Hash des erwarteten Inhalts der Datei script.js.

Es ist wichtig zu beachten, dass das crossorigin Attribut in Bezug auf Subresource Integrity (SRI) benötigt wird. Bei Verwendung von SRI in einem <script> oder <link> Tag muss das crossorigin Attribut ebenfalls angegeben werden, um die Überprüfung der Ressourcenintegrität zu ermöglichen.

Wenn der Browser die Datei von example.com lädt, berechnet er seinen eigenen Hash der heruntergeladenen Daten und vergleicht ihn mit dem im integrity Attribut bereitgestellten Hash. Wenn die beiden übereinstimmen, wird die Ressource geladen. Wenn sie nicht übereinstimmen (was darauf hinweisen könnte, dass die Daten manipuliert wurden), blockiert der Browser die Ressource und verhindert, dass sie geladen wird.

Es ist wichtig zu beachten, dass SRI nur einen Schutz bietet, wenn Sie sicher sind, dass die ursprünglichen Inhalte, die Sie hashen, sicher sind. Es schützt Sie nicht vor unsicheren Inhalten, die Sie versehentlich von einer unzuverlässigen Quelle geladen haben.

SRI in Angular

Subresource Integrity (SRI) ist in Angular verfügbar beim Erstellen des produktiven Builds und kann folgender Maßen aktiviert werden:

ng build --subresource-integrity

Das Ergebnis sieht man in der index.html, die mit den passenden integrity Hash-Werten versehen ist.

<!DOCTYPE html>
<html lang="en">
  <head>
      <link rel="stylesheet" href="styles.b59ebdef18b35fdd.css" crossorigin="anonymous"
        integrity="sha384-oErGOTPxF7SP2WL0NQvx3yH3qKf2nU+GaPRoQGwLC86FXbXhZT4NTyvkJk1YhsWG" media="print"
        onload="this.media='all'">
  </head>
  <body>
    <app-root></app-root>
    <script src="runtime.cd88caa9a90985c6.js" type="module" crossorigin="anonymous" integrity="sha384-pa1ldTIy99cxQ4eBdVToPe5QX72nwdMwc1iUQdrfHG12kAQDqWnQr4ht5En4U7vh"></script>
    <script src="polyfills.20b808ea4252e216.js" type="module" crossorigin="anonymous" integrity="sha384-ntg7GMhEvdM6nANo67bhe9ywlmHlclTX9WtzZypoZ5l88rNtopxFbU8KECtXeCgy"></script>
    <script src="scripts.22e9f2ff069003a2.js" defer crossorigin="anonymous" integrity="sha384-D0q55GWgRcYpsttubbKAA87RnYZm6YovXWtOdbHklbKFZi+t0aFHRI88ps3ega/j"></script>
    <script src="main.f007b24de697ee5f.js" type="module" crossorigin="anonymous" integrity="sha384-Iu/ByjgLYT6Ngup3UKnXSUZgDlxc9d+S6vH/O9o4NetAuxd7wCf1+pMLtZ8iersD"></script>
  </body>
</html>
Kategorien
Angular Security

Code Analyse mit SonarQube und ESLint

SonarQube als auch ESLint sind Tools für die statische Code Analyse.

Code Analyse mit Sonar Cube

SonarQube bietet eine Vielzahl von Regeln zur statischen Code-Analyse, die dabei helfen können, Sicherheitslücken in deiner Anwendung zu erkennen.

  • Injection-Related Vulnerabilities (z. B. SQL-Injection, LDAP-Injection)
  • Cross-Site Scripting (XSS)
  • Nicht validierte Weiterleitungen und Umleitungen
  • Unverschlüsselte Kommunikation
  • Schwache kryptografische Algorithmen und unsicherer kryptografischer Speicher
  • Zugriffskontrolllücken
  • Unsichere Zufallszahlen
  • Hartcodierte Geheimnisse und Anmeldeinformationen

ESLint

Obwohl ESLint primär für die statische Analyse und Code-Stilüberprüfung verwendet wird, gibt es spezielle ESLint-Plugins, die Sicherheitsregeln enthalten, um potenzielle Sicherheitslücken im Code zu identifizieren.

Hier sind einige ESLint-Plugins, die man in deinem Angular-Projekt verwenden kann, um Sicherheitsregeln zu überprüfen:

  1. eslint-plugin-security: Dieses Plugin bietet eine Vielzahl von Sicherheitsregeln, um Schwachstellen wie Cross-Site Scripting (XSS), Injection-Angriffe, unsichere Verwendung von eval() und vieles mehr zu erkennen.
  2. eslint-plugin-no-unsanitized: Dieses Plugin erkennt unsichere Verwendung von ungesäuberten Daten in deiner Anwendung, die zu potenziellen Sicherheitslücken führen können.

Diese Plugins können in deinem ESLint-Konfigurationsfile (.eslintrc) hinzugefügt und entsprechend konfiguriert werden, um die gewünschten Sicherheitsregeln zu aktivieren.

SonarCube oder ESLint?

Es ist wichtig zu beachten, dass ESLint-Plugins nicht alle Sicherheitslücken abdecken können, die SonarQube spezifische Regeln erkennen kann. SonarQube bietet eine umfassendere und spezifischere Abdeckung von Sicherheitslücken. Dennoch können ESLint und seine Plugins eine wertvolle Ergänzung sein, um die Sicherheit einer Angular-Anwendung zu verbessern.

Kategorien
Angular Security

Sicheitslücken in Anwendungen ermitteln mit OWASP ZAP

OWASP ZAP (Zed Attack Proxy) ist ein beliebtes Open-Source-Tool für die Sicherheitstests von Webanwendungen. Es wurde von der Open Web Application Security Project (OWASP) Community entwickelt und ist ein integraler Bestandteil vieler Sicherheitstests und Penetrationstests.

OWASP ZAP kann für verschiedene Zwecke eingesetzt werden:

  1. Automatisierte Scans: Sie können ZAP verwenden, um automatisierte Sicherheitsscans Ihrer Webanwendungen durchzuführen. ZAP kann viele gängige Sicherheitsprobleme identifizieren, wie z.B. Cross-Site Scripting (XSS), SQL-Injection, und viele andere OWASP Top 10 Sicherheitsrisiken.
  2. Manuelles Testing: Neben automatisierten Scans können Sie ZAP auch für manuelle Sicherheitstests verwenden. Es bietet eine Vielzahl von Funktionen, die das manuelle Testing unterstützen, wie z.B. einen Intercepting Proxy, um den Datenverkehr zwischen Ihrem Browser und der Webanwendung zu untersuchen und zu manipulieren.
  3. Spidering und Crawling: ZAP kann Ihre Webanwendung durchsuchen, um Inhalte und Funktionalitäten zu entdecken. Dies ist besonders nützlich, um sicherzustellen, dass alle Teile Ihrer Anwendung in den Sicherheitstests berücksichtigt werden.
  4. Fuzzer: ZAP enthält einen Fuzzer, der es ermöglicht, eine Vielzahl von Eingaben an Ihre Webanwendung zu senden, um unerwartetes oder unsicheres Verhalten zu identifizieren.
  5. API Testing: ZAP kann auch zum Testen von APIs verwendet werden, einschließlich REST und SOAP APIs.
  6. Erstellung von Berichten: ZAP kann detaillierte Berichte über die Ergebnisse seiner Scans erstellen, einschließlich der identifizierten Sicherheitsprobleme und der empfohlenen Lösungen.

Insgesamt ist ZAP ein vielseitiges Werkzeug, um die Sicherheit einer Webanwendungen zu beurteilen und zu verbessern. Es kann sowohl für gelegentliche Sicherheitsüberprüfungen als auch für kontinuierliche Sicherheitstests im Rahmen einer DevSecOps-Pipeline verwendet werden.

Beispiel Bericht

Ein Beispiel Report einer Angular Anwendung, die im Development Modus unter Port 4200 verfügbar war findet man hier:

ZAP-Report Download im html FormatHerunterladen
Übersicht der gefundnen Warnungen in der Desktop Anwendung ZAP
Aufbau eines ZAP Scanning Reports
Schwachstellen Übersicht

Die erstellten Reports sind ein wesentliches Werkzeug, um die Sicherheit von Webanwendungen zu bewerten und zu verbessern.

  1. Analyse der Warnungen: Zunächst analysieren wir die Warnungen im Detail, um das zugrunde liegende Problem zu verstehen. Das umfasst das Risiko, die Vertrauensstufe, die Beschreibung des Problems und die vorgeschlagene Lösung.
  2. Priorisierung der Warnungen: Basierend auf dem Risikocode und der Vertrauensstufe priorisieren wir die Warnungen. Hochrisiko-Warnungen sollten zuerst behandelt werden.
  3. Programmierung: Basierend auf den im Report vorgeschlagenen Lösungen können Fixes erstellt werden.
  4. Testing: Nachdem die Lösungen implementiert wurden, führen wir erneute Sicherheits-Scans und manuelle Tests durch, um sicherzustellen, dass die Sicherheitsprobleme behoben wurden.

Kategorien
Angular Security

Dependency-Check-Tools für Angular

Dependency-Check-Tools sind Werkzeuge, die dabei helfen, die Abhängigkeiten eines Softwareprojekts zu analysieren und zu verwalten. Sie sind besonders nützlich in modernen Softwareprojekten, die oft Dutzende, wenn nicht Hunderte von Abhängigkeiten haben können.

Die Hauptfunktionen von Dependency-Check-Tools umfassen:

  1. Erkennung von veralteten Abhängigkeiten: Tools können Benutzer darauf hinweisen, wenn eine Abhängigkeit aktualisiert werden muss, oft mit Informationen darüber, welche neuen Funktionen oder Sicherheitsupdates die neue Version beinhaltet.
  2. Sicherheitsanalyse: Einige Tools können über bekannte Sicherheitslücken in den verwendeten Bibliotheken informieren. Dies ist besonders wichtig, da die Verwendung von Bibliotheken mit Sicherheitslücken ein erhebliches Risiko darstellen kann.

Zu den Dependency-Check-Tools, die mit Angular-Projekten verwendet werden können, gehören:

  • npm audit: Diese Funktion ist in npm (Node Package Manager) eingebaut, dem Standardpaketmanager für Node.js, der häufig in Angular-Projekten verwendet wird. npm audit kann über bekannte Sicherheitslücken in den Projektabhängigkeiten informieren.
  • Dependabot: Ein von GitHub bereitgestelltes Tool, das Sicherheitslücken und veraltete Abhängigkeiten in einem Projekt erkennen kann. Es kann auch automatisch Pull-Anfragen erstellen, um Abhängigkeiten auf die neuesten Versionen zu aktualisieren. Achtung: nur auf GitHub verfügbar
  • Snyk: Ein weiteres Tool, das Sicherheitslücken in Abhängigkeiten erkennt und auch Patches für diese Lücken anbieten kann. Snyk kann in den CI/CD-Prozess integriert werden und unterstützt auch eine breite Palette von Sprachen und Paketmanagern.
  • OWASP Dependency-Check: Dies ist ein spezialisierteres Tool, das insbesondere auf das Auffinden bekannter Sicherheitslücken in den Abhängigkeiten eines Projekts abzielt. Es ist Teil des OWASP (Open Web Application Security Project) und kann eine Vielzahl von Sprachen und Paketmanagern unterstützen.

npm audit

npm audit erkennt und updatet npm Packete um Sicherheitslücken zu entfernen und ist Teil von npm und kann auch verwendet werden, wenn yarn als Packetmanager verwendet wird.

npm audit
# ng audit report

quill  <=1.3.7
Severity: moderate
Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
No fix available
node_modules/quill
  ngx-quill  *
  Depends on vulnerable versions of quill
  node_modules/ngx-quill

semver  <=5.7.1 || 6.0.0 - 6.3.0 || 7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via `npm audit fix --force`
node_modules/less/node_modules/semver
node_modules/make-dir/node_modules/semver
  @angular/cli  9.1.0-next.0 - 14.2.11 || 15.0.0-next.0 - 15.2.8 || 16.0.0-next.0 - 16.1.1
  Depends on vulnerable versions of semver
  node_modules/@angular/cli

4 moderate severity vulnerabilities

To address all issues possible, run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Der Output von npm audit liefert Informationen über Sicherheitsprobleme in den abhängigen Paketen eines Node.js-Projekts. Hier ist eine Erklärung des gegebenen Outputs:

  1. quill <=1.3.7:
  • Schweregrad: moderat
  • Beschreibung: Es wurde eine Cross-Site-Scripting-Schwachstelle in der Version 1.3.7 und älter von „quill“ festgestellt. Der Link führt zu weiteren Informationen über diese Schwachstelle.
  • Keine verfügbare Lösung.
  • Abhängigkeit in node_modules/ngx-quill, die von ngx-quill genutzt wird.
  1. semver <=5.7.1 || 6.0.0 - 6.3.0 || 7.0.0 - 7.5.1:
  • Schweregrad: moderat
  • Beschreibung: Die Versionen von „semver“ zwischen 5.7.1 und 6.3.0 sowie zwischen 7.0.0 und 7.5.1 sind anfällig für sogenannte „Regular Expression Denial of Service“-Angriffe (ReDoS). Der Link führt zu weiteren Informationen über diese Schwachstelle.
  • Eine Lösung ist verfügbar, die mit dem Befehl npm audit fix --force angewendet werden kann.
  • Abhängigkeiten in node_modules/less/node_modules/semver und node_modules/make-dir/node_modules/semver, die von @angular/cli genutzt werden.

Am Ende der Ausgabe werden insgesamt 4 Schwachstellen mit moderatem Schweregrad angegeben. Um alle möglichen Probleme zu beheben, wird empfohlen, den Befehl npm audit fix --force auszuführen. Es wird auch darauf hingewiesen, dass einige Probleme eine manuelle Überprüfung erfordern können und eine alternative Abhängigkeit ausgewählt werden muss.

snyk

Snyk liefert eine umfangreiche Schwachstellenanalyse von Open Source npm Packeten.

Testing project dependencies...
⚠ Found 3 vulnerabilities in 'lodash' package:
  - Severity: High, CVE-2021-23337, Prototype Pollution
  - Severity: Medium, CVE-2022-12345, Cross-Site Scripting (XSS)
  - Severity: Low, CVE-2023-9876, Denial of Service (DoS)

⚠ Found 1 vulnerability in 'express' package:
  - Severity: Medium, CVE-2023-4567, Cross-Site Request Forgery (CSRF)

Testing project files...
✓ Tested 243 files for known vulnerabilities, no vulnerabilities found.

Overall test results:
⚠ Tested 395 dependencies and files, found 4 vulnerabilities.

In diesem Beispiel wurden einige Sicherheitslücken in den Abhängigkeiten ‚lodash‘ und ‚express‘ gefunden. Es gibt drei Schwachstellen in der ‚lodash‘-Version, die als hoch, mittel und niedrig eingestuft sind und verschiedene Arten von Angriffen ermöglichen können, wie z.B. die Beeinflussung von Prototypen (Prototype Pollution) oder Denial-of-Service-Angriffe (DoS). Zusätzlich wurde eine mittlere Schwachstelle in der ‚express‘-Version gefunden, die Cross-Site Request Forgery (CSRF) ermöglichen könnte.

Snyk bietet einige Funktionen, die über die Standardfunktionen von „npm audit“ hinausgehen. Hier sind einige Bereiche, in denen Snyk als Sicherheitstool Vorteile gegenüber „npm audit“ bieten kann:

  1. Erweiterte Schwachstellenanalyse: Snyk verwendet umfangreiche Sicherheitsdatenbanken und -quellen, um Sicherheitslücken in Abhängigkeiten zu identifizieren. Es kann potenzielle Schwachstellen entdecken, die von „npm audit“ möglicherweise nicht erkannt werden.
  2. Zusätzliche Sicherheitsinformationen: Snyk liefert detailliertere Informationen zu Schwachstellen, einschließlich Schweregrad, Auswirkungen und Lösungsvorschlägen. Dadurch erhalten Sie einen besseren Einblick in die Sicherheitsprobleme und können gezieltere Maßnahmen ergreifen.
  3. Integration in den Entwicklungsprozess: Snyk kann nahtlos in Ihren Entwicklungsprozess integriert werden, einschließlich CI/CD-Pipelines. Es ermöglicht Ihnen, automatisierte Sicherheitsscans durchzuführen und Schwachstellen frühzeitig zu erkennen.
  4. Kontinuierliche Überwachung: Snyk bietet die Möglichkeit, Ihre Abhängigkeiten kontinuierlich auf neue Schwachstellen zu überwachen. Sie erhalten Benachrichtigungen über neu entdeckte Schwachstellen und empfohlene Maßnahmen zur Behebung.
  5. Multi-Language-Unterstützung: Snyk unterstützt nicht nur JavaScript und Node.js, sondern auch eine Vielzahl anderer Programmiersprachen und Plattformen. Das bedeutet, dass Sie eine einheitliche Sicherheitslösung für verschiedene Teile Ihres Projekts verwenden können, wenn Sie neben Angular auch andere Technologien einsetzen.

Es ist wichtig zu beachten, dass „npm audit“ weiterhin eine nützliche Funktion ist, um bekannte Schwachstellen zu erkennen. Snyk bietet jedoch zusätzliche Funktionen, die eine umfassendere Schwachstellenanalyse, Integration in den Entwicklungsprozess und kontinuierliche Überwachung ermöglichen. Es ist empfehlenswert, beide Tools in Kombination zu verwenden, um das Sicherheitsniveau Ihrer Anwendung zu maximieren.

OWASP dependency-check-cli

Der OWASP Dependency-Check CLI ist ein Werkzeug zur Überprüfung von Abhängigkeiten auf Sicherheitslücken. Hier ist ein Beispiel für einen möglichen Output mit gefundenen Problemen:

[INFO] --------------------------------------------------
[INFO] OWASP Dependency-Check CLI (version 6.2.2)
[INFO] --------------------------------------------------

[INFO] Initializing... (this may take a moment)
[INFO] Loading NVD data...
[INFO] NVD data loaded successfully.

[INFO] Scanning project dependencies...
[INFO] Found 253 dependencies to analyze.

[INFO] Analyzing dependencies...
[INFO] Found 5 vulnerabilities:

- CVE-2021-1234 (Medium Severity)
    Description: Cross-Site Scripting (XSS) vulnerability in library A version 1.2.3
    Recommendation: Upgrade to library A version 1.2.4

- CVE-2022-5678 (High Severity)
    Description: Remote Code Execution (RCE) vulnerability in library B version 2.0.1
    Recommendation: Upgrade to library B version 2.0.2

- CVE-2023-9876 (Critical Severity)
    Description: SQL Injection vulnerability in library C version 3.4.5
    Recommendation: Upgrade to library C version 3.4.6 or apply the provided patch

[INFO] Analysis completed.

[INFO] Summary:
- Total Dependencies: 253
- Vulnerable Dependencies: 5
- Highest CVSS Score: 9.8 (Critical)

[INFO] Build finished.

In diesem Beispiel wurde ein Projekt mit 253 Abhängigkeiten gescannt. Es wurden 5 Sicherheitslücken gefunden, darunter Cross-Site Scripting (XSS), Remote Code Execution (RCE) und SQL Injection. Jede Schwachstelle enthält Informationen wie die CVE-Nummer, die Schwere der Schwachstelle, eine Beschreibung und Empfehlungen zur Behebung.

Der CVSS-Score (Common Vulnerability Scoring System) von 9.8 weist auf eine sehr hohe Schwere einer Sicherheitslücke hin. CVSS-Scores werden verwendet, um die Schwere von Sicherheitslücken zu bewerten und reichen von 0 bis 10.

Ein CVSS-Score von 9.8 zeigt an, dass die Sicherheitslücke als kritisch eingestuft wird und ein erhebliches Risiko darstellt. Es bedeutet, dass die Schwachstelle potenziell ausgenutzt werden kann, um erheblichen Schaden anzurichten, Daten zu stehlen, unautorisierten Zugriff zu ermöglichen oder Systeme komplett zu kompromittieren.

Kategorien
Angular Security

Angular Security Best Practises

Angular bietet einige eingebaute Sicherheitsmaßnahmen, aber es gibt auch mehrere Tools und Praktiken, die helfen können, die Sicherheit einer Angular-Anwendung zu erhöhen:

  1. Inhalts-Sicherheitsrichtlinie (Content Security Policy, CSP): Diese Richtlinie hilft, Cross-Site-Scripting (XSS)-Angriffe zu verhindern, indem sie regelt, welche Ressourcen in Ihrer Webanwendung geladen werden dürfen. Zum Artikel
  2. HTTP Strict Transport Security (HSTS): Dieser Mechanismus zwingt Webbrowser dazu, nur sichere HTTPS-Verbindungen zu verwenden, was Man-in-the-Middle-Angriffe erschwert. Zum Artikel
  3. HTTPOnly und Secure Cookies: Diese Einstellungen verhindern, dass Cookies von JavaScript (also durch Cross-Site-Scripting) ausgelesen werden und sicherstellen, dass Cookies nur über HTTPS versendet werden. Zum Artikel
  4. Angular’s Cross Site Request Forgery (XSRF) Schutz: Angular bietet einen eingebauten Schutz gegen XSRF- oder CSRF-Angriffe in der HttpClient-Bibliothek. Zum Artikel
  5. Tools für statische Code-Analyse wie SonarQube und ESLint: Diese Tools können dabei helfen, sicherheitsrelevante Programmierfehler aufzudecken. Zum Artikel
  6. Automatisierte Sicherheitsscanner wie OWASP ZAP: Dieses Tool kann Ihre Webanwendung auf bekannte Sicherheitsprobleme prüfen. Zum Artikel
  7. Dependency-Check-Tools wie Snyk, Dependabot oder OWASP Dependency-Check: Diese Tools können Ihre Projektabhängigkeiten überwachen und Sie auf Sicherheitsprobleme oder veraltete Pakete hinweisen. Zum Artikel
  8. Angular’s eingebaute DOM-Sanitization: Angular hat einen Mechanismus, um sicherzustellen, dass nur sicherer, „gesäuberter“ Code in den DOM eingefügt wird, um XSS-Angriffe zu verhindern.
  9. Subresource Integrity (SRI): Angular bietet einen Mechanismus an um die Integrität von der eigenen JavaScript und CSS Dateien zu gewährleisten. Zum Artikel

Außerdem gibt es Coding Best Practises für die sichere Programmierung von sicherheitsrelevanten Themen:

  1. Unsichere Verarbeitung von Benutzereingaben: Wenn Benutzereingaben nicht ordnungsgemäß validiert und verarbeitet werden, kann dies zu Sicherheitslücken führen, wie z.B. SQL-Injektionen oder Remote-Code-Ausführung.
  2. Unsichere Authentifizierung und Autorisierung: Unzureichende oder fehlerhafte Implementierung von Authentifizierungs- und Autorisierungsmechanismen kann zu unbefugtem Zugriff auf geschützte Bereiche der Anwendung führen.
  3. Unsichere Speicherung von Benutzerdaten: Wenn Benutzerdaten nicht sicher gespeichert werden, z. B. durch unsichere Verschlüsselung oder Speicherung in ungeschützten Bereichen, können sie gestohlen oder manipuliert werden.
  4. Unsichere Dateiuploads: Unsichere Verarbeitung von Dateiuploads kann dazu führen, dass Angreifer schädlichen Code hochladen und ausführen können.
  5. Unsichere Weiterleitungen und Umleitungen: Unsichere Weiterleitungen und Umleitungen können von Angreifern ausgenutzt werden, um Benutzer auf bösartige Websites umzuleiten oder Phishing-Angriffe durchzuführen.