Bug 1579663 - Allow data url background-image in styled console logs r=nchevobbe
authorEdward Billington <billin22@uni.coventry.ac.uk>
Wed, 04 Dec 2019 09:31:54 +0000
changeset 505288 eb47fe3b844605edd50d4c587a77658debc60ca6
parent 505287 d6c086ca57803c699016d97f940c49619642b769
child 505289 6ee737ea06ad42c9c5a5bf06253b49ad16b204af
push id36881
push userdvarga@mozilla.com
push dateWed, 04 Dec 2019 16:22:31 +0000
treeherdermozilla-central@13fb375eaf14 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1579663
milestone73.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1579663 - Allow data url background-image in styled console logs r=nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D55376
devtools/client/webconsole/components/Output/GripMessageBody.js
devtools/client/webconsole/test/node/components/console-api-call.test.js
--- a/devtools/client/webconsole/components/Output/GripMessageBody.js
+++ b/devtools/client/webconsole/components/Output/GripMessageBody.js
@@ -99,21 +99,21 @@ function GripMessageBody(props) {
 const allowedStylesRegex = new RegExp(
   "^(?:-moz-)?(?:background|border|box|clear|color|cursor|display|float|font|line|" +
     "margin|padding|text|transition|outline|white-space|word|writing|" +
     "(?:min-|max-)?width|(?:min-|max-)?height)"
 );
 
 // Regular expression that matches the forbidden CSS property values.
 const forbiddenValuesRegexs = [
-  // url(), -moz-element()
-  /\b(?:url|(?:-moz-)?element)[\s('"]+/gi,
+  // -moz-element()
+  /\b((?:-moz-)?element)[\s('"]+/gi,
 
   // various URL protocols
-  /['"(]*(?:chrome|resource|about|app|data|https?|ftp|file):+\/*/gi,
+  /['"(]*(?:chrome|resource|about|app|https?|ftp|file):+\/*/gi,
 ];
 
 function cleanupStyle(userProvidedStyle, createElement) {
   // Use a dummy element to parse the style string.
   const dummy = createElement("div");
   dummy.style = userProvidedStyle;
 
   // Return a style object as expected by React DOM components, e.g.
--- a/devtools/client/webconsole/test/node/components/console-api-call.test.js
+++ b/devtools/client/webconsole/test/node/components/console-api-call.test.js
@@ -70,16 +70,32 @@ describe("ConsoleAPICall component:", ()
       const secondElementStyle = elements.eq(1).prop("style");
       // Allowed styles are applied accordingly on the second element.
       expect(secondElementStyle.color).toBe(`red`);
       expect(secondElementStyle["line-height"]).toBe("1.5");
       // Forbidden styles are not applied.
       expect(secondElementStyle.background).toBe(undefined);
     });
 
+    it("renders string grips with data-url background", () => {
+      const message = stubPreparedMessages.get("console.log(%cfoobar)");
+
+      const dataURL =
+        "url(data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAaZJREFUKBV9UjFLQlEUPueaaUUEDZESNTYI9RfK5oimIGxJcy4IodWxpeZKiHBwc6ghIiIaWqNB/ANiBSU6vHfvU+89nSPpINKB996993zfPef7zkP4CyLCzl02Y7VNg4aE8y2QoYrTVJg+ublCROpjURb0ko11mt2i05BkEDjt+CGgvzUYehrvqtTUefFD8KpXoemK1ich1MDALppIPITROARqlwzWJKdbtihYIWH7dv/AenRBAdYmOriKmUJDEv1oHaVnOy39bn27wJjsfLl0qawHaWkFNOWGCUKcOSs0uM0c6wPyWC+H4k2Ce+b+w89yMDKC0LPzWadgORTJxh8YM5ITIdUmw4b5jt9MssaJrdD9DtZGMvjQ+zEbvUoBVgWj2K2CWGsDeyqih4n1zeyk1S4vlcDCteRRbGwe7z2yO0lOiOU5YA3SklTgYee5/WVw1IVoZGnxrVTv+e4dpmIyB74xSayPBQ8GS5qvZgIRjPFfUQlHQ+s9kpSUil9bOxl2U0aQIO0Mf6tA6hoi4Xsw7QfGsHv4OiAJ8b/4XNmeC9pYRgTvF+HgISP3T9PvAAAAAElFTkSuQmCC)";
+
+      message.userProvidedStyles[0] = `background-image: ${dataURL}`;
+
+      const wrapper = render(ConsoleApiCall({ message, serviceContainer }));
+      const elements = wrapper.find(".objectBox-string");
+      const firstElementStyle = elements.eq(0).prop("style");
+
+      // data-url background applied
+      expect(firstElementStyle["background-image"]).toBe(dataURL);
+    });
+
     it("renders custom styled logs with empty style as expected", () => {
       const message = stubPreparedMessages.get(
         'console.log("%cHello%c|%cWorld")'
       );
       const wrapper = render(ConsoleApiCall({ message, serviceContainer }));
 
       const elements = wrapper.find(".objectBox-string");
       expect(elements.text()).toBe("Hello|World");