Przejdź do głównej zawartości

Nowy sposób na dołączanie zasobów w ASP.NET CORE

Dzisiaj opowiem o problemie, z którym na pewno się spotkałeś jeśli stworzyłeś jakąś aplikację internetową.
Opowiem też jak można rozwiązać problem z użyciem ASP.NET Core i kiedy warto rozważyć użycie nowego sposobu.
Chodzi o dołączanie bibliotek javascript, które w tradycyjnej formie wygląda w ten sposób:

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js">  


W pokazanym kodzie tworzymy element języka HTML o nazwie script z atrybutem src, który definiuje lokalizację pliku z kodem JavaScript.
W naszym przypadku dołączamy do strony bibliotekę jquery stworzoną przez Johna Resiga. Przy okazji polecam świetną książkę o języku JavaScript: Tajemnice JavaScriptu. Podręcznik Ninja
Dodatkowo jak widać, skorzystaliśmy z biblioteki umieszczonej na serwerze CDN Zamiast pobierać bibliotekę jQuery z internetu i dołączać do naszego projektu. W tym drugim przypadku nasz kod mógłby wyglądać następująco:

<script src="~/lib/jquery/dist/jquery-2.2.0.min.js">  

A więc mamy dwie opcje a oba podejścia mają swoje zalety.
1) pobrać skrypt i dołączyć do projektu
- bezpieczeństwo - posiadamy kontrolę nad zawartością pliku - nikt jej nie podmieni bez naszej wiedzy (atak typu man in the middle)
- niezawodność - CDN może być w danym momencie niedostępny. Wówczas przy założeniu, że korzystamy w projekcie z biblioteki jQuery to w efekcie cała nasza strona może przestać działać.
2) skorzystać ze zdalnej lokalizacji
- nie musimy pobierać pliku z internetu
- mniejsze obciążenie naszego serwera, ponieważ plik jest serwowany z zewnętrznej lokalizacji
- Szybkość - istnieje szansa, że przeglądarka użytkownika naszej aplikacji posiada już w swojej pamięci tak popularną bibliotekę jaką jest jQuery. Taki scenariusz zakłada, że użytkownik wcześniej korzystał ze strony, która posiadała odwołanie do tej samej lokalizacji na CDN.


Dotychczas trzeba było wybierać: albo opcja 1 albo opcja 2. Okazuje się, że możemy skorzystać ze wszystkich wymienionych wyżej zalet obu podejść(no może poza zabezpieczeniem się przed atakiem man-in-the-middle). Otóż z pomocą przychodzi język ASP.NET Core i jego klasa
ScriptTagHelper
zdefiniowana w przestrzeni nazw
Microsoft.AspNetCore.Mvc.TagHelpers
.

Nowa, przełomowa konstrukcja wygląda tak:

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
</script>  


Jak to działa?
Kiedy nie zadziała pobranie biblioteki ze lokalizacji: "https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js", to następuje załadowanie jej z alternatywnej lokalizacji, czyli "~/lib/jquery/dist/jquery.min.js". Atrybut asp-fallback-test pozwoli nam sprawdzić, czy biblioteka załadowała się z lokalizacji "https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js". Wiadomo, że window.jQuery przyjmie wartość undefined kiedy biblioteka nie załaduje się prawidłowo. Wówczas załadowany zostanie skrypt z alternatywnego źródła oznaczonego atrybutem asp-fallback-src.

Myślę, że warto korzystać z tej konstrukcji w projektach ASP.NET Core.
Jednak odradzałbym to w przypadkach kiedy kluczowe są względy bezpieczeństwa, kiedy powinniśmy całkowicie zrezygnować z CDN na rzecz lokalnych plików.



Komentarze

  1. Bardzo ciekawy wpis Darek (jak i cały blog), liczę na więcej tematów związanych z .NET Core.
    Pozdrawiam, Adam Dratwa

    OdpowiedzUsuń

Prześlij komentarz

Popularne posty z tego bloga

Unleash the power of ChatGPT in your C# applications with NGpt - C# OpenAI GPT client

Meet NGpt - OpenAI GPT C# client library that will make your conversations with ChatGPT a breeze! Have you ever been struggling building your own smart AI application in C#? Well, now you can use ChatGpt inside your application! Introducing NGpt, the powerful .NET library that lets you integrate ChatGPT seamlessly into your C# applications. No more nigts spent on building your own AI solitions, no more convoluted logic and building complex business rules - just pure AI bliss. In this blog post, we'll dive into the wonderful world of NGpt and show you how easy it is to use. You might even find a few laughs along the way. The Magic of NGpt NGpt is a transient fault-tolerant .NET 6 OpenAI client that simplifies ChatGPT integration for C# developers. It's like your friendly neighborhood Spider-Man - always there to help you out when you need it most. With just your OpenAI API key, you can start coding AI applications in C# faster than you can say "Peter Parker." Let...

Specflow czyli BDD w praktyce

Dzisiaj pokażę w praktyce w jaki sposób zbieram wymagania korzystając z narzędzia Specflow. Na początku przypomnę nasze historie użtkownika. Potem skonfigurujemy dodatek Specflow Visual Studio. Na końcu pokażę jak wygląda język Gherkin i zaimplementujemy pierwszą historię użytkownika US1. Oto lista funkcjonalności, które będę implementował w aplikacji Perfect Life: US1: Jako użytkownik aplikacji mobilnej chcę ekran logowania aby mieć możliwość zapisywania swoich postępów US2: Jako użytkownik aplikacji mobilnej chcę mieć kalkulator wskaźnika BMI aby móc mierzyć poziom swojej kondycji US3: Jako użytkownik aplikacji mobilnej chcę widzieć wykresy aby móc wizualnie interpretować swoje postępy US4: Jako użytkownik aplikacji mobilnej chcę mieć możliwość rozwiązania quizu, żeby zbadać wskaźnik Body Age US5: Jako użytkownik aplikacji mobilnej chcę pobierać pliki PDF aby mieć dostęp do planów dietetycznych US6: Jako administrator aplikacji chcę zapisywać dane telemetryczne aby móc an...

Running Microsoft SQL Server on Linux with Docker

Probably you heard that Microsoft Sql Server can only run on Windows machines. Good news - This is not true anymore. You can easily install it on Linux machine too. In this article I show you 2 ways of installing Sql Server on Ubuntu 16 and demonstrate how to connect to the database from remote machine. OPTION 1: Slow way - Manual installation This is the most straightforward way of installing. You download packages and configure Sql Server interactively(you set password, port and choosing installation option - free or paid). This is the step by step instruction from microsoft https://docs.microsoft.com/en-us/sql/linux/quickstart-install-connect-ubuntu OPTION 2: Fast way - Running on docker with just 2 pure-command-line commands. My assumption is that your Ubuntu machine has already docker installed. You can check if Docker is already installed by tunning the command: docker. If you don't have docker installed, no problem: before continuing below instruction just install...