CODEWITHSUNDEEP
javascriptjqueryflaskjinja2
Jack
Jack

Reputation: 497

Encoding Issue in Flask Template with Jquery

I have two templates, the first one simply pulls data from the db and shows them on the page, and a second one that passes that same data to jquery 'tabulator' that provides layout and other stuff. THe problem is that apparently the same {{ place.name }} gets printed as Chips & Beers on the first one and Chips & Beers on the second one.

This is the first template

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <title>Milano - Publist</title>
</head>

<body>

    <div class="container">
        <table>
            <tr>
                <th>NOME</th>
            </tr>
            {% for place in places %}
                <div class="row">
                    <tr>
                        <td>{{ place.name }}</td>

                    </tr>
                </div>
            {% endfor %}
        </table>
</body>

And this one is the template with jquery and tabulator.

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <link href="static/tabulator.min.css" rel="stylesheet">
    <title>Milano - Publist</title>
</head>

<body>

    <div class="container">
        <script type="text/javascript" src="static/jquery.js"></script>
        <script type="text/javascript" src="static/jquery-ui.min.js"></script>

        <script type="text/javascript" src="static/tabulator.min.js"></script>
        <div id="example-table"></div>
        <script type="text/javascript">

        var tabledata = [];
        {% for place in places %}
            var line = {}
            line.name = "{{ place.name }}"
            tabledata.push(line)
        {% endfor %}
            //load sample data into the table

            $("#example-table").tabulator({
            height:"100%", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
            layout:"fitColumns", //fit columns to width of table (optional)
            columns:[ //Define Table Columns
                {title:"Nome", field:"name", width:150}
            ],
        });

         $("#example-table").tabulator("setData", tabledata);
        </script>

    </div><!-- /.container -->
</body>

I cannot find out where the encoding actually happens.

Upvotes: 0

Views: 59

Answers (1)

Mateusz Kleinert
Mateusz Kleinert

Reputation: 1376

According to the documentation:Formatting Data

Note: To guard against code injection, any formatters that are meant to display text (plaintext, textarea, money, email, link) have the data sanitized first to escape any potentially harmful HTML or JavaScript from making into the table, this causes any such data to be displayed as its plain text alternative. If you want the HTML to be displayed correctly use the html formatter, but be aware if your data can be user edited this could allow for malicious script injection.

What you see is a simple HTML encoding and it is there for the safety of your application. You can try with formatter:"html" or prepare a custom filter on your own.

Upvotes: 1

Related Questions