Code Monkey home page Code Monkey logo

Comments (2)

stefanohrmann avatar stefanohrmann commented on June 25, 2024

May i ask what you did to prevent this issue?

A temporary workaround would be to use @templ.Raw inside an own <span>:

package main

templ hello(name string, entity string) {
	<div>{ name } 45<span>@templ.Raw(entity)</span> 45&deg;F </div>
}

If you put the @templ.Raw after some other text in a html element then it will be escaped.

from templ.

a-h avatar a-h commented on June 25, 2024

It's expected that text will be automatically escaped using HTML encoding as per https://templ.guide/syntax-and-usage/expressions#escaping

If you want to render a degree symbol, use http.Handle("/", templ.Handler(hello("Temperature", "°"))) not http.Handle("/", templ.Handler(hello("Temperature", "&deg;")))

If templ didn't do that, then templ would be wide open to cross-site scripting attacks from user input.

You can bypass string escaping using

templ/runtime.go

Lines 753 to 765 in 753ba39

// Raw renders the input HTML to the output without applying HTML escaping.
//
// Use of this component presents a security risk - the HTML should come from
// a trusted source, because it will be included as-is in the output.
func Raw[T ~string](html T, errs ...error) Component {
return ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
if err = errors.Join(errs...); err != nil {
return err
}
_, err = io.WriteString(w, string(html))
return err
})
}
as per @stefanohrmann's suggestion, but please make yourself aware of the security implications of doing so first.

This talk outlines security considerations for API design of applications that render HTML: https://www.youtube.com/watch?v=ccfEu-Jj0as

from templ.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.