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>";
  });