Archive for March, 2014

Good Sunday!
This week I was working on random bugs as well as I was fixing errors on my CSP implementation for Thimble. Also I reviewed Jon’s CSP implementation for
To be more specific, here is my progress so far:

  • Google Analytics Events for Goggles, bug968291:
    I picked up this bug, while I was searching for some interesting things to implement. The basic idea of this bug is to add GA events to goggle, so when user clicks on different buttons (‘Activate X-Ray’,’Undo’,’Redo’,’Publish’ etc.). So the path to implement it was:

    1. Add webmaker-analytics to the bower
    2. Require ‘analytics’ inside the JS file, where ‘click’ events implemented
    3. Add analytics.event("Activate X-Ray", { label: "Activated" });
    4. Do it for every click event, where it needs
    5. Test…fix
  • The problem I faced in this bug was, that when I implemented analytics.event to ‘Undo’,’Redo’,’Publish’,’Help, ‘Quit’ – I wrote as a name of the event was passed as a text var, and so when analytics fires – this ‘text’ will be shown. The problem here is with localization, it means that if the language is different – the ‘text’ var will be in that language.(Thank @aali for pointing it out) But it is not what we need, that is why I added separate events to all the buttons. My pull request. I would like to thanks @thecount for the help he gave me during this bug. Also, I learned requirejs tool for javascript a little bit.

  • Refactoring ‘HOSTNAME’ vars in webmaker components to ‘HOSTNAME_APP’bug951709 – all components reviewed and merged.
  • Fixed minor bugs in Thimble CSPPR here
  • Removed ‘Add to Map’ link from webmaker-eventspull request 63 (merged)

Also my progress can be seen at my github page (admix)
For the next week I will be working on a final CSP for Thimble, recode the popcorn instance for


And finally it happened!!!
CSP in landed to production in and It is a huge win for me and hopefully for webmaker as well. Here are the landed commits: CSP webmaker & CSP goggles. It is in report only mode right now. Everyone can test and see that CSP is there: just go to, open web console and if there is any not known script is trying to access webmaker.
In the nearest future, CSP v1.1 will be more stable and will support all browsers, at that time webmaker team will move to a new version. Also, newrelic got updated recently and new update brought inline scripts to the webmaker project that can not be moved. Because of that, I added 'unsafe-inline' policy to CSP. Hopefully, in the future it will be removed and CSP will do its jobs better.

For Goggles component there was a problem that I found and talked a little bit in my previous blog post, when user pressed “Active X Ray” button, inline script were produced and placed in index.html file, which is a violation to CSP. To solve this problem, I got some help from Jon and the suggestion was to add click handler event to that button, in order to save the href=”link”, so user can add that button to the bookmark and at the same, when user clicking the button the X-Ray view opens. Here is the commit (it was a part of my CSP for goggles) & implementation:

$("#bookmarklet-link").on("click", function(event) {
  var script = document.createElement('script');
  script.src = '/webxray.js';
  script.className = 'webxray';
  script.setAttribute('data-baseuri', hostname + "/"+localeInfo);

Implementing this ‘click’ handler helped to remove the inline script from goggles.

Also, I started to work on removing ‘new Function()’ from Basically, what should be done it instead of making a script string and then eval it, I need to make a popcorn instance manually, step by step. I’m still working on that.

The other bugs I just finished are:

For my next release I’m planning to finish several bugs:

  • Land CSP for Thimble (it’s under review)
  • Finish with popcorn ‘new Function()’
  • Just started to work on GA events for Goggles
  • Also, I just asked if I can pick up a bug, where we need to do autocompletion for location element in the Event component with the CSP in mind – hopefully I will get it.

See you later.

Its Friday and I will let you know what I was working on during this week.

I started to work on a couple of new bugs, which are not quite connected to CSP implementation, but also in the are I’m interested in.

  • I found out that nom install command could be failed during downloading source from a git repo using SSH (the path is written using git:// protocol). That is why it is safer to connect using HTTP. i fixed that issue in bug981588 and the bug was merged.
  • The other bug is about refactoring, that non-error responses SHOULD NOT be sent with res.json({error: "okay"}), instead use: res.json({status: "okay"}). My commit for this issue has not been pushed to PR yet. I’m looking for all files that could take place in this issue.
  • Also, I found out the other great thing about OpenSource. The challenge I faced last week was about my experience with AirMail App. With the latest update, this program started to lag and show weird green links in emails. So the fun stuff happened when I was looking for the contact information of that company to file my issue, because all the reinstallation procedures didn’t help. I found out that AirMail App uses github as a place for filing issues.. I found it pretty neat, even when the application is doesn’t use open source direction, using github for filing issues could be very beneficial for the company. I filed my issue there and got an answer on the next day. I liked it.

Coming back to CSP and block bugs. A could of new reviews happened.

  • Two last blocks for Thimble were fixed, reviewed and merged. (bug981357 and bug979111). That is why I pushed CSP for Thimble to be reviewed -> bug959271.
  • Also, all the dependencies for CSP were merged and I pushed CSP bug to review as well: bug959277. It has only one weird questing, where I’m stuck. When user press “Activate X-Ray Goggles” – CSP caught inline script violation, but an interesting part is that there is no inline script there. The suggesting I have is that:
    <div class="bookmarklet"><a href="" id="bookmarklet-link" class="ui-btn"><span>{{ gettext("Activate X-Ray Goggles") }}</span></a></div>

    “bookmarklet-link” id field has some kind of error/bug. Working and getting help to find out why.

  • One more thing is that Jon put me on review for CSP at, which Jon PRed not while ago. I found out that two new policies should be added and it’s still early to push this update, because there are 2 more block bugs left.
  • I’m still working on eval() at PluginDetect_Flash.js David helped me and pointed to pinlady PluginDetect. The possible solution is:
    Instead of using eval like this:


    Do this:

    isIE = (function () {
      var tmp = document.documentMode, e, isIE;
      // Try to force this property to be a string.
      try{document.documentMode = "";}
      catch(e){ };
      // If document.documentMode is a number, then it is a read-only property, and so
      // we have IE 8+.
      // Otherwise, if conditional compilation works, then we have IE < 11.
      // Otherwise, we have a non-IE browser.
      isIE = typeof document.documentMode == "number";
      // Switch back the value to be unobtrusive for non-IE browsers.
      try{document.documentMode = tmp;}
      catch(e){ };
      return isIE;

    At this point, I’m waiting for more info from Jon on this, just to make sure that I’m on a right way.

    Hopefully one of the CSP implementation will be merged to master or at least a great progress will be made before my Rel #5.
    Have a great weekend!

Good day everyone. It looks like spring is coming to Toronto area 🙂

It was a fun release period, did a lot of PRs and hopefully they will be reviewed soon, so I can move on to CSP implementation and testing.

As I was saying in my previous post, there is a huge pre-work needed to get closer to CSP implementation. During my release #4 period I was working on moving inline scripts into separate files and also looking how I can get rid of eval(), because it is prohibited by CSP. Pretty much all the inline scripts were moved into separate files and only review needed.
Goggles.webmaker component is almost ready to implement CSP, only 3 bugs must be merged. (bug980159,bug980160,bug980162, which are under review stage).

Also Thimble.webmaker component in the final stage prior to CSP implementation. These bugs were fixed and waiting for the review: bug979111, bug979642, bug979648, bug979651, bug981357.

At the same time I decided to add to my list popcorn.webmaker component and add CSP to it as well. I filed new bug blocks that should be fixed prior to CSP, and already pushed the PRs.(bug981354 and bug981352).
The other bug here could bring a little bit of difficult. It is replacing eval() in PluginDetect_Flash.js with something else, because CSP doesn’t accept eval(). My suggestion was to replace this: $.isIE=eval("/*@cc_on!@*/!1"); with this $.isIE = JSON.parse("/*@cc_on!@*/!1");, but apparently IE conditional compilation doesn’t work with JSON. Right now I am thinking on other possible solution here. Other than that, popcorn.webmaker is almost ready to implement CSP and this is great as well.

To sum up: I pretty close to the final CSP implementation for several components and hopefully during my next release all the PRs will be reviewed and merged, so I would be able to test thoroughly and push CSP implementation. I think goggles component will be a good start, because it doesn’t use not allowed features (eval() or new function()) and could be implemented with less problems.

Also, I talked to Jon about CSP V 1.1, that I reviewed in my release #3. New version has a lot of nice features and updates. However, we decided that it is still pretty raw and not all browsers support every feature, so maybe in the nearest future some updates would be implemented, but for now it is OK to use V 1.0.

The study week was quick and useful at the same time. I was catching up with everything and did a couple of progress with my own project. At the same time I am closer and closer to implementing CSP into webmaker and its components.

During my release #4 time, I am working on goggles and thimble components. The first thing I decided to implement is to file all the issues related to inline scripts and other bugs that could be problematic for CSP implementation.

Bugs in goggles:

  • Move google analytics into separate file X-Ray Goggles bug977293 – FILED, FIXED, MERGED
  • Move inline script into separate file bug975628 – FILED, FIXED, MERGED
  • Move error tracking into separate file bug973112 – REVIEWED,FIXED,MERGED
  • Move inline script in sso-override.html file into separate file bug980160 – FILED, IN PROCESS
  • Move inline script in webmaker-auth-client.html file into separate file bug980159 – FILED, IN PROCESS
  • Move inline script in preferences.html into separate file bug980162 – FILED, IN PROCESS
  • Also this directory has some html files with inline scripts. Thinking of moving them into separate files as well

Bugs in Thimble

Separate bugs

  • Remove old-style players and dependencies on the Popcorn.player module bug973369 – REVIEWED, FIXED, MERGED
  • Looking for some backend/new feature bugs, that I would like to work on. Maybe will catch up on filer.. still looking for something.

To sum up, I am moving forward to implement CSP for goggles, almost all sub bugs were fixed and merged. Now testing CSP work and looking for more inline script or other problems that could prevent from CSP integration.

At the same time doing the same thing with Thimble and hopefully soon Webmaker will be with CSP.
See you later with my final Release #4.