In EJS (Embedded JavaScript), the <%= %>
syntax is used to output data into your HTML templates. This tag evaluates a JavaScript expression and inserts the result into the HTML. It’s useful for displaying dynamic data that you want to render on the server side before sending it to the client.
How <%= %>
Works
The <%= %>
tag is used to escape and output the result of a JavaScript expression as HTML-encoded text. This means that special HTML characters like <
, >
, and &
are automatically escaped to prevent issues like XSS (Cross-Site Scripting) attacks.
Basic Usage
Example:
Suppose you have a variable title
in your server-side code that you want to display in your HTML template.
Server-Side Code (Node.js with Express):
app.get('/', (req, res) => {
res.render('index', { title: 'Welcome to My Website' });
});
EJS Template (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><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
</body>
</html>
In this example:
<%= title %>
inside the <title>
tag sets the page title.<%= title %>
inside the <h1>
tag displays the value of the title
variable as a heading.
Handling Special Characters
The <%= %>
tag automatically escapes special HTML characters to prevent HTML injection attacks. For example:
Server-Side Code:
app.get('/', (req, res) => {
res.render('index', { userInput: '<script>alert("Hacked!")</script>' });
});
EJS Template (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>Safe Display</title>
</head>
<body>
<p>User input: <%= userInput %></p>
</body>
</html>
In this case, <%= userInput %>
will render as <script>alert("Hacked!")</script>
, showing the script tags as text rather than executing them.
Using JavaScript Expressions
You can also use JavaScript expressions within the <%= %>
tags. This allows you to perform operations or manipulate data directly in your templates.
Example:
Server-Side Code:
app.get('/', (req, res) => {
res.render('index', { user: { name: 'Alice', age: 30 } });
});
EJS Template (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>User Info</title>
</head>
<body>
<h1><%= user.name %></h1>
<p>Age next year: <%= user.age + 1 %></p>
</body>
</html>
In this example:
<%= user.name %>
outputs the name
property of the user
object.<%= user.age + 1 %>
computes the user's age next year and outputs the result.
Escaping HTML
To include raw HTML without escaping, you can use <%- %>
instead of <%= %>
. However, use this cautiously to avoid XSS vulnerabilities.
Example:
Server-Side Code:
app.get('/', (req, res) => {
res.render('index', { htmlContent: '<strong>Important!</strong>' });
});
EJS Template (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>Raw HTML Example</title>
</head>
<body>
<p>Message: <%- htmlContent %></p>
</body>
</html>
Here, <%- htmlContent %>
will render <strong>Important!</strong>
as HTML, not text.
Summary
<%= %>
: Outputs the result of a JavaScript expression as HTML-encoded text, escaping special characters.<%- %>
: Outputs the result of a JavaScript expression as raw HTML, without escaping.
Using <%= %>
helps prevent security issues by escaping special characters and ensuring that user input is rendered safely.