Dynamique de la Syntaxe avec AngularJS et Highlight.js
Je suis en construction d'un site qui illustre la commune de vulnérabilités des applications telles que l'Injection SQL. Je suis à l'aide de AngularJS et highlight.js à créer des exemples.
Comment puis-je faire à la fois et AngularJS highlight.js mise à jour de mon extrait de code?
Exemple
Ce Violon montre comment entrer dans ' OR 1=1 --
dans le champ e-Mail pourrait changer le comportement souhaité de la requête si la saisie de l'utilisateur n'est pas validé ou désinfectés.
SELECT * FROM dbo.Users WHERE Email='{{email}}' AND Password='{{password}}'
Lorsqu'un utilisateur entre une adresse e-mail et le mot de passe, Angulaire des mises à jour de la requête. Cependant, la coloration syntaxique n'est pas à jour.
SELECT * FROM dbo.Users WHERE Email='[email protected]' AND Password=''
J'ai essayé de ré-initialisation de hljs, mais quand je fais angulaire arrête la mise à jour de la requête.
hljs.initHighlighting.called = false;
hljs.initHighlighting();
Application
<script>
var app = angular.module("app", ['hljs']);
app.controller("controller", function($scope) {
$scope.email = "[email protected]";
$scope.password = "";
})
</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>
</div>
<script type="text/ng-template" id="compile-me">
SELECT * FROM dbo.Users WHERE Email = '{{email}}'
AND Password = '{{password}}'
</script>
</div>
OriginalL'auteur Mark Good | 2014-08-30
Vous devez vous connecter pour publier un commentaire.
Dans le jsfiddle vous avez fourni vous utilisez angulaires-highlightjs qui, dans votre cas, en gros:
include
directive s'applique$compile
Par la suite aucun highglighting prend de la place - en particulier même lors de l'interpolation des modifications de contenu.
Un moyen de le résoudre est d'utiliser
source
directive deangular-highlightjs
qui est observé, mais je pense que c'est plus simple de construire une coutume directive.L'astuce ici est de faire manuellement interpoler et de mettre en évidence le contenu. J'ai mis à jour votre violon avec un simpliste
highlight
directive qui présente l'idée:OriginalL'auteur miensol
Un moyen plus simple que je viens de trouver est d'utiliser un filtre:
Alors vous pouvez dire:
L' $sce doit être injecté dans votre application, et dit Angulaire pour afficher le code HTML brut - en qui vous avez confiance.
OriginalL'auteur Upayavira