[v8.5.x] TraceView: Add key and url escaping of json tag values (#759)

2023-02-21 07:11:40 +01:00
parent cb97b1bc7b
commit f314f82791
4 changed files with 154 additions and 2 deletions
@@ -116,7 +116,7 @@ exports[`no enzyme tests`] = {
    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js:1966455998": [
      [14, 17, 13, "RegExp match", "2409514259"]
    ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js:3813002651": [
+    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js:3568627238": [
      [14, 19, 13, "RegExp match", "2409514259"]
    ],
    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js:3006381933": [
@@ -102,4 +102,22 @@ describe('<KeyValuesTable>', () => {
      }
    });
  });
+
+  it('properly escapes values', () => {
+    const data = [
+      {
+        key: 'jsonkey',
+        value: JSON.stringify({
+          '<img src=x onerror=alert(1)>': '<img src=x onerror=alert(1)>',
+          url: 'https://example.com"id=x tabindex=1 onfocus=alert(1)',
+        }),
+      },
+    ];
+    const wrapper = shallow(<KeyValuesTable data={data} />);
+    const el = wrapper.find(`.${ubInlineBlock}`);
+    expect(el.length).toBe(1);
+    expect(el.html().replace(/\n/g, '')).toMatch(
+      `<div class=\"css-7kp13n\"><div class=\"json-markup\">{    <span class=\"json-markup-key\">\"&lt;img src=x onerror=alert(1)&gt;\":</span> <span class=\"json-markup-string\">\"&lt;img src=x onerror=alert(1)&gt;\"</span>,    <span class=\"json-markup-key\">\"url\":</span> <span class=\"json-markup-string\">\"<a href=\"https://example.com%22id=x%20tabindex=1%20onfocus=alert(1)\">https://example.com&quot;id=x tabindex=1 onfocus=alert(1)</a>\"</span>}</div></div>`
+    );
+  });
 });
@@ -14,7 +14,6 @@

 import { css } from '@emotion/css';
 import cx from 'classnames';
-import jsonMarkup from 'json-markup';
 import * as React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
@@ -26,6 +25,8 @@ import { TNil } from '../../types';
 import { TraceKeyValuePair, TraceLink } from '../../types/trace';
 import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles';

+import jsonMarkup from './jsonMarkup';
+
 const copyIconClassName = 'copyIcon';

 export const getStyles = (theme: GrafanaTheme2) => {
@@ -0,0 +1,133 @@
+// The MIT License (MIT)
+//
+// Copyright (c) 2014 Mathias Buus
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+const INDENT = '    ';
+
+function inlineRule(objRule) {
+  let str = '';
+  objRule &&
+    Object.keys(objRule).forEach(function (rule) {
+      str += rule + ':' + objRule[rule] + ';';
+    });
+  return str;
+}
+
+function Stylize(styleFile) {
+  function styleClass(cssClass) {
+    return 'class="' + cssClass + '"';
+  }
+
+  function styleInline(cssClass) {
+    return 'style="' + inlineRule(styleFile['.' + cssClass]) + '"';
+  }
+
+  if (!styleFile) {
+    return styleClass;
+  }
+  return styleInline;
+}
+
+function type(doc) {
+  if (doc === null) {
+    return 'null';
+  }
+  if (Array.isArray(doc)) {
+    return 'array';
+  }
+  if (typeof doc === 'string' && /^https?:/.test(doc)) {
+    return 'link';
+  }
+  if (typeof doc === 'object' && typeof doc.toISOString === 'function') {
+    return 'date';
+  }
+
+  return typeof doc;
+}
+
+function escape(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+module.exports = function (doc, styleFile) {
+  let indent = '';
+  const style = Stylize(styleFile);
+
+  let forEach = function (list, start, end, fn) {
+    if (!list.length) {
+      return start + ' ' + end;
+    }
+
+    let out = start + '\n';
+
+    indent += INDENT;
+    list.forEach(function (key, i) {
+      out += indent + fn(key) + (i < list.length - 1 ? ',' : '') + '\n';
+    });
+    indent = indent.slice(0, -INDENT.length);
+
+    return out + indent + end;
+  };
+
+  function visit(obj) {
+    if (obj === undefined) {
+      return '';
+    }
+
+    switch (type(obj)) {
+      case 'boolean':
+        return '<span ' + style('json-markup-bool') + '>' + obj + '</span>';
+
+      case 'number':
+        return '<span ' + style('json-markup-number') + '>' + obj + '</span>';
+
+      case 'date':
+        return '<span class="json-markup-string">"' + escape(obj.toISOString()) + '"</span>';
+
+      case 'null':
+        return '<span ' + style('json-markup-null') + '>null</span>';
+
+      case 'string':
+        return '<span ' + style('json-markup-string') + '>"' + escape(obj.replace(/\n/g, '\n' + indent)) + '"</span>';
+
+      case 'link':
+        return (
+          '<span ' + style('json-markup-string') + '>"<a href="' + encodeURI(obj) + '">' + escape(obj) + '</a>"</span>'
+        );
+
+      case 'array':
+        return forEach(obj, '[', ']', visit);
+
+      case 'object':
+        const keys = Object.keys(obj).filter(function (key) {
+          return obj[key] !== undefined;
+        });
+
+        return forEach(keys, '{', '}', function (key) {
+          return '<span ' + style('json-markup-key') + '>"' + escape(key) + '":</span> ' + visit(obj[key]);
+        });
+    }
+
+    return '';
+  }
+
+  return '<div ' + style('json-markup') + '>' + visit(doc) + '</div>';
+};