TextPanel: Fixes issue with template variable value not properly html escaped (#20588)

* sanitize html after replacing variables

* TextPanel: Always html escape variable values

public/app/features/templating/specs/template_srv.test.ts

@@ -268,6 +268,14 @@ describe('templateSrv', () => {
     });
   });
 
+  describe('html format', () => {
+    it('should encode values html escape sequences', () => {
+      initTemplateSrv([{ type: 'query', name: 'test', current: { value: '<script>alert(asd)</script>' } }]);
+      const target = _templateSrv.replace('$test', {}, 'html');
+      expect(target).toBe('&lt;script&gt;alert(asd)&lt;/script&gt;');
+    });
+  });
+
   describe('format variable to string values', () => {
     it('single value should return value', () => {
       const result = _templateSrv.formatValue('test');

public/app/features/templating/template_srv.ts

@@ -1,6 +1,7 @@
 import kbn from 'app/core/utils/kbn';
 import _ from 'lodash';
 import { variableRegex } from 'app/features/templating/variable';
+import { escapeHtml } from 'app/core/utils/text';
 import { ScopedVars, TimeRange } from '@grafana/data';
 
 function luceneEscape(value: string) {
@@ -165,6 +166,12 @@ export class TemplateSrv {
         }
         return value;
       }
+      case 'html': {
+        if (_.isArray(value)) {
+          return escapeHtml(value.join(', '));
+        }
+        return escapeHtml(value);
+      }
       case 'json': {
         return JSON.stringify(value);
       }