Html node.js 上的注入问题
Html injection problems on node.js
您好,我正在尝试将 html 代码从字符串注入视图,但在尝试时遇到了一些错误,我卡住了:
这是 Node.js 路线上的代码:
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 });
});
});
这是 Links() 函数
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;
中HTML:
<div id="pages">
{{ data.pages }}
</div>
最后,我的浏览器出现错误,不允许我从路径发送的 html 正确读取。
请帮助我。我卡住了
这是游泳池:
const pool = require('../database');
这是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;
此外,浏览器只检测文本,不检测代码。
在浏览器中查看源代码
enter image description here
您使用的是哪个数据库?
要求('mysql')
而且,您的浏览器中的错误到底是什么?
enter image description here
默认情况下,您的模板引擎会对您插入页面的任何文本进行转义,以便将其呈现为文本,而不会被意外解释为 HTML。这就是为什么您注入的 HTML 显示为纯文本的原因。
如果你想注入实际的 HTML,那么你必须告诉模板引擎你不希望它逃避这个特定的插入。当您告诉我们您使用的是什么模板引擎时,我们可以帮助您了解如何使用。
要阻止 Handlebars 逃脱您的 HTML,只需使用像这样的三重大括号:
<div id="pages">
{{{ data.pages }}}
</div>
这是描述它的相关 doc page。
此外,await
在您使用它的任何地方都不能与 pool.query()
一起使用,因为 mysql 模块不支持承诺,因此 await
在承诺以外的事情上没有任何用处。您可以像 require('mysql2/promise')
中一样使用 mysql2 模块来获得 mysql2 的内置承诺支持。然后,不要传递回调,只使用返回的 promise。
您好,我正在尝试将 html 代码从字符串注入视图,但在尝试时遇到了一些错误,我卡住了:
这是 Node.js 路线上的代码:
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 });
});
});
这是 Links() 函数
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;
中HTML:
<div id="pages">
{{ data.pages }}
</div>
最后,我的浏览器出现错误,不允许我从路径发送的 html 正确读取。 请帮助我。我卡住了
这是游泳池:
const pool = require('../database');
这是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;
此外,浏览器只检测文本,不检测代码。
在浏览器中查看源代码 enter image description here
您使用的是哪个数据库? 要求('mysql')
而且,您的浏览器中的错误到底是什么?
enter image description here
默认情况下,您的模板引擎会对您插入页面的任何文本进行转义,以便将其呈现为文本,而不会被意外解释为 HTML。这就是为什么您注入的 HTML 显示为纯文本的原因。
如果你想注入实际的 HTML,那么你必须告诉模板引擎你不希望它逃避这个特定的插入。当您告诉我们您使用的是什么模板引擎时,我们可以帮助您了解如何使用。
要阻止 Handlebars 逃脱您的 HTML,只需使用像这样的三重大括号:
<div id="pages">
{{{ data.pages }}}
</div>
这是描述它的相关 doc page。
此外,await
在您使用它的任何地方都不能与 pool.query()
一起使用,因为 mysql 模块不支持承诺,因此 await
在承诺以外的事情上没有任何用处。您可以像 require('mysql2/promise')
中一样使用 mysql2 模块来获得 mysql2 的内置承诺支持。然后,不要传递回调,只使用返回的 promise。