So stellen Sie eine Vue.js-Jamstack-Anwendung mit automatischen Sicherheitsupdates von Snyk auf Netlify bereit

Möchten Sie mehr über Frontend-Sicherheitskonzepte erfahren und gleichzeitig lernen, wie Sie eine statische Website auf Netlify bereitstellen? Möchten Sie wissen, wie Sie anfällige JavaScript-Abhängigkeiten automatisch erkennen und beheben können?

Legen wir los.

In diesem Artikel verwenden wir Folgendes:

• Netlify – eine Plattform, mit der Sie Ihre Websites sofort erstellen und in einem globalen Netzwerk bereitstellen können.

• Snyk.io – eine Security-Plattform für Entwicklerteams für Open-Source-Bibliotheken, Container und Cloud-native Anwendungen.

• Vue.js – ein progressives JavaScript-Framework.

• Vuetify – ein UI-Komponenten-Framework im Material-Design für Vue.js-Apps.

Neue Konzepte lernt man am besten, indem man sie praktisch anwendet. Und was wäre besser geeignet, um ein paar neue Frontend-Sicherheitsthemen kennenzulernen, als eine Runde Bingo?

Und schon steht unser Vorhaben fest: Wir stellen ein Frontend-Security-Bingo bereit. Wie gewinnen Sie? Die Regeln sind einfach: Aktivieren Sie alle Kästchen für Praktiken, die Sie in Ihrem Team oder Ihren Open-Source-Projekten befolgen. Haben Sie alle aktiviert? Dann haben Sie gewonnen!

Hier sehen Sie einen Screenshot von Frontend Security Bingo in Aktion.

Bereitstellung auf Netlify

Um die statische Website bereitzustellen, deployen wir sie auf Netlify, einem der bevorzugten und optimierten Tools zum Hosten von Jamstack-Websites.

Mit Netlify können Sie eine Website auf zwei Arten bereitstellen:

1. Verbinden Sie das Repository eines Projekts über die Netlify-Benutzeroberfläche. Das ist nützlich, wenn Sie auf kontinuierliche Bereitstellung setzen möchten: Netlify bleibt mit den Änderungen in Ihrer Versionsverwaltung synchron und stellt die Website bei jeder Änderung automatisch bereit. In diesem Fall wird Netlify so konfiguriert, dass es das Build-Tool Ihrer Wahl ausführt, das die statische Website erstellt. Anschließend stellt Netlify diese bereit.

2. Verwenden Sie die Netlify-CLI, um die Website direkt über Ihre CLI bereitzustellen. So gelingt der Einstieg besonders einfach, denn Sie können die Bereitstellung schnell von einem Projektarbeitsbereich auf Ihrem Entwicklungsrechner aus starten.

Wir verwenden die erste Option und stellen das Spiel Frontend Security Bingo direkt aus einem Repository bereit.

Melden Sie sich zunächst bei Netlify an oder registrieren Sie sich:

Importieren Sie anschließend das Repository Ihres Website-Projekts von GitHub, GitLab oder Bitbucket.

In meinem Fall liegt es auf GitHub. So läuft der Vorgang ab:

1. Klicken Sie auf GitHub

2. Autorisieren Sie die Netlify-Anwendung, auf Ihr GitHub-Konto zuzugreifen.

3. Wählen Sie das Website-Repository aus der Liste aus.

Wenn die Meldung No repositories found angezeigt wird, klicken Sie auf Configure Netlify on GitHub und installieren Sie die Netlify-App für das entsprechende GitHub-Kontoprofil. Danach können Sie sie für alle Repositories installieren oder gezielt das Website-Repository auswählen.

Wenn Sie fertig sind, sollte es wie unten aussehen. Dann können wir mit der Bereitstellung beginnen und Build-Plugins verbinden:

Klicken Sie auf den Website-Eintrag frontend-security-bingo, um die Einrichtung abzuschließen, und klicken Sie dann auf die Schaltfläche Deploy:

Netlify klont nun das Repository, installiert die Abhängigkeiten und erstellt die Website. Anschließend erhalten Sie eine temporäre Website-URL, die Sie anpassen können.

Innerhalb weniger Sekunden ist unser Frontend-Security-Bingo-Spiel unter https://frontend-security-bingo.netlify.app verfügbar.

Damit wären wir fertig, oder?

Nicht ganz. Da kommt noch mehr.

Eine JavaScript-Sicherheitslücke in meiner Website

Es ist doch nur eine kleine, statische Website. Wie kann sie JavaScript-Sicherheitslücken enthalten?

Ich verwende nicht einmal besonders viele Abhängigkeiten. In meinem Projekt gibt es tatsächlich nur zwei Produktionsabhängigkeiten. Hier sehen Sie die package.json der Website mit einem sofort einsatzbereiten Gerüst, das ich beim Initialisieren des Projekts mit der Vue.js-CLI erstellt habe:

Wie es aussieht, weist mich Vuln Cost (eine von mir verwendete VS-Code-Erweiterung) darauf hin, dass mein Projekt in Zeile 12 eine Abhängigkeit mit einer Sicherheitslücke enthält.

Ignorieren Sie solche Warnungen manchmal? Mir ist klar, dass die Triage von Sicherheitslücken eine Herausforderung sein kann. Mit Tools und Workflows, die besser auf Ihre Entwicklung abgestimmt sind, wird es jedoch einfacher. Snyk bietet Ihnen folgende Vorteile:

• Datenbank für Sicherheitslücken – Alle Snyk-Nutzerinnen und -Nutzer, ob mit kostenlosem oder kostenpflichtigem Tarif, erhalten Zugriff auf Snyks Intel-Datenbank für Sicherheitslücken. Die Datenbank wird von einem erfahrenen Security-Research-Team bei Snyk gepflegt. Dabei gelten hohe Standards für die Erfassung von Sicherheitslücken und eine niedrige Zahl falsch positiver Ergebnisse. Sie enthält 370 % mehr Sicherheitslücken als die CVE-Datensätze.

• Kontinuierliche Überwachung – Einzelne Scans sind ein guter Einstieg in die Open-Source-Sicherheit. Bei realen Anwendungen müssen Sie Ihr Projekt jedoch kontinuierlich überwachen, damit Sie bei neuen Sicherheitslücken gewarnt werden. Noch besser: Lassen Sie Sicherheitskorrekturen automatisch als Pull Requests erstellen, damit Sie die Sicherheitslücken mit einem Merge beheben können.

Wenn wir den Inline-Linter-Fehler von Vuln Cost genauer ansehen, erkennen wir eine Sicherheitslücke mittleren Schweregrads, die das Vuetify-UI-Framework für Vue.js betrifft. Sie sollten sie nicht ignorieren.

Sind Sie bereit für eine kurze Herausforderung?

Die Live-Website unter https://frontend-security-bingo.netlify.app/ enthält diese noch nicht behobene JavaScript-Sicherheitslücke in Vuetify. Können Sie sie finden?

Tipp: Es handelt sich um eine JavaScript-Cross-Site-Scripting-Sicherheitslücke (XSS), die Vuetify-Versionen vor 2.1.9 betrifft. Weitere Informationen finden Sie in der öffentlichen Snyk Vulnerability Database. In den Sicherheitsressourcen von Snyk erfahren Sie mehr über Cross-Site-Scripting-Sicherheitslücken und darüber, wie häufig sie selbst in Webanwendungen aus dem Jahr 2020 vorkommen.

Ich führe Sie durch diese Sicherheitslücke.

Unten auf der Frontend-Security-Bingo-Website finden Sie ein Feld, über das Sie die Website via Twitter teilen können. In diesem Textfeld können Sie den Tweet vor dem Posten anpassen:

Dieses Textfeld verwendet Vuetifys Slot **error-messages**, um eine Fehlermeldung anzuzeigen.

<template>
 <div>
   <v-text-field
     :counter="true"
     v-model="shareTwitterText"
     label="tweet"
     required
     :error-messages="tweetErrors"
   ></v-text-field>
   <v-btn
     color="blue"
     outlined
     large
     @click="shareTwitter"
     class="blue--text text--darken-1 font-weight-bold"
     full-width
   >Share on Twitter</v-btn>
 </div>
</template>

Im Code der Komponente binden wir die Fehlerbehandlung über das Array **tweetErrors** und die Methode **shareTwitter()** ein.

<script>
export default {
 name: "SocialShare",
 data: () => {
   return {
     shareTwitterText:
       "Learn about Frontend Security Bingo: https://goo.gl #FrontendSecurity #WebDev",
     tweetErrors: []
   };
 },
 methods: {
   shareTwitter() {
     if (this.shareTwitterText.length > 280) {
       this.tweetErrors.push(
         `Your text is longer than 280 characters: ${this.shareTwitterText}`
       );
       return true;
     } else {
       this.tweetErrors = [];
       const tweetMsg = encodeURIComponent(this.shareTwitterText);
       const tweetUrl = `https://twitter.com/intent/tweet?text=${tweetMsg}&via=liran_tal`;
       window.open(tweetUrl, "_blank");
     }
   }
 }
};
</script>

Wenn der Text länger als 280 Zeichen ist, setzen wir den Fehler. Das sieht so aus:

Was wäre, wenn der Tweet HTML-Elemente mit JavaScript enthielte?

Fügen Sie den folgenden Text in den Tweet ein und klicken Sie anschließend auf die Schaltfläche zum Teilen:

<img src=x onError=”alert(1)” />

Wurde das Alert-Popup angezeigt?

Glückwunsch. Sie sind ein Hacker! :-)

Weniger gut ist es allerdings, wenn Sie nichts von dieser Sicherheitslücke wissen. Auf der Seite zur XSS-Sicherheitslücke in Vuetify heißt es:

Betroffene Versionen dieses Pakets sind über das Array error-messages anfällig für Cross-Site-Scripting (XSS). Hinweis: Wenn Sie für die Props rules, messages, hint, success-messages oder error-messages kein HTML verwenden, sind Sie von diesem Problem nicht betroffen.

Es handelt sich um eine öffentlich bekannte Sicherheitslücke. Angreifer können daher leicht auf dieses Wissen zugreifen und es gegen Sie einsetzen.

Wie stelle ich Websites bereit und sorge für deren Sicherheit?

Gut, dass Sie fragen!

Sie können – und sollten – Ihre Website vor der Bereitstellung mit Sicherheits-Scans von Drittanbietern prüfen. Was wäre einfacher, als dafür direkt beim Netlify-Build ein Snyk-Plugin zu verwenden?

Über das Plugin-Ökosystem von Netlify können Sie Plugins einbinden, die Ihren Build-Prozess um weitere Aktionen ergänzen.

Suchen wir das Snyk-Plugin und fügen es unserer Website hinzu:

Um die Sicherheitsergebnisse abzurufen, benötigen wir ein Entwickler-API-Token. Besuchen Sie dazu Snyk.io und erstellen Sie eines. Klicken Sie auf der Startseite oben rechts auf die Schaltfläche QUICK START und melden Sie sich mit dem gewünschten Identitätsprofil an. Ich empfehle GitHub ausdrücklich: So kann Snyk automatisch Pull Requests mit Sicherheitskorrekturen und Aktualisierungen für veraltete Abhängigkeiten erstellen.

Ihr API-Token finden Sie anschließend auf der allgemeinen Einstellungsseite Ihres Kontos:

Nachdem Sie das API-Token von Snyk erhalten haben, können wir es als Umgebungsvariable für den Netlify-Build-Prozess hinzufügen. Die Build-Einstellungen finden Sie auf Netlify auf der allgemeinen Einstellungsseite der Website, im Menü Build & deploy in der linken Seitenleiste:

Klicken Sie auf Edit variables und fügen Sie eine neue Variable mit dem Namen SNYK_TOKEN hinzu. Tragen Sie das API-Token als Wert ein.

Das war's!

Ab jetzt schlägt der Build fehl, wenn in Paketabhängigkeiten, die für die Erstellung Ihrer Website benötigt werden, Sicherheitslücken erkannt werden. So können Sie diese zuerst schnell beheben. Snyk zeigt Ihnen genau, wie Sie die Sicherheitslücken schließen und welche Pakete aktualisiert werden müssen.

Sehen wir uns an, wie ein fehlgeschlagener Build in meinem Projekt aussieht. Zunächst zeigt der allgemeine Bereitstellungsstatus an, dass der Build aufgrund des Plugins fehlgeschlagen ist, und gibt uns Hinweise zur Ursache:

Wenn wir auf der Seite zu den Logs scrollen, sehen wir deutlich die Fehlermeldung des Snyk-Plugins: Aufgrund einer Cross-Site-Scripting-Sicherheitslücke in Vuetify verhindert es die Bereitstellung dieses Website-Builds:

Dank des Snyk-Plugins wurde der Netlify-Build-Prozess angehalten. Es hat genau die Sicherheitslücke in Vuetify gefunden, die wir ausgenutzt haben, um über eine Cross-Site-Scripting-Sicherheitslücke schädlichen JavaScript-Code einzuschleusen. Ursache war die anfällige Vuetify-Version in unserem Abhängigkeitsbaum.

Was passiert, wenn eine neue Sicherheitslücke in einer von Ihnen verwendeten Abhängigkeit entdeckt wird, Sie aber schon lange keinen Website-Build mehr ausgeführt haben? Keine Sorge, Snyk ist für Sie da! Snyk prüft nicht nur bei jedem Build, sondern überwacht Ihr Projekt über die Snyk-Plattform auch mit täglichen Tests. Wird eine neue Sicherheitslücke in einer Ihrer Abhängigkeiten entdeckt, erhalten Sie eine Benachrichtigung.

Wie geht es weiter?

• Wenn Sie Vuetify verwenden, sollten Sie Ihre Abhängigkeiten auf Sicherheitslücken prüfen und diese beheben. Tipp: Wenn Sie Ihr Repository mit Snyk verbinden, erstellt Snyk automatisch Pull Requests zur Behebung und überwacht es auf künftige Sicherheitslücken – falls Sie nicht selbst regelmäßig Scans durchführen oder die Website bereitstellen.

• Starten Sie mit dem Netlify-Build-Plugin von Snyk.

• Erstellen Sie ein API-Token bei Snyk und fügen Sie Ihre Repositories hinzu, um sie überwachen und Sicherheitslücken beheben zu lassen.