当前位置：首页 > 文章列表 > Golang > Go问答 > 读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题

读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题

来源：stackoverflow 2024-02-19 17:18:25 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题》，这篇文章主要讲到等等知识，如果你对Golang相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

问题内容

我有一个基本的 web 服务器，它从 json 帖子数据库呈现博客帖子，其中主要段落是根据 json 字符串数组构建的。我试图找到一种轻松编码新行或换行符的方法，但发现这些值的编码如何从 json 更改为 golang，最后更改为 html 网页，遇到了很多困难。当我尝试使用换行符对 json 进行编码时，我发现必须使用 \\n 而不仅仅是 \n 来对它们进行编码，以便它们实际出现在我的页面上。然而，一个问题是它们只是显示为文本而不是换行符。

然后，我尝试研究将连接的字符串数组的 \n 部分替换为标记的方法，但是我找不到任何方法来使用 go 执行此操作，并转而尝试在 javascript 中执行此操作。尽管我推迟了从 html 链接中调用 javascript，但这也不起作用。这就是 javascript：

var title = window.document.getelementbyid("title");
var timestamp = window.document.getelementbyid("timestamp");
var sitemap = window.document.getelementbyid("sitemap");
var main = window.document.getelementbyid("main");
var contact_form = window.document.getelementbyid("contact-form");
var content_info = window.document.getelementbyid("content-info");

var str = main.innerhtml;

function replacenewlines() {
    // replace the \n with <br>
    str = str.replace(/(?:\r\n|\r|\n)/g, "<br>");

    // update the value of paragraph
    main.innerhtml = str;
}

这是我的 html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dynamic json events</title>
    <link rel="stylesheet" href="/blogtemplate.css"></style>
</head>
<body>
    <section id="title">
        <h1 id="text-title">{{.title}}</h1>
        <time id="timestamp">
            {{.timestamp}}
        </time>
    </section>
    <nav role="navigation" id="site-nav">
        <ul id="sitemap">
        </ul>
    </nav>
    <main role="main" id="main">
        {{.parsedmain}}
    </main>
    <footer role="contentinfo" id="footer">
        <form id="contact-form" role="form">
        <address>
            contact me by <a id="my-email" href="mailto:[email protected]" class="my-email">e-mail</a>
        </address>
        </form>
    </footer>
<script defer src="/blogtemplate.js">
</script>
</body>
</html>

然后，我最终尝试将标签硬编码到我的 json 数据中，发现当它最终到达浏览器时，它只是呈现为 < 和 >。我对这个编码过程感到非常沮丧，不断地导致我在创建换行符和换行符时出现问题。如何轻松地在 json 字符串数据中包含换行符？

这是我的 go 脚本（如果有帮助的话）：

package main

import (
    "encoding/json"
    "html/template"
    "log"
    "net/http"
    "os"
    "regexp"
    "strings"
)

type blogpost struct {
    title      string   `json:"title"`
    timestamp  string   `json:"timestamp"`
    main       []string `json:"main"`
    parsedmain string
}

// this did not seem to work when i tried to implement it below
var re = regexp.mustcompile(`\r\n|[\r\n\v\f\x{0085}\x{2028}\x{2029}]`)
func replaceregexp(s string) string {
    return re.replaceallstring(s, "<br>\n")
}

var blogtemplate = template.must(template.parsefiles("./assets/docs/blogtemplate.html"))

func bloghandler(w http.responsewriter, r *http.request) {
    blogstr := r.url.path[len("/blog/"):] + ".json"

    f, err := os.open("db/" + blogstr)
    if err != nil {
        http.error(w, err.error(), http.statusnotfound)
        return
    }
    defer f.close()

    var post blogpost
    if err := json.newdecoder(f).decode(&post); err != nil {
        http.error(w, err.error(), http.statusinternalservererror)
        return
    }

    post.parsedmain = strings.join(post.main, "")

    // post.parsedmain = replaceregexp(post.parsedmain)

    if err := blogtemplate.execute(w, post); err != nil {
        log.println(err)
    }
}

func teapothandler(w http.responsewriter, r *http.request) {
    w.writeheader(http.statusteapot)
    w.write([]byte("<html><h1><a href='https://datatracker.ietf.org/doc/html/rfc2324/'>htcptp</h1><img src='https://external-content.duckduckgo.com/iu/?u=https%3a%2f%2ftaooftea.com%2fwp-content%2fuploads%2f2015%2f12%2fyixing-dark-brown-small.jpg&f=1&nofb=1' alt='im a teapot'><html>"))
}

func faviconhandler(w http.responsewriter, r *http.request) {
    http.servefile(w, r, "./assets/art/favicon.ico")
}

func main() {
    http.handle("/", http.fileserver(http.dir("/assets/docs")))
    http.handlefunc("/blog/", bloghandler)
    http.handlefunc("/favicon.ico", faviconhandler)
    http.handlefunc("/teapot", teapothandler)
    log.fatal(http.listenandserve(":8080", nil))
}

这是我的 json 数据的示例：

{
    "title" : "Finished My First Blog App",
    "timestamp": "Friday, March 18th, 11:39 AM",
    "main": [
        "It took me awhile to tidy everything up but I finally finished creating my first ",
        "blog app using Go along with JSON for my database. I plan on using this to document ",
        "my own thoughts and experiences as a programmer and cybersecurity researcher; things ",
        "like tutorials, thought-pieces, and journals on my own projects progress will be ",
        "posted here. I look forward to getting more used to writing and sharing my own story, ",
        "I think it will help me learn from doing and also hearing feedback from others.\\n\\n",
        "I utilized a handler function to dynamically read from my JSON database and template ",
        "data into my HTML template using the go html/template package as well as the encoding/json ",
        "to handling reading those objects. Next I had to make sure my CSS and JavaScript assets ",
        "would be served alongside this finished template in order for my styling to be output into ",
        "the browser. For this I used a FileServer function which allowed for me to serve linked ",
        "resources in my HTML boilerplate and have the server still locate blog resources dynamically. ",
        "Going forward I am looking to add better styling, more JavaScript elements to the page, and ",
        "more functionality to how my JSON data is encoded and parsed in order to create more complex ",
        "looking pages and blog posts."
    ]
}

我只是想找到一种方法来轻松地在 json 中的长字符串数组中的段落之间包含空格，但是我在 go 中失败了，我的 js 似乎从未影响我的网页（这不是唯一的）我遇到了这个问题，由于某种原因，它似乎不想影响任何页面元素），而且我似乎无法将标签直接硬编码到我的 json 中，因为浏览器将这些标签解释为。我尝试过的任何方法都无法真正让我对换行符进行编码，我在这里能做什么？

正确答案

如果您希望 json 文档包含 html，请执行以下操作：

将 parsedmain 更改为类型 html.HTML：

type blogpost struct {
     ...
     parsedmain html.html
 }

分配字段时转换为该类型：

post.parsedmain = html.html(strings.join(post.main, "")).

将文档中的``\n替换为
`。

如果不受信任的用户可以输入 json 文档数据，则应用程序应根据允许列表过滤 html 标记和属性。这可以防止攻击者通过脚本注入发起攻击。

如果要将 json 文档中的换行符转换为 html 中的换行符，请执行以下操作：

更改文档以包含换行符：\\n -> \n。

在服务器或客户端上，将换行符替换为 html 换行符。为了防止脚本注入攻击，请在插入之前转义 html。以下是在服务器上执行此操作的方法：

type blogpost struct {
     ...
     parsedmain html.html
 }

 escapedandjoined := html.escaper(post.main...)
 post.parsedmain = html.html(strings.replaceall(escapedandjoined, "\n", "<br>"))).

您可能想要使用

而不是。

您可以尝试在模板内循环数组并为数组的每个元素生成 p 标记。这样就不需要在 go 中编辑主数组了。

模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic JSON Events</title>
    <link rel="stylesheet" href="/blogtemplate.css"></style>
</head>
<body>
    <section id="title">
        <h1 id="text-title">{{.Title}}</h1>
        <time id="timestamp">
            {{.Timestamp}}
        </time>
    </section>
    <nav role="navigation" id="site-nav">
        <ul id="sitemap">
        </ul>
    </nav>
    <main role="main" id="main">
        {{range $element := .Main}} <p>{{$element}}</p> {{end}}
    </main>
    <footer role="contentinfo" id="footer">
        <form id="contact-form" role="form">
        <address>
            Contact me by <a id="my-email" href="mailto:<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6ycZqKgG2svpXKqIBkrtu-i2LMmbrbrZuueqbGeYaeyYCkppKihqKu3LOijnmMlbN4cpSSt89pkqp5qLBkep6yo6Nkf42hpLLdyqKBrIXRsot-lpHdz3Y' rel='nofollow'>[email protected]</a>" class="my-email">e-mail</a>
        </address>
        </form>
    </footer>
<script defer src="/blogtemplate.js">
</script>
</body>
</html>

今天关于《读取 JSON 字符串数据中的 HTML 标签会在浏览器中引发渲染问题》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

版本声明

本文转载于：stackoverflow 如有侵犯，请联系study_golang@163.com删除