gofiber/template

automatic escaping in json embed with html template engine

CunioloRaffaele opened this issue · 3 comments

I found out that when i try to embed some json in an html file before serving it to the browser, the json is filled with escape character.

Screenshot 2022-02-25 at 21 30 05

{
        "Sezioni": {
          "Sezioni": "[{\"id_sezione\":0,\"Titolo_sezione\":\"Introduzione al c++\",\"Riassunto\":\"\",\"Lezioni\":[{\"id\":0,\"Titolo_lezione\":\"Lezione 0 sezione 0\"},{\"id\":1,\"Titolo_lezione\":\"lkjlkj\"}]},{\"id_sezione\":1,\"Titolo_sezione\":\"Preparazione dell'ambiente di sviluppo\",\"Riassunto\":\"\",\"Lezioni\":[{\"id\":0,\"Titolo_lezione\":\"lezione o sezione 1\"}]},{\"id_sezione\":2,\"Titolo_sezione\":\"Introduzione alla gestione dei dati\",\"Riassunto\":\"\",\"Lezioni\":[]},{\"id_sezione\":3,\"Titolo_sezione\":\"Introduzione alle funzioni\",\"Riassunto\":\"\",\"Lezioni\":[]},{\"id_sezione\":4,\"Titolo_sezione\":\"Classi e oggetti\",\"Riassunto\":\"\",\"Lezioni\":[{\"id\":0,\"Titolo_lezione\":\"Lezione 0 id sezione 4\"}]},{\"id_sezione\":5,\"Titolo_sezione\":\"Allocamento dinamico della memoria\",\"Riassunto\":\"\",\"Lezioni\":[]},{\"id_sezione\":6,\"Titolo_sezione\":\"Creazione di un programma semplice\",\"Riassunto\":\"\",\"Lezioni\":[]}]\n"
        }
      }

Obviously the client side isn't able to interpret this mess.
However when I print out the json to the terminal it isn't escaped.

Screenshot 2022-02-25 at 21 34 13

2022/02/25 21:33:26 [{"id_sezione":0,"Titolo_sezione":"Introduzione al c++","Riassunto":"","Lezioni":[{"id":0,"Titolo_lezione":"Lezione 0 sezione 0"},{"id":1,"Titolo_lezione":"lkjlkj"}]},{"id_sezione":1,"Titolo_sezione":"Preparazione dell'ambiente di sviluppo","Riassunto":"","Lezioni":[{"id":0,"Titolo_lezione":"lezione o sezione 1"}]},{"id_sezione":2,"Titolo_sezione":"Introduzione alla gestione dei dati","Riassunto":"","Lezioni":[]},{"id_sezione":3,"Titolo_sezione":"Introduzione alle funzioni","Riassunto":"","Lezioni":[]},{"id_sezione":4,"Titolo_sezione":"Classi e oggetti","Riassunto":"","Lezioni":[{"id":0,"Titolo_lezione":"Lezione 0 id sezione 4"}]},{"id_sezione":5,"Titolo_sezione":"Allocamento dinamico della memoria","Riassunto":"","Lezioni":[]},{"id_sezione":6,"Titolo_sezione":"Creazione di un programma semplice","Riassunto":"","Lezioni":[]}]

This should mean that the issue is not in the function that generate the json.

This is the html template:
Screenshot 2022-02-25 at 21 35 49
This is the function in the server side:
Screenshot 2022-02-25 at 21 36 40

func Index(c *fiber.Ctx) error {
	json_response := serv_var.GetSection()
	var buffer bytes.Buffer
	encoder := json.NewEncoder(&buffer)
	//encoder.SetEscapeHTML(false)
	encoder.Encode(&json_response)
	log.Println(string(buffer.String()))
	// Render index template
	return c.Render("index", fiber.Map{
		"json_field": buffer.String(),
	})
	//return c.SendString(buffer.String());
}

@RaffaeleCu

it is working without any problems
image

can you please check if json_response is already a string, because the encode function should specify a struct(or other type), which will be converted to a string afterwards

if this is already a string, it will be converted to json 2 times and escaped of course
image

@ReneWerner87
Thanks for your attention.
I read your comment really carefully and decided to do some more testing.
In my opinion the test that you conducted does not reflect what I explained in the first first post.

Screenshot 2022-02-26 at 14 16 45

As you can see in the previous Screenshot i didn't change a single line of the original code, however the program work exactly as you would expect.

Screenshot 2022-02-26 at 14 18 10

The problem arises when the json is inserted into a <script>.
package main

import (
    "bytes"
    "encoding/json"
    "html/template"
    "log"

    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html"
)


func main() {
    engine := html.New("./assets", ".html")
    app := fiber.New(fiber.Config{Views: engine})

    app.Get("/", func(c *fiber.Ctx) error {
        var buffer bytes.Buffer
        encoder := json.NewEncoder(&buffer)
        encoder.Encode(fiber.Map{"test": "bla"})

        // Render index template
        return c.Render("test", fiber.Map{
            "json_field": template.JS(buffer.String()),
        })
    })

    log.Fatal(app.Listen(":3000"))
}

this prevents the automatic escape of the html engine

image