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

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

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

欢迎各位小伙伴来到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 
str = str.replace(/(?:\r\n|\r|\n)/g, "
"); // update the value of paragraph main.innerhtml = str; }

这是我的 html:




    
    
    
    dynamic json events
    


    

{{.title}}

{{.parsedmain}}

然后,我最终尝试将
标签硬编码到我的 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, "
\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("

htcptp

im a teapot")) } 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,请执行以下操作:

  1. 将 parsedmain 更改为类型 html.HTML:

    type blogpost struct {
         ...
         parsedmain html.html
     }
  2. 分配字段时转换为该类型:

    post.parsedmain = html.html(strings.join(post.main, "")).
  3. 将文档中的``\n替换为
    `。

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

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

  1. 更改文档以包含换行符:\\n -> \n。

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

    type blogpost struct {
         ...
         parsedmain html.html
     }
    
     escapedandjoined := html.escaper(post.main...)
     post.parsedmain = html.html(strings.replaceall(escapedandjoined, "\n", "
    "))).

您可能想要使用

而不是
。

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

模板:




    
    
    
    Dynamic JSON Events
    


    

{{.Title}}

{{range $element := .Main}}

{{$element}}

{{end}}

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

版本声明
本文转载于:stackoverflow 如有侵犯,请联系study_golang@163.com删除
使用jQuery删除父元素的最后一个子元素使用jQuery删除父元素的最后一个子元素
上一篇
使用jQuery删除父元素的最后一个子元素
如何在Mac上打开和阅读eml文件
下一篇
如何在Mac上打开和阅读eml文件
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • PubMedQA数据集详解:生物医学问答基准、功能与应用指南
    PubMedQA
    深入了解PubMedQA生物医学问答数据集,涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用,助力提升NLP模型性能。
    463次使用
  • H2O EvalGPT:开源LLM大模型评估与排行榜工具
    H2O EvalGPT
    H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
    526次使用
  • LMArena是什么?伯克利AI模型评估平台使用指南与功能解析
    LMArena
    LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
    545次使用
  • 斯坦福HELM:大语言模型Holistic Evaluation整体评估框架详解
    HELM
    深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
    493次使用
  • MMBench详解:多模态大模型基准测试、功能特点与使用指南
    MMBench
    MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
    312次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码