How to make LibreJS like you

librejs

GNU LibreJS is a browser plugin that aims to address the JavaScript problem described in Richard Stallman’s article The JavaScript Trap.

LibreJS thus blocks the execution of any javascript files that aren’t licensed as free software.

A while ago, Richard Stallman contacted me and asked me if I could try and make freedomsponsors.org compatible with LibreJS. At the time I was really busy and couldn’t do it. But recently I made another attempt and succeeded.

Making your website compatible with LibreJS is hard-ish, I’ll summarize below a few tips that worked for me.
If you need libreJS to like your site too, I think these tips will be very helpful, specially if your website uses AngularJS or AJAX.

Before we get down to it, here’s a few pointers that may be useful:

Now, the tips

1) The easiest way to make your .js files recognized as free software is to use the web labels method.

  • Every page on your website should have a link to that page, with rel=”jslicense”
    Example: on https://freedomsponsors.org you’ll find this link:

<a href=”/jslic” rel=”jslicense”>JavaScript license information</a>

  • The “Javascript license information” should have a 3 column table that lists all .js files used in your website
    • column 1: A link to the .js file, with the same path used in the <script src=”…”> tags
    • column 2: A link to the free software license this file is released on. This link should be one of the ones listed under the Free Licenses Detection section of the documentation
    • column 3: A link to the original source code for that file.

2) You need to restart firefox everytime

When you’re testing your website using firefox with LibreJS enabled, you’d think it would go somehow like this:

  • Change something in the backend
  • Refresh the browser and see if it works
  • Start again

It took me a while before I realized this doesn’t work. You have to restart firefox for LibreJS to behave consistently, thus:

  • Change something in the backend
  • Close firefox
  • Open firefox, go the page and see if it works
  • Start again

3) LibreJS may change the contents of AJAX responses.

Whenever the browser gets any http(s) response with content-type == ‘text/html’, LibreJS might change its contents adding a header and a footer. This email thread explains that in more detail (look at the screenshots attached on the first email)

So, beware of that.

4) If you’re using AngularJS, then you need to use $templateCache

Because of (#3), you can’t let AngularJS load html templates dynamically – LibreJS will change them and break your website.
You need to cache those templates in a .js file using the $templateCache Angular service.

FreedomSponsors does this using Grunt.
All templates are concatenated along with other javascript files into fs.js (the html templates are at the bottom)

5) You need to use the correct content type for json responses

Chances are that your client-side code makes AJAX calls that return json responses.
You should set content-type == ‘application/json’ for those responses. If you leave the default of “text/html”, LibreJS will change them and break your site

6) You need to escape special characters properly.

For example:
* No: «
* Yes: &laquo;

Otherwise they won’t be displayed correctly when LibreJS is enabled

7) The guys at the help-librejs mailing list are very helpful

Sign up for that mail list and ask for help whenever you need it.
The guys there are great people and are willing to help.

Well, those are the tips I had to share.

Did it help you? Or perhaps you have more hot tips? Please let me know in the comments below.

Conclusion

Overall, making my website compliant with LibreJS was sometimes frustrating and annoying.
It felt harder than it should’ve been, with more hidden obstacles than I anticipated (and I’ll bug them more about this soon at help-librejs!)
But looking in retrospect, there are a few hidden prizes too

  • Concatenating all my js and template files made pages load faster
  • Using the right content-type for json responses is always a good thing
  • Forcing yourself to know exactly what third party libs and licenses you’re using is a good thing

Free Software ftw!🙂

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s