How to render HTML in AngularJS

Rendering dynamic HTML in AngularJS can be tricky, especially when ensuring your application remains secure. This guide will show you how to use $sce.trustAsHtml and ngSanitize to display HTML content safely in your AngularJS applications.

Why Does AngularJS Block HTML by Default?#

AngularJS sanitizes and blocks potentially harmful HTML content by default to prevent XSS (Cross-Site Scripting) attacks.

This ensures that even malicious scripts are present in your content, they won’t be executed. 

But what if you’re confident your HTML is safe and want to render it thoroughly in your application?

Rendering HTML with $sce.trustAsHtml#

What is $sce.trustAsHtml?

The $sce service (Strict Contextual Escaping) in AngularJS allows you to mark HTML content as safe explicitly.

Its function, $sce.trustAsHtml, enables AngularJS to bypass its default sanitization and render your content directly as raw HTML.

This is useful when:

  • You are dealing with trusted sources (e.g., internal reports).
  • You need full control over how the HTML is rendered.

Example: Using $sce.trustAsHtml

Controller (app.js):

angular.module('htmlRenderApp', [])
    .controller('HtmlRenderController', ['$scope', '$sce', function($scope, $sce) {
        $scope.safeHtmlContent = $sce.trustAsHtml('<p>This is a paragraph with <strong>bold</strong> text and a <a href="https://www.example.com">link</a>.</p>');
    }]);

View (index.html):

<!DOCTYPE html>
<html lang="en" ng-app="htmlRenderApp">
<head>
    <meta charset="UTF-8">
    <title>Render HTML in AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="HtmlRenderController">
        <div ng-bind-html="safeHtmlContent"></div>
    </div>
</body>
</html>
AngularJs trustAsHtml example

Key Takeaway:

Use $sce.trustAsHtml only for content you trust entirely.

It bypasses AngularJS’s default security checks, so ensuring the content is free from malicious scripts is crucial.

Rendering HTML Safely with ngSanitize#

What is ngSanitize?

The ngSanitize module provides a safer way to render HTML by automatically sanitizing the content.

This means it removes potentially harmful elements (like <script> tags) before inserting the content into the DOM.

Example: Using ngSanitize

Controller (app.js):

angular.module('htmlRenderApp', ['ngSanitize'])
    .controller('HtmlRenderController', ['$scope', function($scope) {
        $scope.safeHtmlContent = '<p>This is a safe paragraph with <strong>bold</strong> text, a <a href="https://www.example.com">link</a>, and an attempt to inject a <script>alert("XSS")</script>.</p>';
    }]);

View (index.html):

<!DOCTYPE html>
<html lang="en" ng-app="htmlRenderApp">
<head>
    <meta charset="UTF-8">
    <title>Render HTML in AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="HtmlRenderController">
        <div ng-bind-html="safeHtmlContent"></div>
    </div>
</body>
</html>
Using ngSanitize to Safely Render HTML

Key Takeaway:

ngSanitize automatically removes dangerous elements like <script> tags, making it ideal for rendering user-generated content.

When to Use $sce.trustAsHtml vs ngSanitize#

Feature $sce.trustAsHtml ngSanitize
Use Case Trusted content User-generated or external content
Security Relies on developer validation Automated sanitization
Control Full control over what is rendered Limited by sanitization rules
Example Internal documents or reports Comments or user-generated articles

 

Conclusion: Choosing the Right Approach for Your Needs#

Both $sce.trustAsHtml and ngSanitize offer ways to render HTML content dynamically in AngularJS while maintaining security.

The key is understanding your use case:

  • $sce.trustAsHtml: Use when you trust the source and need full control.
  • ngSanitize: Use when handling untrusted or user-generated content.

By applying these techniques appropriately, you can balance functionality and security, ensuring a seamless and safe user experience.

What's Next?

🌐For more insights, tips, and the latest trends in web development, don't forget to visit our blog.

↑ Top ↑