From bde4b76c167c0b45e1f77b75a8270afce0da5a6a Mon Sep 17 00:00:00 2001
From: Benjamin Schweizer <benjamin.schweizer@eng-its.de>
Date: Tue, 22 Jan 2019 15:09:58 +0100
Subject: [PATCH] based on encodeURIComponent() using strict RFC 3986
 sub-delims

---
 docs/sources/reference/templating.md               |  2 +-
 .../features/templating/specs/template_srv.test.ts |  2 +-
 public/app/features/templating/template_srv.ts     | 14 ++++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md
index 900288d15a7..3ef32b1b10f 100644
--- a/docs/sources/reference/templating.md
+++ b/docs/sources/reference/templating.md
@@ -52,7 +52,7 @@ Filter Option | Example | Raw | Interpolated | Description
 `csv`| ${servers:csv} |  `'test1', 'test2'` | `test1,test2` | Formats multi-value variable as a comma-separated string
 `distributed`| ${servers:distributed} | `'test1', 'test2'` | `test1,servers=test2` | Formats multi-value variable in custom format for OpenTSDB.
 `lucene`| ${servers:lucene} | `'test', 'test2'` | `("test" OR "test2")` | Formats multi-value variable as a lucene expression.
-`percentencode` | ${servers:percentencode} |  `'foo()bar BAZ', 'test2'` | `{foo%28%29bar%20BAZ%2Ctest2}` | Formats multi-value variable into a glob, percent-escaped
+`percentencode` | ${servers:percentencode} |  `'foo()bar BAZ', 'test2'` | `{foo%28%29bar%20BAZ%2Ctest2}` | Formats multi-value variable into a glob, percent-encoded.
 
 Test the formatting options on the [Grafana Play site](http://play.grafana.org/d/cJtIfcWiz/template-variable-formatting-options?orgId=1).
 
diff --git a/public/app/features/templating/specs/template_srv.test.ts b/public/app/features/templating/specs/template_srv.test.ts
index 8d6bf5ed668..4288b5f3928 100644
--- a/public/app/features/templating/specs/template_srv.test.ts
+++ b/public/app/features/templating/specs/template_srv.test.ts
@@ -277,7 +277,7 @@ describe('templateSrv', () => {
 
     it('multi value and percentencode format should render percent-encoded string', () => {
       const result = _templateSrv.formatValue(['foo()bar BAZ', 'test2'], 'percentencode');
-      expect(result).toBe('%7bfoo%28%29bar%20BAZ%2ctest2%7d');
+      expect(result).toBe('%7Bfoo%28%29bar%20BAZ%2Ctest2%7D');
     });
 
     it('slash should be properly escaped in regex format', () => {
diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts
index a969b058d7e..07656924c9c 100644
--- a/public/app/features/templating/template_srv.ts
+++ b/public/app/features/templating/template_srv.ts
@@ -77,10 +77,12 @@ export class TemplateSrv {
     return '(' + quotedValues.join(' OR ') + ')';
   }
 
-  // like encodeURIComponent() but for all characters except alpha-numerics
-  encodeURIQueryValue(str) {
-    return str.replace(/[^a-z0-9]/gi, function(c) {
-      return '%' + c.charCodeAt(0).toString(16);
+  // encode string according to RFC 3986; in contrast to encodeURIComponent()
+  // also the sub-delims "!", "'", "(", ")" and "*" are encoded;
+  // unicode handling uses UTF-8 as in ECMA-262.
+  encodeURIComponentStrict(str) {
+    return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
+      return '%' + c.charCodeAt(0).toString(16).toUpperCase();
     });
   }
 
@@ -128,9 +130,9 @@ export class TemplateSrv {
       case 'percentencode': {
         // like glob, but url escaped
         if (_.isArray(value)) {
-          return this.encodeURIQueryValue('{' + value.join(',') + '}');
+          return this.encodeURIComponentStrict('{' + value.join(',') + '}');
         }
-        return this.encodeURIQueryValue(value);
+        return this.encodeURIComponentStrict(value);
       }
       default: {
         if (_.isArray(value)) {