SQL Injection Example

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/vs.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script src="http://pc035860.github.io/angular-highlightjs/angular-highlightjs.js"></script>
<div ng-app="app" ng-controller="controller">
    <div>
        <div class="row">
            <div class="col-sm-4">Email
                <input type="text" class="form-control" ng-model="email">
            </div>
            <div class="col-sm-4">Password
                <input type="text" class="form-control" ng-model="password">
            </div>
        </div>
        <br>
        <div hljs include="'compile-me'" compile="true" language="sql"></div>
            With manual interpolate
            <div highlight="">
                SELECT * FROM dbo.Users WHERE Email = '{{email}}'
                AND Password = '{{password}}'
            </div>
    </div>
    <script type="text/ng-template" id="compile-me">
        SELECT * FROM dbo.Users WHERE Email = '{{email}}'
        AND Password = '{{password}}'
    </script>
</div>

JavaScript

var app = angular.module("app", ['hljs']);
    app.controller("controller", function($scope) {
        $scope.email = "user@domain.com";
        $scope.password = "' OR 1=1 --";
    });
    app.directive('highlight', function($interpolate, $window){
        return {
        restrict: 'EA',
        scope: true,
        compile: function (tElem, tAttrs) {
          var interpolateFn = $interpolate(tElem.html(), true);
          tElem.html(''); // disable automatic intepolation bindings
                        
          return function(scope, elem, attrs){
            scope.$watch(interpolateFn, function (value) {
              elem.html(hljs.highlight('sql',value).value);
            });
          }
        }
      };
    });