1

I gotta do a notes app so I decided to use summernote and python flask for this. I got a form where the user has to input the title and the content using a summernote textarea then the input is stored in the DB. The problem that I got is when I try to display the notes they come as plain text enter image description here

this is how I display them

            {% for foo in notes %}
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">{{ foo.title }}</div>
                    </div>
                    <div class="card-body">
                        <div class="ribbon-wrapper ribbon-lg">
                        <div class="ribbon bg-primary">
                            <p>{{ foo.category_name }}</p>
                        </div>
                    </div>
                        {{ foo.content }}
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-info btn-xs"><i class="fas fa-eye"></i></a>
                        <a href="#" class="btn btn-danger btn-xs"><i class="fas fa-trash"></i></a>
                    </div>
                </div>
            {% endfor %}

Is there any way that I could actually render the HTML content instead of displaying it as plain text?

Terchila Marian
  • 2,225
  • 3
  • 25
  • 48

1 Answers1

2

Use Jinja's safe or escape filters

https://jinja.palletsprojects.com/en/2.10.x/templates/?highlight=safe#safe

https://jinja.palletsprojects.com/en/2.10.x/templates/?highlight=safe#escape

{{ foo.content | safe }}   
{{ foo.content | escape }}

Always be mindful of trusting user input: https://flask.palletsprojects.com/en/1.1.x/security/

Craicerjack
  • 6,203
  • 2
  • 31
  • 39
  • 1
    Calling `| safe` filter will bypass the autoescape functionality! OP develops a note app, hence user provides the HTML string. Trusting this is a terrible idea, and a great opportunity for XSS attack. https://flask.palletsprojects.com/en/1.1.x/security/ – Kristof Gilicze Nov 30 '19 at 20:59
  • 1
    @KristofGilicze that's true. Do you have an alternate solution? I would typically use CSP to protect against this. – JosefAssad Dec 01 '19 at 12:02