Bug 762593 - DEVTOOLS patch. Adds tests and logic to output warning messages for insecure passwords to web console. r=msucan

browser/devtools/webconsole/test/Makefile.in

@@ -145,6 +145,8 @@ MOCHITEST_BROWSER_FILES = \
 	browser_webconsole_bug_686937_autocomplete_JSTerm_helpers.js \
 	browser_webconsole_cached_autocomplete.js \
 	browser_console_navigation_marker.js \
+	browser_webconsole_bug_762593_insecure_passwords_web_console_warning.js \
+	browser_webconsole_bug_762593_insecure_passwords_about_blank_web_console_warning.js \
 	head.js \
 	$(NULL)
 
@@ -244,6 +246,10 @@ MOCHITEST_BROWSER_FILES += \
 	test-bug-837351-security-errors.html \
 	test-bug-869003-top-window.html \
 	test-bug-869003-iframe.html \
+	test-iframe-762593-insecure-form-action.html \
+	test-iframe-762593-insecure-frame.html \
+	test-bug-762593-insecure-passwords-web-console-warning.html \
+	test-bug-762593-insecure-passwords-about-blank-web-console-warning.html \
 	test-consoleiframes.html \
 	test-iframe1.html \
 	test-iframe2.html \

browser/devtools/webconsole/test/browser_webconsole_bug_762593_insecure_passwords_about_blank_web_console_warning.js

@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+/*
+ * Tests that errors about insecure passwords are logged
+ * to the web console
+ */
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-bug-762593-insecure-passwords-about-blank-web-console-warning.html";
+const INSECURE_PASSWORD_MSG = "Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.";
+
+function test() {
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad(aEvent) {
+    browser.removeEventListener(aEvent.type, onLoad, true);
+    openConsole(null, function testInsecurePasswordErrorLogged (hud) {
+      waitForMessages({
+        webconsole: hud,
+        messages: [
+          {
+            name: "Insecure password error displayed successfully",
+            text: INSECURE_PASSWORD_MSG,
+            category: CATEGORY_SECURITY,
+            severity: SEVERITY_WARNING
+          },
+        ],
+      }).then(finishTest);
+    });
+  }, true);
+}

browser/devtools/webconsole/test/browser_webconsole_bug_762593_insecure_passwords_web_console_warning.js

@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+/*
+ * Tests that errors about insecure passwords are logged
+ * to the web console
+ */
+
+const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-bug-762593-insecure-passwords-web-console-warning.html";
+const INSECURE_PASSWORD_MSG = "Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.";
+const INSECURE_FORM_ACTION_MSG = "Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.";
+const INSECURE_IFRAME_MSG = "Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.";
+const INSECURE_PASSWORDS_URI = "https://developer.mozilla.org/en-US/docs/Security/InsecurePasswords";
+
+function test() {
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad(aEvent) {
+    browser.removeEventListener(aEvent.type, onLoad, true);
+    openConsole(null, function testInsecurePasswordErrorLogged (hud) {
+      waitForMessages({
+        webconsole: hud,
+        messages: [
+          {
+            name: "Insecure password error displayed successfully",
+            text: INSECURE_PASSWORD_MSG,
+            category: CATEGORY_SECURITY,
+            severity: SEVERITY_WARNING
+          },
+          {
+            name: "Insecure iframe error displayed successfully",
+            text: INSECURE_IFRAME_MSG,
+            category: CATEGORY_SECURITY,
+            severity: SEVERITY_WARNING
+          },
+          {
+            name: "Insecure form action error displayed successfully",
+            text: INSECURE_FORM_ACTION_MSG,
+            category: CATEGORY_SECURITY,
+            severity: SEVERITY_WARNING
+          },
+        ],
+      }).then( () => testClickOpenNewTab(hud));
+    });
+  }, true);
+}
+
+function testClickOpenNewTab(hud) {
+  let warningNode = hud.outputNode.querySelector(
+    ".webconsole-msg-body .webconsole-learn-more-link");
+
+  /*
+   * Invoke the click event and check if a new tab would open to the correct
+   * page
+   */
+  let linkOpened = false;
+  let oldOpenUILinkIn = window.openUILinkIn;
+  window.openUILinkIn = function(aLink) {
+    if (aLink == INSECURE_PASSWORDS_URI) {
+      linkOpened = true;
+    }
+  }
+
+  EventUtils.synthesizeMouse(warningNode, 2, 2, {},
+                             warningNode.ownerDocument.defaultView);
+  ok(linkOpened, "Clicking the Insecure Passwords Warning node opens the desired page");
+  window.openUILinkIn = oldOpenUILinkIn;
+
+  finishTest();
+}

browser/devtools/webconsole/test/test-bug-762593-insecure-passwords-about-blank-web-console-warning.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>Bug 762593 - Add warning/error Message to Web Console when the
+      page includes Insecure Password fields</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+    <!-- This test tests the scenario where a javascript adds password fields to
+     an about:blank iframe inside an insecure web page. It ensures that
+     insecure password fields like those are detected and a warning is sent to
+     the web console. -->
+  </head>
+  <body>
+    <p>This insecure page is served with an about:blank iframe. A script then adds a
+    password field to it.</p>
+    <iframe id = "myiframe" width = "300" height="300" >
+    </iframe>
+    <script>
+      var doc = window.document;
+      var myIframe = doc.getElementById("myiframe");
+      myIframe.contentDocument.open();
+      myIframe.contentDocument.write("<form><input type = 'password' name='pwd' value='test'> </form>");
+      myIframe.contentDocument.close();
+    </script>
+  </body>
+</html>

browser/devtools/webconsole/test/test-bug-762593-insecure-passwords-web-console-warning.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf8">
+    <title>Bug 762593 - Add warning/error Message to Web Console when the
+      page includes Insecure Password fields</title>
+    <!-- Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/publicdomain/zero/1.0/ -->
+  </head>
+  <body>
+    <p>This page is served with an iframe with insecure password field.</p>
+    <iframe src
+      ="http://example.com/browser/browser/devtools/webconsole/test/test-iframe-762593-insecure-frame.html">
+    </iframe>
+  </body>
+</html>

browser/devtools/webconsole/test/test-iframe-762593-insecure-form-action.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <!-- Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/publicdomain/zero/1.0/ -->
+  </head>
+  <body>
+    <h1>iframe 2</h1>
+    <p>This frame contains a password field inside a form with insecure action.</p>
+    <form action="http://test">
+      <input type="password" name="pwd">
+    </form>
+  </body>
+</html>

browser/devtools/webconsole/test/test-iframe-762593-insecure-frame.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <!-- Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/publicdomain/zero/1.0/ -->
+  </head>
+  <body>
+    <h1>iframe 1</h1>
+    <p>This frame is served with an insecure password field.</p>
+    <iframe src=
+      "http://example.com/browser/browser/devtools/webconsole/test/test-iframe-762593-insecure-form-action.html">
+    </iframe>
+  </body>
+</html>

browser/devtools/webconsole/webconsole.js

@@ -39,6 +39,8 @@ const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 const MIXED_CONTENT_LEARN_MORE = "https://developer.mozilla.org/en/Security/MixedContent";
 
+const INSECURE_PASSWORDS_LEARN_MORE = "https://developer.mozilla.org/en-US/docs/Security/InsecurePasswords";
+
 const HELP_URL = "https://developer.mozilla.org/docs/Tools/Web_Console/Helpers";
 
 const VARIABLES_VIEW_URL = "chrome://browser/content/devtools/widgets/VariablesView.xul";
@@ -1241,6 +1243,12 @@ WebConsoleFrame.prototype = {
                                       aScriptError.sourceName,
                                       aScriptError.lineNumber, null, null,
                                       aScriptError.timeStamp);
+
+    // Select the body of the message node that is displayed in the console
+    let msgBody = node.querySelector(".webconsole-msg-body");
+    // Add the more info link node to messages that belong to certain categories
+    this.addMoreInfoLink(msgBody, aScriptError);
+
     if (aScriptError.private) {
       node.setAttribute("private", true);
     }
@@ -1411,6 +1419,59 @@ WebConsoleFrame.prototype = {
     }.bind(this));
   },
 
+  /**
+   * Adds a more info link node to messages based on the nsIScriptError object
+   * that we need to report to the console
+   *
+   * @param aNode
+   *        The node to which we will be adding the more info link node
+   * @param aScriptError
+   *        The script error object that we are reporting to the console
+   */
+  addMoreInfoLink: function WCF_addMoreInfoLink(aNode, aScriptError)
+  {
+    // We have a single category for now, but more are to be
+    // expected soon
+    if (aScriptError.category == "Insecure Password Field") {
+      this.addInsecurePasswordsWarningNode(aNode);
+    }
+  },
+
+  /*
+   * Appends a clickable insecure passwords warning node to the node passed
+   * as a parameter to the function. When a user clicks on the appended
+   * warning node, the browser navigates to a page where the user can learn
+   * more about security issues associated with insecure passwords.
+   */
+  addInsecurePasswordsWarningNode:
+  function WCF_addInsecurePasswordsWarningNode(aNode)
+  {
+    let moreInfoLabel =
+      "[" + l10n.getStr("webConsoleMoreInfoLabel") + "]";
+
+    // The node that holds the clickable warning node.
+    let linkNode = this.document.createElementNS(XUL_NS, "hbox");
+    linkNode.flex = 1;
+    linkNode.classList.add("webconsole-msg-body-piece");
+    linkNode.classList.add("webconsole-msg-link");
+    aNode.appendChild(linkNode);
+
+    // Create the actual insecure passwords warning node and make it clickable
+    let warningNode = this.document.createElement("label");
+    warningNode.setAttribute("value", moreInfoLabel);
+    warningNode.setAttribute("title", moreInfoLabel);
+    warningNode.classList.add("hud-clickable");
+    warningNode.classList.add("webconsole-learn-more-link");
+
+    warningNode.addEventListener("click", function(aEvent) {
+      this.owner.openLink(INSECURE_PASSWORDS_LEARN_MORE);
+      aEvent.preventDefault();
+      aEvent.stopPropagation();
+    }.bind(this));
+
+    linkNode.appendChild(warningNode);
+  },
+
   /**
    * Log file activity.
    *
@@ -4472,6 +4533,7 @@ var Utils = {
       case "Mixed Content Blocker":
       case "CSP":
       case "Invalid HSTS Headers":
+      case "Insecure Password Field":
         return CATEGORY_SECURITY;
 
       default:

browser/locales/en-US/chrome/browser/devtools/webconsole.properties

@@ -75,6 +75,10 @@ webConsoleWindowTitleAndURL=Web Console - %S
 # http content in an https page).
 webConsoleMixedContentWarning=Mixed Content
 
+# LOCALIZATION NOTE (webConsoleMoreInfoLabel): the more info tag displayed
+# after security related web console messages.
+webConsoleMoreInfoLabel=Learn More
+
 # LOCALIZATION NOTE (scratchpad.linkText): the text used in the right hand
 # side of the Web Console command line when JavaScript is being entered, to
 # indicate how to jump into scratchpad mode.

browser/themes/shared/devtools/webconsole.inc.css

@@ -79,6 +79,11 @@
   margin: 0;
 }
 
+.webconsole-learn-more-link {
+  color: #0000EE;
+  margin: 0 0 0 4px;
+}
+
 .hud-msg-node[selected="true"] > .webconsole-timestamp,
 .hud-msg-node[selected="true"] > .webconsole-location {
   color: inherit;