EJS Outputting Data


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 &lt;script&gt;alert(&quot;Hacked!&quot;)&lt;/script&gt;, 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.