It’s #FrontendFriday – Lizenzangaben im Webfrontend
Hallo #FrontendFriday-Leser/in,
in der heutigen digitalen Welt ist es besonders wichtig, Lizenzangaben im Webfrontend sorgfältig zu handhaben. Denn die Verwendung von 3rd-Party-Libs, Bildern, Icons und Schriftarten kann schnell zu rechtlichen Problemen führen, wenn die entsprechenden Lizenzen nicht angegeben werden. In diesem Blogpost möchte ich eine kurze Übersicht zu den einfachsten, technischen Lösungsmöglichkeiten für Angular, React und andere Webfrontendprojekte aufzeigen.
Angular
Angular, ein populäres JavaScript-Framework, bietet hierbei bereits eine nützliche Funktion. Bei einem Standard-Prod-Build wird automatisch eine Liste der verwendeten Lizenzen generiert und unter dem Pfad dist/3rdpartylicenses.txt abgelegt. So hat man jederzeit einen Überblick über die verwendeten Ressourcen und kann sicherstellen, dass alle Lizenzen korrekt angegeben sind.
React und andere Frameworks/Libs
Anders sieht es bei React aus. Das Framework bietet keine Möglichkeit, automatisch eine Liste der verwendeten 3rd-Party-Lizenzen zu generieren. Hier muss man auf ein separates NPM-Paket wie license-checker zurückgreifen, um die verwendeten Ressourcen und deren Lizenzen im Blick zu behalten. Dieses npm-Paket kann auch in allen anderen Webfrontendprojekten zum Einsatz kommen.
Generell kann folgende Checkliste hilfreich sein, wenn es um die ToDos beim Erstellen der Lizenzangaben geht:
| Lizenzarten | Angular | React und andere Frameworks/Libs |
|---|---|---|
| 3rd-Party-Libs (Code) | Bei Standard-Prod-Build bereits automatisch generiert (–extract-licenses default true): dist/3rdpartylicenses.txt |
|
| Bilder / Icons | ||
| Schriftarten (auch Icon-Fonts) |
Es ist also wichtig, bei der Entwicklung von Webfrontends darauf zu achten, dass alle verwendeten Ressourcen entsprechend lizenziert sind und diese Lizenzen auch korrekt angegeben werden. Mit den oben genannten Möglichkeiten kann man sicherstellen, dass man jederzeit über die verwendeten Ressourcen und deren Lizenzen im Bilde ist.
