从 mySQL 渲染 HTML 以显示在页面上 Angular 和 JavaScript

Question

我在前端使用 Angular，在后端使用节点。我从 mySql 数据库中获取数据，我手动将其存储为文本格式，但上面带有 HTML 标记，即：

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

数据目前为 JSON 格式，即：

{
  "data": [
    {
      "id": 1,
      "sort_order": 0,
      "content_type": "main_message",
      "heading": "Welcome to our site ",
      "content": "<ul>
                      <li>item1</li>
                      <li>item2</li>
                      <li>item3</li>
                  </ul>",
      "page_name": "home",
      "author_id": "abhatti",
      "date_created": "2017-03-13T15:12:00.000Z",
      "date_modified": "2017-03-13T15:12:00.000Z",
      "modified_by": "abhatti"
    },
    {
      "id": 2,
      "sort_order": 0,
      "content_type": "main_body_content",
      "heading": "Announcements",
      "content": "",
      "page_name": "home",
      "author_id": "Robert",
      "date_created": "2016-12-31T17:00:00.000Z",
      "date_modified": "2017-03-11T07:08:00.000Z",
      "modified_by": "Danny"
    }, 

当我将数据放入表格时，我希望表格以 HTML 格式显示数据，但它以原始格式显示，页面上的所有 HTML 标记都像这样显示

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

但我想要这样的东西

• 项目1
• 项目2
• 项目3

如何正确转换数据以便浏览器将其读取为 HTML？现在它被作为一个字符串放入。

Answer 1

默认情况下，AngularJS (1.2+) 会将 HTML 插入文本。 这个函数内置在 AngularJS 中以避免 XSS 问题，但是有时（例如这里的情况）您可能实际上希望在模板中呈现 HTML，而不是将其显示为文本。 p>

为此，请查看 AngularJS 的 $sce 库。在您的控制器中，您可以指定您希望信任从 MySQL 检索到的数据为 HTML：

$scope.explicitlyTrustedHtml = $sce.trustAsHtml('<div><span>Hello World!</span></div>');

请务必在您的模板中使用ng-bind-html进行绑定：

<div ng-controller="MyController as myCtrl">
    <div ng-bind-html="myCtrl.explicitlyTrustedHtml"></div>
</div>

如果您绝对需要，您可以为整个应用程序禁用$sce，但出于安全考虑，不建议这样做高度。为此注入$sceProvider，将以下行添加到主模块的配置块中：

$sceProvider.enabled(false);

虽然$sce 库很有帮助，但我的建议是找到一种更好的方法来重构 MySQL 中的数据，这样您就不会要求它提供 HTML。如果您只读取数据 - 从安全角度来看，您可能没问题。但是，如果您允许用户从您的 AngularJS 应用程序中发布 HTML sn-ps 并将这些 sn-ps 保存在 MySQL 中，那么您就是在要求 XSS 攻击。