Security/Inline Scripts and Styles

What's going on?

We're making changes to privileged pages (e.g. about:whatever) to separate out inline scripts and styles. This is happening because it's one of the barriers preventing us from applying a content security policy to such documents.

Can I help?

Sure. There's a tracking bug here. Many of its blockers will be good first bugs too.

What do I need to know to get started?

You'll need to know at least some HTML and JavaScript. You can probably learn some of the rest of what you need to know (like how to build firefox and run tests) as you go along.

Identifying and changing inline code patterns

The general advise is that we want to have separate files for Stylesheets (CSS), JavaScript (JS) and HTML. This means that any trace of JS and CSS in HTML is to be removed and replaced with something in an exising JS or CSS file. If there is no existing CSS or JS file, a new one has to be created: There are five types of code that need changing

JS in a script tag

Example:

<script>
 // JavaScript source code in here
</script>

JS in an event handler

There are numerous events to be checked, but luckily they can be easily found using a code editor's automated search function, as they all begin with "on", search for: " on"

Example:

<img src="image.jpg" onerror="alert('the image could not be found!')" />
<button onclick="buttonClicked();" />
...

JS in links

This is about links that execute JavaScript, the most common pattern is an A tag with a javascript: pseudo-URL in the href attribute.

<a href="javascript:codeHere();">click me</a>

CSS in a style tag

Just a style tag with content:

<style>
  h1 { color: green; }
</style>

CSS in a style attribute

This can happen in every tag, but is easily found by looking for style=.

Examples:

<a href="foo.html" style="text-decoration: none; color: pink;">click me</a>

Common pitfalls

JavaScript

Events and HTML parsing

The JavaScript code that lives in the HTML document is executed as soon as the browser sees it when going through the document line by line. This involves some side-effects as it sees HTML elements that have been created previously, but does not see the ones following it. Script blocks at the end of the document therefore indicate that they rely on some HTML element being declared before it. Script blocks at the beginning of the document usually do not have this pre-condition.

If your code requires on a completely parsed HTML document, you might have to wrap the code in a DOMContentLoaded event.

If you can't find a script file to put the affected JavaScript code into, you will have to create a new one. The name should make some sense and could be similar to the HTML page it is being used in. EDITOR'S TODO: Find out and explain how to add files. Some config file needs to change for about/chrome/jar things.

Event Handlers

If you want to reference an HTML element that you're attaching an event to, please give it a unique id (if it doesn't have on already) and use document.getElementById over document.querySelector.

CSS

CSS in attributes looks different than in a style tag

This is an easy one, and you shouldn't have to worry about this if you know some basic CSS: The style that is in an attribute already points to the element that needs changing. If you are putting the CSS to another document you have to make sure the correct element is selected. If there is exactly one element that needs this specific style, giving it a unique id attribute is recommended.