Posts Tagged ‘javascript’

Good Sunday evening! I am coming to the end of the semester and to my final release in OSD. I would say, that it was and it is a great class that opens new horizons to students and possible opportunities to their future. I am so happy that I was and I am involved with such great companies as CDOT and Mozilla.

Previous week was the hardest one for me in terms of time, all the assignment presentations and assignment deadlines were there. Also I finished reading a great Sci-Fi book “Calculating God” last Sunday.

Lets get back to my work throughout the last week.
I was working on implementation GA events to goggles – bug968291, I was continuing this bug from the week before the last week. I became a little bit harder than I excepted, but it even better. It turned out that, from this bug we started 3 more new bugs, , which I took already:

Basically, all 3 bugs related to the same problem/feature: to update goggles to use requireJS whenever its possible. Why 3 bug? Because, in this way it’s easier to stay on track.
I started to work on bug995318 (my commit with progress) and made progress on that already. The main idea of the requireJS is to optimize in browser use and it makes app more efficient and work faster.
I would provide short guide on how it works.
The tree of directories:

  • project-directory/
    • index.html
    • js/
      • main.js
      • require.js
      • browser-screen.js
      • sso-override.js
      • sub/
        • util.js
        • jquery.js

Sample index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>My Project</title>
        <!-- data-main attribute tells require.js to load
             js/main.js after require.js loads. -->
        <script data-main="js/main" src="js/require.js"></script>
    </head>
    <body>
        <h1>My index.html file</h1>
        <p class="test">Some weird text here</p>
    </body>
</html>

main.js – special configuration file in requireJS

requirejs.config({
  baseDir:'/js', // this dir will be used as home for our js files
  paths: {       // do not specify file extension, it assumes that it is .js
    'jquery':           'sub/jquery',  
    'text':             '/bower/text/text',
    'localized':        '/bower/webmaker-i18n/localized',
    'languages':        '/bower/webmaker-language-picker/js/languages',
    'list':             '/bower/listjs/dist/list.min',
    'fuzzySearch':      '/bower/list.fuzzysearch.js/dist/list.fuzzysearch.min',
    'browser-screen':   'browser-screen',
    'sso-override':     'sso-override',
    'utils':            'sub/utils'
  }
});

// Now you specify which scripts will be loaded after require.js is fired in index.html
require(['browser-screen', 'sso-override', 'jquery', 'utils'],
  // you can give more instructions here
});

Now, inside one of your js file, you do the following.
utils.js

require(['jquery'], function($) {
  $(.test).text("your new text");
});

With this example, you don’t need to include jQuery script in html file. This approach is really efficient in terms of coding, speed of application and code management. Also, it is much more easier to add more functionality in the future with such application structure.

Also, during this week, I pushed to PR and merged small css bug where I had to fix the alignment in navigation area when user logged in.

I am looking forward to continue my contribution to Mozilla and CDOT 🙂 Cheers!

Advertisements

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 Popcorn.webmaker.org.
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 popcorn.webmaker.org.

And finally it happened!!!
CSP in landed to production in webmaker.org and goggles.webmaker.org. 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 webmaker.org, 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) {
  event.preventDefault();
  var script = document.createElement('script');
  script.src = '/webxray.js';
  script.className = 'webxray';
  script.setAttribute('data-lang',localeInfo);
  script.setAttribute('data-baseuri', hostname + "/"+localeInfo);
  document.body.appendChild(script);
});

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

Also, I started to work on removing ‘new Function()’ from popcorn.webmaker.org. 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 goggles.webmaker.org 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 popcorn.webmaker.org, 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 popcorn.webmaker.org. David helped me and pointed to pinlady PluginDetect. The possible solution is:
    Instead of using eval like this:

    $.isIE=eval("/*@cc_on!@*/!1");
    

    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.

Welcome to Friday and the last day before the study break.

This week was really exhausted one, all the midterms and assignment deadline made it even more nervous. Anyways, my work in Open Source World holds me in excited mood. 🙂

For this release I completed a lot of new for me kind of bugs and also made a great progress with the final CSP implementation into Webmaker and components. A little bit later in this post about it.

The other thing is that I found some really useful articles related to the Content Security Policy:

  • Compatibility table for support of Content Security Policy in desktop and mobile browsers -> look here
  • Content Security Policy on Mozilla Hacks -> look here and Mozilla Wiki -> here
  • A lot more on CSP v1.1 (new version 🙂 ) standard on w3 -> look here

Another great news!

Content Security Policy has just recently updated to version 1.1 (February 11th, 2014), which has some new features, which will be really useful to use for my future implementation it to the mozilla components.

  • nonce — random sequence of symbols that you send through header;
  • If there is an unsafe-inline and nonce, then nonce turns off unsafe-inline;
  • only those inline scripts work which have attribute nonce with the same value as in the header
    var hood = require("hood");
    //declaring new attribute in header
    module.exports.addCSP = function(options) {
      return hood.csp({
        headers: [
          "Content-Security-Policy"
        ],
        policy: {
          'default-src': [
            "'self'"
          ],
          'script-src': [
            "'self'",
            "https://example.com",
            "nonce-eef8264c4994bf6409c51ac7c9614446" //'nonce' has value with random symbols
          ]
        }
      });
    };
    
    //Testing
    <script type="text/javascript">
      alert("BLOCKED, because no 'nonce' attribute");
    </script>
    
    <script nonce="22168992a8d57a5d3a64ca73bb9fc669">
      alert("BLOCKED, because 'nonce' value doesn't equal to one written in the Policy");
    </script>
    
         //'nonce' is equal to one in the header
    <script nonce="eef8264c4994bf6409c51ac7c9614446">       
      alert("VALID, because 'nonce' attribute is equal to one in the Policy");
    </script>
    
    <!-- VALID, because there is a 'script-src' with 'https://example.com' -->
    <script src="https://example.com/allowed-because-of-src.js"></script>
    
    <!-- BLOCKED, because 'nonce' attribute is different -->
    <script nonce="22168992a8d57a5d3a64ca73bb9fc669" src="https://otherdomain.com/invalid.js"></script>
    
    <!-- VALID, because 'nonce' attribute is the valid, even then the otherdomain.com is not in script-src -->
    <script nonce="eef8264c4994bf6409c51ac7c9614446" src="https://otherdomain.com/valid.js"></script>
     
  • Specifying policy with metatag
  • Javascript API for getting and checking policies
  • DOM event about policy violation
  • New attributes: form-action, plugin-types
  • I will talk to Jon and Dave about these new features and how they can benefit.

Also I am thinking of implementing report-uri attribute to mozilla’s CSP, so that we will be getting all the information related to the policies violation and for easy check on the policy rules

Here is a small example of report-uri implementation

//inside CSP header declare report-uri
module.exports.addCSP = function(options) {
  return hood.csp({
    headers: [
      "Content-Security-Policy"
    ],
    policy: {
      'default-src': [
        "'self'"
      ],
      'script-src': [
        "'self'"
      ],
      'report-uri': [  //report-uri attribute
        "/pathToFile/csp.jsx"  //path to report json file
      ]
    }
  });
};

And here is hoe the report-uri file looks like

{
    "csp-report": {
        "document-uri": "https://example.ca/pathToReport/",
        "referrer": "http://www.example.ca/",
        "violated-directive": "script-src 
                                'unsafe-inline' 
                                'unsafe-eval' 
                                blob: 
                                chrome-extension: 
                                *.example.ca 
                                *.example.net 
                                *.example.st",
        "original-policy": " all policies specified here ",
        "blocked-uri": " blocked urls will be here "
    }
}

Pretty neat thing this CSP 🙂

The only one thing stops this implementation is this bug -> Mozilla CSP report-uri bug which is kind a problem. I would contact jbuck to get some info on that.

Lets get back to my bugs for this release. So I moved as close as possible to implement CSP on webmaker. Due to Jon Buckley’s vacation (hope is doing great 🙂 ), some of my bugs are on review stage, but this is not a problem at all, I have a lot of stuff to do for my next release. These are the bugs I fixed for this release:

  • Moving inline script to separate file -> bug 973120 Fixed and Landed,PR here
  • Remove inline script for quick-linking to a tag -> bug 973116 Fixed and Landed,PR here
  • Move google analytics snippet into a separate JS file -> bug 973119 Fixed and Landed,PR here
  • Move JS error tracking snippet -> bug 973112 On review and PR here
  • Starting point on CSP for Xray Goggles, adding ‘hood’ module, adding CSP to middleware.js and implementing it in app.’s commits -> here
  • Also I filed a bug for Xray Goggles -> here, which is related to future CSP as well. The bug is still not confirmed, but anyways, I am suggesting to find other related issues in Goggles, how we did with Webmaker, to make the whole CSP Implementation much more easier and straight forward.

This is pretty much it for this release.
Have a great weekend!