Quick tip: On Firefox OS Building Blocks failing CSP

One of the cool things about building apps using web technologies is just how much material you can get to bootstrap your idea. While github is packed with libraries and frameworks one of my favourite places to get resources for making interfaces in Firefox OS is the UX Building blocks since they are pretty much explanations on how the elements on the gaia apps are made.

The different elements on the MDN site should work perfectly with a copy and paste. However, when I first tried including an Action Menu into my packaged app and submitting it into the marketplace the new element failed the marketplace’s automatic validation, raising a CSP (Content Security Policy) violation error.

A detail of the Action Menu’s HTML was violating the CSP. I figured out how to work around it and now I want to share in case nay other potential devs run into this error.

On MDN we get the following HTML code for the action menu:

<form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu">
  <header id="sample-title"> Title </header> <!-- this header is optional -->
  <menu>
    <button id="button1"> Action 1 </button>
    <button id="button2" disabled> Action 2 (disabled) </button>
    <button id="button3"> Action 3 </button>
    <button id="cancel"> Cancel </button>
  </menu>
</form>

This first line was the one cited as violating CSV. Some experimentation revealed that the problem was around the onsubmit="return false;" instruction, which I believe violates Firefox OS policy against in-line scripting.

However, that instruction is needed for the menu to work properly, so what I did was to remove that line and add it on JavaScript when the app starts:

window.onload=function(){
  $("form").get(0).onsubmit="return false;"
  //More stuff you usually do
}

And the HTML is left like this:

<form role="dialog" data-type="action" id="sample-menu">
  <header id="sample-title"> Title </header> <!-- this header is optional -->
  <menu>
    <button id="button1"> Action 1 </button>
    <button id="button2" disabled> Action 2 (disabled) </button>
    <button id="button3"> Action 3 </button>
    <button id="cancel"> Cancel </button>
  </menu>
</form>

This is more of a quick workaround than a proper fix, but it works. The app goes trough the Marketplace’s validation smoothly now.

So keep an eye on these details when working the Building Blocks!

Advertisements

An upcoming web developer and android app-maker with an interest on using reliable tech in creative ways, open source projects and start-ups.

Tagged with: , , , , ,
Posted in developer tips

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: