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.

Are there gotchas I should know about?

Yes, we'll be documenting some of these as we come across them.

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>