Merge pull request #3952 from bergquist/table_html_escape

Escape html in table panel

CHANGELOG.md

@@ -18,6 +18,7 @@
 * **snapshot**: Annotations are now included in snapshots, closes [#3635](https://github.com/grafana/grafana/issues/3635)
 * **snapshot**: Annotations are now included in snapshots, closes [#3635](https://github.com/grafana/grafana/issues/3635)
 * **Admin**: Admin can now have global overview of Grafana setup, closes [#3812](https://github.com/grafana/grafana/issues/3812)
 * **Admin**: Admin can now have global overview of Grafana setup, closes [#3812](https://github.com/grafana/grafana/issues/3812)
 * **graph**: Right side legend height is now fixed at row height, closes [#1277](https://github.com/grafana/grafana/issues/1277)
 * **graph**: Right side legend height is now fixed at row height, closes [#1277](https://github.com/grafana/grafana/issues/1277)
+* **Table**: All content in table panel is now html escaped, closes [#3673](https://github.com/grafana/grafana/issues/3673)
 
 
 ### Bug fixes
 ### Bug fixes
 * **Playlist**: Fix for memory leak when running a playlist, closes [#3794](https://github.com/grafana/grafana/pull/3794)
 * **Playlist**: Fix for memory leak when running a playlist, closes [#3794](https://github.com/grafana/grafana/pull/3794)

public/app/plugins/panel/table/renderer.ts

@@ -25,7 +25,7 @@ export class TableRenderer {
   }
   }
 
 
   defaultCellFormater(v) {
   defaultCellFormater(v) {
-    if (v === null || v === void 0) {
+    if (v === null || v === void 0 || v === undefined) {
       return '';
       return '';
     }
     }
 
 
@@ -36,7 +36,6 @@ export class TableRenderer {
     return v;
     return v;
   }
   }
 
 
-
   createColumnFormater(style) {
   createColumnFormater(style) {
     if (!style) {
     if (!style) {
       return this.defaultCellFormater;
       return this.defaultCellFormater;
@@ -97,6 +96,7 @@ export class TableRenderer {
 
 
   renderCell(columnIndex, value, addWidthHack = false) {
   renderCell(columnIndex, value, addWidthHack = false) {
     value = this.formatColumnValue(columnIndex, value);
     value = this.formatColumnValue(columnIndex, value);
+    value = _.escape(value);
     var style = '';
     var style = '';
     if (this.colorState.cell) {
     if (this.colorState.cell) {
       style = ' style="background-color:' + this.colorState.cell + ';color: white"';
       style = ' style="background-color:' + this.colorState.cell + ';color: white"';

public/app/plugins/panel/table/specs/renderer_specs.ts

@@ -11,6 +11,7 @@ describe('when rendering table', () => {
       {text: 'Value'},
       {text: 'Value'},
       {text: 'Colored'},
       {text: 'Colored'},
       {text: 'Undefined'},
       {text: 'Undefined'},
+      {text: 'String'}
     ];
     ];
 
 
     var panel = {
     var panel = {
@@ -35,6 +36,10 @@ describe('when rendering table', () => {
           colorMode: 'value',
           colorMode: 'value',
           thresholds: [50, 80],
           thresholds: [50, 80],
           colors: ['green', 'orange', 'red']
           colors: ['green', 'orange', 'red']
+        },
+        {
+          pattern: 'String',
+          type: 'string',
         }
         }
       ]
       ]
     };
     };
@@ -67,11 +72,26 @@ describe('when rendering table', () => {
     });
     });
 
 
     it('colored cell should have style', () => {
     it('colored cell should have style', () => {
-        var html = renderer.renderCell(2, 85);
-        expect(html).to.be('<td style="color:red">85.0</td>');
+      var html = renderer.renderCell(2, 85);
+      expect(html).to.be('<td style="color:red">85.0</td>');
+    });
+
+    it('unformated undefined should be rendered as string', () => {
+      var html = renderer.renderCell(3, 'value');
+      expect(html).to.be('<td>value</td>');
+    });
+
+    it('string style with escape html should return escaped html', () => {
+      var html = renderer.renderCell(4, "&breaking <br /> the <br /> row");
+      expect(html).to.be('<td>&amp;breaking &lt;br /&gt; the &lt;br /&gt; row</td>');
+    });
+
+    it('undefined formater should return escaped html', () => {
+      var html = renderer.renderCell(3, "&breaking <br /> the <br /> row");
+      expect(html).to.be('<td>&amp;breaking &lt;br /&gt; the &lt;br /&gt; row</td>');
     });
     });
 
 
-    it('unformated undefined should be rendered as -', () => {
+    it('undefined value should render as -', () => {
       var html = renderer.renderCell(3, undefined);
       var html = renderer.renderCell(3, undefined);
       expect(html).to.be('<td></td>');
       expect(html).to.be('<td></td>');
     });
     });