停止使用 AngularJS 在表单中发布 html 标签答案

【问题标题】：Stop posting html tags in form using AngularJS停止使用 AngularJS 在表单中发布 html 标签
【发布时间】：2015-03-03 18:42:12
【问题描述】：

我有一个表单，我希望用户无法在其中输入 html 标签或脚本并在 angularjs 中提交表单。为此，我正在使用$sanitize，但它不起作用。

这是我的表格

<html>

  <head>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-app="birthdayToDo" ng-controller="main">
    <h1>Hello Plunker!</h1>
    <form name="testForm" ng-submit="submitForm(testForm.$valid)" novalidate>
      <input type="text" name="name" ng-model="testText"/>
        <p ng-show="testForm.name.$dirty && testForm.name.$invalid && testForm.submitted" class="error">
          Invalid Input
        </p>
      <input type="submit"  value="Save"/>
    </form>
  </body>
</html>

一旦他输入无效输入，它就会显示一条错误消息。我正在使用这个概念

$scope.SanitizeDemo=function() {
   return $sce.trustAsHtml($scope.testText);
   };

My Plunker

【问题讨论】：

你想要什么？你想阻止用户输入html标签吗？为什么？
@WayneEllery：是的。我不希望用户输入 html 标签或脚本。比如如果他想输入，那么表单应该是无效的。而且我也被限制使用正则表达式。
这样做的原因是什么？
因为如果他在名称字段中输入一些脚本，那么在显示名称列表时它将显示脚本而不是有效名称。
最好的做法是使用白名单。这是一个正则表达式，它将说明允许哪些字符，而不是一个黑名单，说明不允许哪些字符/字符串。您应该使用白名单

标签： javascript jquery html angularjs forms

【解决方案1】：

我认为你的做法是错误的。在 angularjs 和后端使用白名单正则表达式来验证输入。

为了安全起见，最佳做法是为每个字段设置一个正则表达式，该表达式只允许某些有效输入。一个简单的名字是/^[a-z ,.'-]+$/i。这将在服务器端，以防止发送任何无效的数据。这也可以放在客户端进行验证。

默认情况下，Angularjs 在使用{{}} 来防止XSS 时对输出进行编码，因此<b>abs</b> 将按原样显示，从安全角度来看，这是您想要防止第三方脚本在您的页面上执行的。

在某些情况下，您可能希望允许输出 html 并安全地允许它，但在这种情况下，您可以将 ng-bind-html 与 ng-sanitize 一起使用，而无需直接使用 $sce。

【讨论】：