在浏览器窗口中显示 Fetch API 响应答案

【问题标题】：Displaying Fetch API response in browser window在浏览器窗口中显示 Fetch API 响应
【发布时间】：2022-01-01 07:38:08
【问题描述】：

我正在使用 Fetch API 来查询一些 Web 服务，因为我需要手动添加 X-Custom 标头。我发现的所有关于在 DevTools 控制台窗口中显示结果的示例都使用 console.log。

我没有 JavaScript 经验，但这是达到目的的一种手段，所以我有：

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

这确实会显示到控制台，但我希望它在浏览器窗口中，就像我只是导航到 <url> 并显示响应一样。 JavaScript 是否启用了类似的功能：

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

如何在浏览器窗口中显示它，就像我通过搜索栏导航到 URL 一样？

更新

所以我已经成功加载了一些结果：

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

并且响应出现以供检查；这是一个 JSON 响应，所以我希望 response.Json() 可以工作，但它只显示 [object Object]。如果我能弄清楚如何“漂亮地显示”JSON，我们就有了解决方案。

【问题讨论】：

您能否更详细地描述问题并可能添加一些代码来表达问题？
@RhettHarrison 我只是在更新代码，请查看更新

标签： javascript google-chrome fetch fetch-api

【解决方案1】：

您基本上已经弄清楚了，但如果您可以使用JSON.stringify 来获得更好的格式。为了细节，我将结果包装在 HTML <pre> 标记中，但您可以使用对您的用例有意义的任何内容。

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

有一个安全警告需要注意。您正在直接向 DOM 添加响应而不净化结果，这可能导致 XSS 攻击 (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html) 虽然此代码易受攻击，但考虑到您的用例，它可能是一个小威胁。

对于生产中使用的代码，有多种方法可以防止此漏洞，最常见的方法是将要插入 DOM 的任何字符串转义。另一种方法是解析结果，创建您希望插入的 HTML 元素，并为 API 提供的内容使用 innerTEXT。

【讨论】：