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

Question

我使用 Angular 作为前端，使用 Node 作为后端。我从 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图书馆。在您的 Controller 中，您可以指定您希望信任从 MySQL 检索的 HTML 数据:

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

在您的模板中，请务必使用 ng-bind-html 进行绑定(bind):

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

如果您绝对需要，可以对整个应用程序禁用$sce，但是出于安全目的，强烈不鼓励这样做。为此，请注入(inject) $sceProvider，将以下行添加到主模块的配置 block 中:

$sceProvider.enabled(false);

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