SummerOfCode/2013/SecurityReport/WeeklyUpdates/2013-06-17

This Week

Monday, 17 June

• I used console.log method in ConsoleService listener to show message captured and another console.log method to display category of the message.
• I noticed that, it is not correct to use console.log method in ConsoleService Listener. Because only first console.log method worked. Second console.log method was neither showing message category information on screen nor showing any error message.

 var errorListener = {
   observe: function(aMessage) {
       console.log("\n Message = "+aMessage.message);
       let error = aMessage.QueryInterface(Ci.nsIScriptError);    
       if (error instanceof Ci.nsIScriptError)
           console.log("\n Message category:  "+error.category +"\n");
    }
 };
 var consoleService = Cc["@mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService);
 consoleService.registerListener(errorListener);

• I even tried to swap console.log methods then it was showing only message category but not the message.
• From this strange behavior I concluded that it is not good to use console.log method in the ConsoleService observer. I might not be technically correct in concluding this, but my conclusions are purely based on the above mentioned behavior.
• I replace console.log method with the dump method and it started showing actual message as well as message category.

       dump("\n Message = "+aMessage.message);
       let error = aMessage.QueryInterface(Ci.nsIScriptError);        
       if (error instanceof Ci.nsIScriptError)
           dump("\n Message category:  "+error.category +"\n");

Tuesday, 18 June

• My today's task is to add "Security Report" toolbox panel to Web Console.
• To achieve this, I used following code snippet:

const { gDevTools } = Cu.import('resource:///modules/devtools/gDevTools.jsm', {}); 
const { Toolbox } = Cu.import('resource:///modules/devtools/Toolbox.jsm', {});
const { TargetFactory } = Cu.import('resource:///modules/devtools/Target.jsm', {});
gDevTools.registerTool({
    id: "security-report-tool",
    label: "Security Report",
    isTargetSupported: function() true,
    build: function() {}
  });

It adds "Security Report" toolbox panel to the "Web Console" UI.

Next things that I need to do are given below:

1. Add HTML or XUL file to show information/UI when user selects "Security Report" toolbox

  I need to investigate how to add UI? do we need to add it separately or when we register it. How we can add UI?

2. Add sub menus to "Security Report" toolbox such as CSP, CORS, mixed-content, etc.

  I need to investigate how sub-menus can be added to a toolbox.

3. How to store information about security logs per website? Is there any mechanism provided in FF that can help me to store logs according to category or I need to use internal table in my add-on to maintain that information. What could be the best way to store information? Is "simple-storage" APIS appropriate to store information.

Wednesday, 19 June

• After trial and errors I was not able to add UI to Toolbox using JetPack SDK.
• I also poke around IRC, and got a link to Firefox JE-TERM extension written using XUL framework.
  • https://github.com/paulrouget/firefox-jsterm

Thursday, 20 June

• Reading code of JS-Term.
• I tried to install and use JS-Term extension. On my ubuntu 12.04 with Firefox Version 21, I am not able to use JS-Term extension. It adds toolbox menu in the Firefox, but I could not figure out how to use it.

Friday, 21 June

• After last two days trial and errors, I finally decided to move on with a "Panel" in JetPack SDK to show add-on UI, instead of getting stuck with toolbox UI.