Jak dołączać pliki JS do strony?
Dzisiaj chciałbym opowiedzieć Ci o jednym z aspektów bezpieczeństwa aplikacji webowych. O używaniu zależności. Cały temat używania zależności i ich bezpieczeństwa jest dość obszerny. Dlatego też w tym artykule skupimy się tylko na tym jak dołączać pliki JS do strony.
Tworząc strony lub aplikacje internetowe, często korzystamy z wielu bibliotek JavaScript. Poczynając od frameworków (takich jak jQuery lub React) aż po biblioteki narzędziowe służące do konkretnego zadania (takie jak Google Captcha lub CkEditor).
Możliwe opcje
Dołączając takie biblioteki do naszej strony mamy dwie opcje:
- dołączyć plik Java Script z biblioteką do naszej aplikacji odnosząc się do lokalnego zasobu (względnej ścieżki na serwerze)
<script src="lib/angular.min.js"></script>
- odnosić się do pliku z zewnętrznego źródła
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Którą opcję warto wybrać?
Obie opcje mają swoje zalety i wady. W pierwszej kolejności powinniśmy rozważyć skorzystanie z pliku JavaScript jako lokalnego zasobu.Poniżej przedstawiam analizę każdej z opcji.
Lokalny zasób
Zalety
- szybkość – wszelkie zasoby na naszym serwerze będą pobierane z tą samą prędkością co sama strona,
- pewność łączenia – jeżeli ktoś ma dostęp do naszej strony, ma też dostęp do skryptów, co zmniejsza ryzyko błędów,
- możliwość bundlowania (łączenia skryptów) i minifikacji (zmniejszenia ich rozmiarów) zależności – redukuje to wielkość skryptów i ilość plików potrzebnych do pobrania,
- możliwość tree-shakingu – pozwala na wyrzucenie nieużywanych partii kodu.
Wady
- zamrożenie wersji biblioteki – każde podbicie wersji biblioteki wymaga releasu (co pozwala też dodatkowo przetestować działanie nowszej wersji).
Kiedy warto wybrać?
Warto wybierać to rozwiązanie do wszelkich bibliotek, które są wersjonowane.
Jak zabezpieczyć?
- Content Security Policy – za pomocą zdefiniowania pustej listy
Content-Security-Policy: default-src 'self',
- warto również upewnić się, że biblioteka jest bezpieczna korzystając z rejestru podatności takiego jak Snyk.
Zewnętrzny zasób
Zalety
- możliwość łączenia się do najbardziej aktualnej wersji. Przykładem może być Google reCaptcha, gdzie łączymy się z plikiem
https://www.google.com/recaptcha/api.js
- Google dba o to, żeby plik był na bieżąco aktualizowany jednak z zachowaniem pełnej kompatybilności wstecznej. Dotyczy to także poprawek bezpieczeństwa.
Wady
- możliwość braku dostępu do skryptu. Zarówno z powodów sieciowych, gdzie użytkownik ma dostęp do serwera naszej aplikacji, ale nie ma już dostępu do serwera z biblioteką jak i z powodu skasowania samego pliku z zewnętrznego serwera,
- możliwość podmiany pliku w zewnętrznym źródle – może to powodować problemy bezpieczeństwa, ponieważ referencjonowany kod uruchamiamy w kontekście naszej strony. Wobec tego skrypt ten ma dostęp do wszelkich informacji na naszej stronie.
Kiedy warto wybrać?
Jeżeli łączymy się do skryptu dostawcy, który nie wersjonuje swojej biblioteki i rekomenduje łączyć się z ich usługą np. biblioteki Google. Wymaga to oczywiście zaufania do dostawcy.Jak zabezpieczyć?
- Content Security Policy – każde zewnętrzne źródło, z którego pobieramy plik, powinno być zdefiniowane na liście dozwolonych witryn do pobierania skryptów CSP (https://developers.google.com/recaptcha/docs/faq#im-using-content-security-policy-csp-on-my-website.-how-can-i-configure-it-to-work-with-recaptcha)
Content-Security-Policy: script-src https://www.google.com/recaptcha/
- CSP nonces (https://content-security-policy.com/nonce/) – inną opcją zabezpieczenia dołączanego pliku jest oznaczanie tagu script specjalną etykietą i zezwolenia tylko na ten konkretny skrypt
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" nonce="randomNonce"></script>
Content-Security-Policy: script-src 'nonce-randomNonce';
Z powyższego porównania wynika jak dołączać pliki JS do strony. Najlepiej aby domyślnie zawsze powinniśmy próbować użyć lokalnej kopii pliku. Jednak są pewne okoliczności, które minimalizują znalezione ryzyka.
Powiązane: