动态语法与AngularJS和Highlight.js突出 [英] Dynamic Syntax Highlighting with AngularJS and Highlight.js

问题描述

我建立，说明常见的应用程序漏洞，如SQL注入的网站。我使用的 AngularJS 和 highlight.js ，以创建交互式的例子。

的我怎样才能使双方AngularJS和highlight.js更新我的code段？的

示例

这小提琴演示了如何输入'OR 1 = 1 - 在电子邮件字段可以更改查询的预期行为。

  SELECT * FROM dbo.Users其中，email ='{{EMAIL}}'和密码='{{密码}}'
 

当用户输入一个电子邮件地址和密码，角更新查询。但是，语法高亮不更新。

  SELECT * FROM dbo.Users WHERE Email='[e-mail]'和密码=''
 

我试图重新初始化hljs，但是当我做角停止更新查询。

  hljs.initHighlighting.called = FALSE;
hljs.initHighlighting（）;
 

应用程序

 ＆LT;脚本＆GT;
    VAR应用= angular.module（应用程序，['hljs']）;
    app.controller（控制功能（$范围）{
        $ scope.email =[e-mail];
        $ scope.password =;
    }）
＆LT; / SCRIPT＆GT;
＆LT; D​​IV NG-应用=应用程序NG控制器=控制器＆GT;
    ＆LT; D​​IV＆GT;
        ＆LT; D​​IV CLASS =行＆GT;
            ＆LT; D​​IV CLASS =COL-SM-4＆GT;电邮
                ＆LT;输入类型=文本级=表格控NG模型=电子邮件＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =COL-SM-4＆GT;密码
                ＆LT;输入类型=文本级=表格控NG模型=密码＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; BR＆GT;
        ＆LT; D​​IV hljs包括='编译我'编译=真LANGUAGE =SQL＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;脚本类型=文/ NG-模板ID =编译我＆GT;
        SELECT * FROM dbo.Users其中，email ='{{EMAIL}}'
        和密码='{{密码}}'
    ＆LT; / SCRIPT＆GT;
＆LT; / DIV＆GT;
 




解决方案

在的jsfiddle您提供您正在使用角highlightjs 而你的情况基本上是：

1. 获取您所提供模板包含指令适用


2. highlightjs 的模板产生HTML标记与库API强调具有特定语言正确的风格元素


3. 在突出显示HTML标记然后传递到angularjs $编译

插值含量的变化，即使在特定

-

事后没有highglighting发生。

要解决这个问题的方法之一是使用源指令从角highlightjs 这是观察到，但我认为这是简单的建立一个自定义指令。

这里的窍门是手动插值并突出显示的内容。我已经更新您的拨弄用一个简单的高亮指令，presents的理念是：

  app.directive（'亮点'，函数（$插值，$窗口）{
    返回{
    限制：EA，
    适用范围：真，
    编译：功能（特莱姆，tAttrs）{
      VAR interpolateFn = $插值（tElem.html（），TRUE）;
      tElem.html（''）; //停止自动intepolation      返回功能（范围，ELEM，ATTRS）{
        范围。$腕表（interpolateFn，功能（价值）{
          elem.html（hljs.highlight（'SQL'，值）。价值）;
        }）;
      }
    }
  };
}）;
 

I am building a site that illustrates common application vulnerabilities such as SQL Injection. I am using AngularJS and highlight.js to create interactive examples.

How can I make both AngularJS and highlight.js update my code snippets?

Example

This Fiddle demonstrates how entering ' OR 1=1 -- in the Email field could change the intended behavior of the query if the user's input is not validated or sanitized.

SELECT * FROM dbo.Users WHERE Email='{{email}}' AND Password='{{password}}'  

When a user enters an email address and password, Angular updates the query. However, syntax highlighting does not update.

SELECT * FROM dbo.Users WHERE Email='[e-mail]' AND Password=''

I tried re-initializing hljs, but when I do angular stops updating the query.

hljs.initHighlighting.called = false;
hljs.initHighlighting();

Application

<script>
    var app = angular.module("app", ['hljs']);
    app.controller("controller", function($scope) {
        $scope.email = "[e-mail]";
        $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>

解决方案

In the jsfiddle you have provided you're using angular-highlightjs which in your case basically:

1. Fetches the template you have provided with include directive applies
2. Invokes highlightjs library API on the template which produces HTML markup with highlighted elements having correct style for particular language
3. The highlighted HTML markup is then passed over to angularjs $compile

Afterwards no highglighting takes place - in particular even when interpolated content changes.

One way to solve it is to use source directive from angular-highlightjs which is observed but I think it's simpler to build a custom directive.

The trick here is to manually interpolate and highlight content. I've updated your fiddle with a simplistic highlight directive that presents the idea:

app.directive('highlight', function($interpolate, $window){
    return {
    restrict: 'EA',
    scope: true,
    compile: function (tElem, tAttrs) {
      var interpolateFn = $interpolate(tElem.html(), true);
      tElem.html(''); // stop automatic intepolation

      return function(scope, elem, attrs){
        scope.$watch(interpolateFn, function (value) {
          elem.html(hljs.highlight('sql',value).value);
        });
      }
    }
  };
});

这篇关于动态语法与AngularJS和Highlight.js突出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！