Issue openmediavault#1750: Log viewer cuts messages with special HTML…

… characters (openmediavault#1758)

The `text` datatable cell template will escape all special HTML characters. If HTML code should be rendered in a datatable column, use the `html` template.

Fixes: openmediavault#1750

Signed-off-by: Volker Theile <votdev@gmx.de>

deb/openmediavault-clamav/debian/control

@@ -9,7 +9,7 @@ Homepage: https://www.openmediavault.org
 
 Package: openmediavault-clamav
 Architecture: all
-Depends: openmediavault (>= 7.0), clamav-daemon (>= 0.102), clamav-freshclam, clamdscan
+Depends: openmediavault (>= 7.1), clamav-daemon (>= 0.102), clamav-freshclam, clamdscan
 Priority: optional
 Description: openmediavault ClamAV plugin
  Clam AntiVirus is an anti-virus toolkit for Unix.

deb/openmediavault-clamav/usr/share/openmediavault/workbench/log.d/clamav.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault-ftp/debian/control

@@ -9,7 +9,7 @@ Homepage: https://www.openmediavault.org
 
 Package: openmediavault-ftp
 Architecture: all
-Depends: openmediavault (>= 7.0), proftpd-basic, proftpd-mod-vroot
+Depends: openmediavault (>= 7.1), proftpd-basic, proftpd-mod-vroot
 Priority: optional
 Description: openmediavault FTP-Server plugin
  ProFTPD is a powerful modular FTP/SFTP/FTPS server.

deb/openmediavault-ftp/usr/share/openmediavault/workbench/log.d/proftpd.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault-k8s/debian/control

@@ -9,7 +9,7 @@ Homepage: https://www.openmediavault.org
 
 Package: openmediavault-k8s
 Architecture: all
-Depends: openmediavault (>= 7.0.4), bash, git
+Depends: openmediavault (>= 7.1), bash, git
 Priority: optional
 Description: openmediavault Kubernetes plugin
  Kubernetes is an open-source platform for orchestrating and

deb/openmediavault-k8s/usr/share/openmediavault/workbench/log.d/k3s.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault-nut/debian/control

@@ -9,7 +9,7 @@ Homepage: https://www.openmediavault.org
 
 Package: openmediavault-nut
 Architecture: all
-Depends: openmediavault (>= 7.0), nut, udev
+Depends: openmediavault (>= 7.1), nut, udev
 Priority: optional
 Description: openmediavault Network UPS Tools (NUT) plugin
  Network UPS Tools (NUT) is a client/server monitoring system that

deb/openmediavault-nut/usr/share/openmediavault/workbench/log.d/nut.yaml

@@ -22,6 +22,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/apt_term.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: rownum

deb/openmediavault/usr/share/openmediavault/workbench/log.d/auth.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/boot.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/daemon.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/dmesg.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/messages.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/rsync.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/rsyncd.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/smart.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/usr/share/openmediavault/workbench/log.d/syslog.yaml

@@ -13,6 +13,7 @@ data:
     sortable: true
     prop: message
     flexGrow: 2
+    cellTemplateName: text
   sorters:
   - dir: desc
     prop: ts

deb/openmediavault/workbench/src/app/shared/components/datatable/datatable.component.html

@@ -82,6 +82,11 @@
 
 <ng-template #textTpl
              let-value="value">
+  <span [innerHTML]="value | escapeHtml"></span>
+</ng-template>
+
+<ng-template #htmlTpl
+             let-value="value">
   <span [innerHTML]="value | sanitizeHtml"></span>
 </ng-template>
 

deb/openmediavault/workbench/src/app/shared/components/datatable/datatable.component.ts

@@ -70,6 +70,8 @@ export class DatatableComponent implements Datatable, OnInit, OnDestroy, OnChang
   table: NgxDatatableComponent;
   @ViewChild('textTpl', { static: true })
   textTpl: TemplateRef<any>;
+  @ViewChild('htmlTpl', { static: true })
+  htmlTpl: TemplateRef<any>;
   @ViewChild('checkIconTpl', { static: true })
   checkIconTpl: TemplateRef<any>;
   @ViewChild('checkBoxTpl', { static: true })
@@ -472,6 +474,7 @@ export class DatatableComponent implements Datatable, OnInit, OnDestroy, OnChang
   protected initTemplates(): void {
     this.cellTemplates = {
       text: this.textTpl,
+      html: this.htmlTpl,
       checkIcon: this.checkIconTpl,
       checkBox: this.checkBoxTpl,
       join: this.joinTpl,

deb/openmediavault/workbench/src/app/shared/models/datatable-column.type.ts

@@ -22,7 +22,9 @@ export type DatatableColumn = TableColumn & {
   hidden?: boolean;
   /**
    * The name of the template.
-   * text - Renders plain text.
+   * text - Renders plain text. HTML special characters like "&", "<",
+   *        ">", '"', or "'" will be escaped.
+   * html - Renders HTML code.
    * buttonToggle - Renders on/off toggles with the appearance of a button.
    *                {
    *                  ...
@@ -93,6 +95,7 @@ export type DatatableColumn = TableColumn & {
    */
   cellTemplateName?:
     | 'text'
+    | 'html'
     | 'buttonToggle'
     | 'checkIcon'
     | 'placeholder'

deb/openmediavault/workbench/src/app/shared/pipes/escape-html.pipe.spec.ts

@@ -0,0 +1,24 @@
+import { EscapeHtmlPipe } from '~/app/shared/pipes/escape-html.pipe';
+
+describe('TrustHtmlPipe', () => {
+  const pipe: EscapeHtmlPipe = new EscapeHtmlPipe();
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('transform value (1)', () => {
+    const value = null;
+    expect(pipe.transform(value)).toBe(value);
+  });
+
+  it('transform value (2)', () => {
+    const value = 1;
+    expect(pipe.transform(value)).toBe(value);
+  });
+
+  it('transform value (3)', () => {
+    const value = '<f..tp..... foo bar';
+    expect(pipe.transform(value)).toBe('&lt;f..tp..... foo bar');
+  });
+});

deb/openmediavault/workbench/src/app/shared/pipes/escape-html.pipe.ts

@@ -0,0 +1,41 @@
+/**
+ * This file is part of OpenMediaVault.
+ *
+ * @license   http://www.gnu.org/licenses/gpl.html GPL Version 3
+ * @author    Volker Theile <volker.theile@openmediavault.org>
+ * @copyright Copyright (c) 2009-2024 Volker Theile
+ *
+ * OpenMediaVault is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * OpenMediaVault is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+import * as _ from 'lodash';
+
+@Pipe({
+  name: 'escapeHtml'
+})
+export class EscapeHtmlPipe implements PipeTransform {
+  /**
+   * Converts the characters "&", "<", ">", '"', and "'" in string to
+   * their corresponding HTML entities.
+   *
+   * @param value The value to be converted. If it is not a string,
+   *   then the value will be bypassed without converting special HTML
+   *   characters to their corresponding HTML entities.
+   * @return The converted value if it is a string, otherwise the
+   *   origin value will be bypassed.
+   */
+  transform(value: any): any {
+    if (_.isString(value)) {
+      return _.escape(value);
+    }
+    return value;
+  }
+}

deb/openmediavault/workbench/src/app/shared/pipes/pipes.module.ts

@@ -8,6 +8,7 @@ import { CountPipe } from '~/app/shared/pipes/count.pipe';
 import { Cron2humanPipe } from '~/app/shared/pipes/cron2human.pipe';
 import { DefaultToPipe } from '~/app/shared/pipes/default-to.pipe';
 import { EncodeUriComponentPipe } from '~/app/shared/pipes/encode-uri-component.pipe';
+import { EscapeHtmlPipe } from '~/app/shared/pipes/escape-html.pipe';
 import { HttpErrorResponsePipe } from '~/app/shared/pipes/http-error-response.pipe';
 import { JoinPipe } from '~/app/shared/pipes/join.pipe';
 import { LocaleDatePipe } from '~/app/shared/pipes/locale-date.pipe';
@@ -53,7 +54,8 @@ import { UpperFirstPipe } from '~/app/shared/pipes/upper-first.pipe';
     SortPipe,
     CountPipe,
     SplitPipe,
-    Cron2humanPipe
+    Cron2humanPipe,
+    EscapeHtmlPipe
   ],
   imports: [CommonModule],
   exports: [
@@ -81,7 +83,8 @@ import { UpperFirstPipe } from '~/app/shared/pipes/upper-first.pipe';
     SortPipe,
     CountPipe,
     SplitPipe,
-    Cron2humanPipe
+    Cron2humanPipe,
+    EscapeHtmlPipe
   ],
   providers: [
     ToBooleanPipe,
@@ -108,7 +111,8 @@ import { UpperFirstPipe } from '~/app/shared/pipes/upper-first.pipe';
     SortPipe,
     CountPipe,
     SplitPipe,
-    Cron2humanPipe
+    Cron2humanPipe,
+    EscapeHtmlPipe
   ]
 })
 export class PipesModule {}