Tarayıcı penceresinde Getirme API yanıtını görüntüleme

0

Soru

Manuel olarak eklemem gerektiğinden bazı web servislerini sorgulamak için Getirme API'sini kullanıyorum X-Custom üstbilgi. Sonuç kullanımının görüntülenmesiyle ilgili bulduğum tüm örnekler console.log DevTools konsol penceresine.

JavaScript deneyimim yok, ama bu bir son için bir araçtı, bu yüzden:

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

Bu konsola görüntüleniyor, ancak tarayıcı penceresinde basitçe gezinmiş gibi olmasını istiyorum <url> ve yanıt görüntülendi. JavaScript böyle bir şeye izin veriyor mu:

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

Arama çubuğu üzerinden URL'ye gidiyormuş gibi tarayıcı penceresinde nasıl görüntüleyebilirim?

Güncelleme

Bu yüzden bazı sonuçları başarılı bir şekilde yükledim:

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

Ve cevap muayene için görünür; Bu bir JSON cevabıdır, bu yüzden umuyordum response.Json() işe yarardı, ama sadece görüntüler [object Object]. Json'u nasıl "güzel göstereceğimi" anlayabilirsem, bir çözümümüz var.

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

En iyi cevabı

2

Çoğunlukla bunu çözdün, ama eğer kullanabilirsen JSON.stringify daha iyi biçimlendirme elde etmek için. İncelikler için sonucu HTML'ye sardım <pre> etiketi, ama kullanmak durumunda sizin için bir anlam ifade ne olursa olsun kullanabilirsiniz.

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>`
        });
    })

Dikkat edilmesi gereken bir güvenlik uyarısı var. Sonuçları sterilize etmeden doğrudan dom'a bir yanıt ekliyorsunuz, bu da XSS saldırılarına neden olabilir (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html) Bu kod savunmasız olsa da, kullanım durumunuz göz önüne alındığında muhtemelen küçük bir tehdittir.

Üretimde kullanılan kod için, bu güvenlik açığını önlemeye yönelik bir dizi yaklaşım vardır; en yaygın olanı, dom'a ekleyeceğiniz herhangi bir dizeden kaçmaktır. Alternatif olarak, sonuçları ayrıştırmak ve eklemek istediğiniz HTML öğelerini oluşturmak ve apı'den sağlanan içerik için iç metni kullanmaktır.

2021-11-23 17:10:39

Diğer dillerde

Bu sayfa diğer dillerde

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