JSFiddle - React, Tailwind, and code Playground

by gkohen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body ng-app="sceTest" ng-controller="MainCtrl">
    <p class="ul">Not using $sce:</p>
    <div>{{greeting}}</div>
    <p class="ul">Using $sce:</p>
    <div ng-bind-html="htmlGreeting"></div>
</body>

CSS

.ul {
    text-decoration: underline;
}
div + .ul {
    margin-top: 50px;
}
h2 {
    color: pink;
}

JavaScript

angular.module('sceTest', [])
.config(function($sceProvider){
	$sceProvider.enabled(false);
})
    .controller('MainCtrl', function($scope, $sce) {
        $scope.greeting = "<h2>Hello World</h2><p>This <strong>is</strong> a test</p>";
        $scope.htmlGreeting = "<h2>Hello World</h2><p>This is a test, and <script>alert(\'xsssss11\')</script><strong>this goes in bold</strong></p>";
    });