Security/Inline Scripts and Styles

From MozillaWiki
Jump to: navigation, search

Short: 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. 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. You might be interested in reading about Contributing to the Mozilla codebase.

Goals & Non-Goals

Cross-Site Scripting (XSS) and other content injections are a prevalent, yet very serious security issue for the web. But there is a way to make it less harmful: Content Security Policy (CSP). A content security policy is a list of allowed scripts, styles and other resources. Creating such a policy can disallow any kind of injected HTML to be harmful to the user. For CSP to understand which things are allowed and which are injected, everything has to live in its own document: An .html-file just for the HTML, a .css-file for stylesheets, a .js just for scripts and so on. This means, that there is quite a lot of code that requires to be rewritten.

Remaining bugs

In DevTools

No results.

0 Total; 0 Open (0%); 0 Resolved (0%); 0 Verified (0%);

Miscellaneous

No results.

0 Total; 0 Open (0%); 0 Resolved (0%); 0 Verified (0%);


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>
<div style="position:aboslute; z-layer: -1; border: 1px solid blue; min-width: 250px"></div>

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.

Finding Inspiration

Some bugs have already been fixed, thanks to numerous hard-working volunteers, Thanks! This work can now serve as a good example on how to help:

Who's involved

This project is maintained by Mark Goodwin (mgoodwin) and Frederik Braun (freddyb). You can find us during European daytime on IRC in the #security channel. But its good progress builds upon the help by dozens of other Mozillians who have helped with patches, reviews and other feedback.

Retrieved from "https://wiki.mozilla.org/index.php?title=Security/Inline_Scripts_and_Styles&oldid=975245"