Html injection problems on node.js

Question

Hi i'm trying to inject html code from a String to a view and i'm getting some a error trying to, im stuck:

This is the Code on Node.js route:

router.get('/profile/:page', isLoggedIn, async (req, res) => {
    // Get current page from url (request parameter)
    let page_id = parseInt(req.params.page);
    let currentPage = 0;
    if (page_id > 0) currentPage = page_id;

    //Change pageUri to your page url without the 'page' query string 
    pageUri = '/profile/';


    /*Get total items*/
    await pool.query('SELECT COUNT(id) as totalCount FROM user where user_type="Client"', async (err, result,) => {

        // Display 10 items per page
        const perPage = 10,
            totalCount = result[0].totalCount;
        console.log("Estos son los datos",totalCount, currentPage, pageUri, perPage);
        // Instantiate Pagination class
        const Paginate = new Pagination(totalCount, currentPage, pageUri, perPage);


        /*Query items*/
        const data = {
            users: await pool.query('SELECT * FROM user where user_type="Client" LIMIT ' + 10 + ' OFFSET ' + Paginate.offset),
            pages: Paginate.links()// Paginate.lins()->return a variable with all html
        }

        res.render('profile', { data });
        
    });
});

This is Links() function

class Pagination{
    
    constructor(totalCount,currentPage,pageUri,perPage=2){
        this.perPage = perPage;
        this.totalCount =parseInt(totalCount);
        this.currentPage = parseInt(currentPage);
        this.previousPage = this.currentPage - 1;
        this.nextPage = this.currentPage + 1;
        this.pageCount = Math.ceil(this.totalCount / this.perPage);
        this.pageUri = pageUri;
        this.offset  = this.currentPage > 1 ? this.previousPage * this.perPage : 0;
        this.sidePages = 4;
        this.pages = false;
    }
    
    
    
    links(){
        this.pages='<ul class="pagination pagination-md">';
    
        if(this.previousPage > 0)
            this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri + this.previousPage+'">Previous</a></li>';
    
    
            /*Add back links*/
            if(this.currentPage > 1){
                for (var x = this.currentPage - this.sidePages; x < this.currentPage; x++) {
                    if(x > 0)
                        this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+x+'">'+x+'</a></li>';
                }
            }
    
            /*Show current page*/
            this.pages+='<li class="page-item active"><a class="page-link" href="'+this.pageUri+this.currentPage+'">'+this.currentPage+'</a></li>';
    
            /*Add more links*/
            for(x = this.nextPage; x <= this.pageCount; x++){
    
                this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+x+'">'+x+' </a></li>';
    
                if(x >= this.currentPage + this.sidePages)
                    break;
            }
    
    
            /*Display next buttton navigation*/
            if(this.currentPage + 1 <= this.pageCount)
                this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+this.nextPage+'">Next</a></li>';
    
            this.pages+='</ul>';
    
        return this.pages;
    }

    

    }
    module.exports = Pagination;

In the HTML:

<div id="pages">
                               
{{ data.pages }}

</div>

Finally I am getting an error in my browser which does not allow the html that I send from the path to read correctly. PLZZ HELP ME. IM STUCK

This is pool: const pool = require('../database');

And this is database.js:

const mysql = require('mysql');
const { promisify } = require ('util');

const { database } = require('./keys');
const pool= mysql.createPool(database);

pool.getConnection((err, connection)=>{
    if(err){
        if(err.code === 'PROTOCOL_CONNECTION_LOST'){
            console.error('DATABASE CONNECTION WAS CLOSED');
        }
        if(err.code === 'ER_CON_COUNT_ERROR'){
            console.error('DATABASE HAS TO MANY CONNECTIONS');
        }
        if(err.code === 'ECONNREFUSED'){
            console.error('DATABASE CONNECTION WAS REFUSED');
        }
    }
    if (connection) connection.release();
    console.log('DB is CONNECTED');
    return;
});

//Promisify Pool Querys
pool.query = promisify(pool.query);

module.exports = pool;

Also the browser detect only text, not code.

View Source in the browser enter image description here

Which exact database library are you using? require('mysql')

And, what exactly is the error in your browser?

enter image description here

Answer 1

Your template engine by default escapes any text that you insert into the page so it will be rendered as text and not accidentally interpreted as HTML. This is why the HTML you inject is displaying as plain text.

If you want to inject actual HTML, then you have to tell the template engine that you don't want it to escape this particular insertion. When you tell us what template engine you're using, we can help you with how you do that.

To stop Handlebars from escaping your HTML, just use triple braces like this:

<div id="pages">
                               
{{{ data.pages }}}

</div>

Here's the relevant doc page that describes it.

---

Also, await does not work with pool.query() in either of the places you're using it because the mysql module does not support promises and thus await on something other than a promise does nothing useful. You can use the mysql2 module as in require('mysql2/promise') to get built-in promise support with mysql2. Then, don't pass a callback and just use the returned promise.