Wyświetlanie odpowiedzi API próbki, w tym samym okienku przeglądarki

0

Pytanie

Używam API próbkowania dla zapytania niektórych usług internetowych, tak, jak muszę ręcznie dodać X-Custom nagłówki. Wszystkie przykłady, które znalazłem stosunkowo wyświetlić wynik, używają console.log w okno konsoli DevTools.

Nie mam doświadczenia w pracy z JavaScript, ale to było środkiem do osiągnięcia celu, dlatego mam:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            console.log(data);
        });
    })

To naprawdę jest wyświetlany w konsoli, ale chciałbym, aby to było w tym samym okienku przeglądarki, jak gdybym po prostu przeniósł się w <url> i odpowiedź była wyświetlona. Pozwala czy JavaScript coś takiego:

fetch('<url>', {
        headers: myHeaders,
        method: 'GET',
        credentials: 'include'
    }).then(
        function(response) {
            response.json().then(function(data)) {
                this.browserWindow.display(data);
            });
        })

Jak bym unaocznił go w oknie przeglądarki, jak gdybym przeszedł do adresu URL przez pasek wyszukiwania?

Zaktualizować

W ten sposób z powodzeniem dodane niektóre wyniki, jak tak:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.text().then(function(data)) {
            document.querySelector('body').innerHTML = data
        });
    })

I odpowiedź pojawia się dla sprawdzenia; to jest odpowiedź JSON, więc miałem nadzieję response.Json() będzie działać, ale on po prostu wyświetla [object Object]. Jeśli będę w stanie zrozumieć, jak "pięknie wyświetlić" JSON, mamy rozwiązanie.

fetch fetch-api google-chrome javascript
2021-11-22 17:50:43
1

Najlepsza odpowiedź

2

W zasadzie sobie z tego sprawę, ale jeśli można użyć JSON.stringify aby uzyskać bardziej przyjemne formatowanie. Dla wygody wybrałem się na spacer wynik w HTML <pre> tag, ale można użyć wszystko, co ma sens dla opcji wykorzystania.

fetch('<url>', {
headers: myHeaders,
method: 'GET',
credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            document.querySelector('body').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`
        });
    })

Istnieje ostrzeżenie w zakresie bezpieczeństwa, o których należy wiedzieć. Dodajesz odpowiedź bezpośrednio w DOM bez czyszczenia wyników, co może powodować ataki XSS (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html) Chociaż ten kod jest podatny, to prawdopodobnie stwarza niewielkie zagrożenie, biorąc pod uwagę korzystanie.

Dla kodu używanego w produkcji, istnieje wiele metod, aby zapobiec tej luki w zabezpieczeniach, z których najbardziej powszechne jest ekranowanie każdego wiersza, który masz zamiar włożyć w DOM. Alternatywą jest analiza wyników, tworzenie elementów HTML, które chcesz wstawić, i korzystanie z wewnętrznego tekstu do zawartości dostępnej z API.

2021-11-23 17:10:39

W innych językach

Ta strona jest w innych językach

Русский
..................................................................................................................
Italiano
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................