Wyświetlanie danych pobranych z zewnętrznego API

0

Proszę o ocenę mojego kodu i podpowiedzi jak mogę go ulepszyć.

Korzystam z zewnętrznego API aby pobrać obrazek i opis obrazka.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <img src="" id="image">
    <div id="description">
    </div>
    <button type="button" id="button">Click</button>
</body>
<script>
    const apiKey = "Su8G5LQ9U0ZmnBx34MGpqxhsh5Zh2FPmWHA5dCFa";
    const apiURL = "https://api.nasa.gov/planetary/apod?api_key=";

    const image = document.getElementById("image");
    const button = document.getElementById("button");
    const description = document.getElementById("description");

    const getImage = () => {
        requestAPI();
    }

    const requestAPI = () => {

        fetch(`${apiURL}${apiKey}`)
            .then(response => {
                return response.json();
            })
            .then(data => {

                image.src = data.url;
                description.innerText = data.explanation;
            });
    }

    button.addEventListener("click", getImage);
</script>
</html>

EDIT: Kod zaktualizowany po wskazanych poprawkach.

2

Czy ja wiem czy tu w ogóle jest co oceniać? 10 linijek JS'a.

Za mało kodu żeby coś podpowiedzieć. Jedyne co mi przychodzi do głowy to pierdoła w stylu że masz niepotrzebny nawias dookoła (obj) oraz nazwa zmiennej obj trochę mało mówi.

Noi lepiej ustawić innerText, zamiast innerHTML żeby się nie narazić na XSS.

0

Dziękuje za feedback ;)

Zaimplemetowałam już Twoje sugestie.

Mam jednak kilka pytań.

Czy jeśli pobieramy dane z zaufanego zewnętrznego API a nie od usera to czy nadal jesteśmy narażeni na XSS?
Lepiej jest nazwać obj data ?

2
lightinside napisał(a):

Czy jeśli pobieramy dane z zaufanego zewnętrznego API a nie od usera to czy nadal jesteśmy narażeni na XSS?

Nie myśl o tym w kontekście ataku złego hackera.

Bardziej chodzi o to, żeby zachować zgodność danych: przyjmujesz tekst - użyj innerText, przyjmujesz HTML - użyj innerHTML. Chodzi np o to że jeśli wpiszesz sobie w opisie znak < albo " to żeby to się nie wyświetliło jakoś źle, albo żeby nie pokazał gdzieś userowi &amp;, bo to wiocha :D

Lepiej jest nazwać obj data ?

Wiadomo że w zmiennych są dane, więc nazwa data nic nie mówi. Ja u siebie, na swoim komputerze mam zmienną data, powiesz mi proszę jaką daną przechowuje? ;)

Nazwij ją tym, co przechowuje w środku. Na twoim przykładzie mógłby to być imageDetails. Raczej unikaj nazw obj albo data, bo są zbyt mało unikalne.

1 użytkowników online, w tym zalogowanych: 0, gości: 1