Security/Inline Scripts and Styles: Difference between revisions

(examples of inline code)
Line 16: Line 16:


=== Identifying and changing inline code patterns ===
=== 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


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:
====JS in a script tag====


There are five types of code that need changing
'''JS in a script tag'''
Example:
Example:
  <script>
  <script>
Line 26: Line 25:
  </script>
  </script>


'''JS in an event handler'''
====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"''
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:
Example:
  <img src="image.jpg" onerror="alert('the image could not be found!')" />
  <img src="image.jpg" onerror="alert('the image could not be found!')" />
Line 33: Line 33:
  <small class="easteregg" onmouseover="hiddenFunction();">...</small>
  <small class="easteregg" onmouseover="hiddenFunction();">...</small>


'''JS in links'''
====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.
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>
  <a href="javascript:codeHere();">click me</a>


'''CSS in a style tag'''
====CSS in a style tag====
Just a style tag with content:
Just a style tag with content:
  <style>
  <style>
   h1 { color: green; }
   h1 { color: green; }
  </style>
  </style>
'''CSS in a style attribute'''
====CSS in a style attribute====
This can happen in every tag, but is easily found by looking for '' style=''.
This can happen in every tag, but is easily found by looking for '' style=''.
Examples:
Examples:
  <a href="foo.html" style="text-decoration: none; color: pink;">click me</a>
  <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>
  <div style="position:aboslute; z-layer: -1; border: 1px solid blue; min-width: 250px"></div>
Confirmed users
239

edits