How to Escape HTML in NodeJS EJS View ?
Last Updated :
12 Apr, 2024
When working with web applications in Node.js using the EJS templating engine, it’s important to ensure that user-generated content containing HTML is rendered safely. Otherwise, it can lead to security vulnerabilities such as cross-site scripting (XSS) attacks.
Prerequisites:
Why do we use EJS?
EJS (Embedded JavaScript) is a popular templating engine for Node.js applications. It allows you to embed JavaScript code directly into HTML templates, making it easier to generate dynamic content. However, when rendering user-generated data, precautions must be taken to prevent XSS attacks.
Example:
let username = ajeet
let greet = `hello ${username}`
How to escape HTML in node.js EJS view?
There are some tags in EJS which can dynamically change the data inside the HTML page. we can also perform different type of operations, use conditionals, and these are the tags used in EJS to manipulate and modify HTML page.
- <% ‘Scriptlet’ tag, for control-flow, no output
- <%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
- <%= Outputs the value into the template (HTML escaped)
- <%- Outputs the unescaped value into the template
- <%# Comment tag, no execution, no output
- <%% Outputs a literal ‘<%’
- %> Plain ending tag
- -%> Trim-mode (‘newline slurp’) tag, trims following newline
- _%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it
Escape HTML in node.js EJS view
Step 1: Create a folder or go to the existing folder
mkdir escape-html
cd escape-html
Step 2: Create a server using the following command
npm init -y
Step 3: Install the required dependencies.
npm i express ejs
Folder Structure:
Dependencies:
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.19.2"
}Approach 1: Using the tag <%= %>
By default, EJS uses <%= %> tags to output unescaped values.
Example:
HTML
<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h1>
<%= 2+2 %>
</h1>
</body>
</html>
//server.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
app.get('/', (req, res) => {
res.render("index.ejs")
});
To start the server run the following command.
node index.js
Output:
Approach 2: Using the tag <%- %>
This tag can be use to escape HTML and you can write javascript inside it.
Example:
HTML
<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>this is the output <%- 7+7 %></h1>
</body>
</html>
//server.js
const express = require('express');
const ejs = require('ejs');
const path = require('path');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.set(path.join(__dirname, 'views'));
app.get('/', (req, res) => {
res.render('index');
});
app.listen(port, () =>
console.log(`Server listening on port ${port}`));
Output:
Share your thoughts in the comments
Please Login to comment...