Confirmed users
239
edits
Security/Inline Scripts and Styles: Difference between revisions
Jump to navigation
Jump to search
Security/Inline Scripts and Styles (view source)
Revision as of 11:42, 17 January 2014
, 17 January 2014pitfalls added
(pitfalls added) |
|||
| Line 10: | Line 10: | ||
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 [https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions build firefox] and [https://developer.mozilla.org/en/docs/Running_automated_tests run tests]) as you go along. | 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 [https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions build firefox] and [https://developer.mozilla.org/en/docs/Running_automated_tests run tests]) as you go along. | ||
=== Identifying and changing inline code patterns === | === Identifying and changing inline code patterns === | ||
| Line 49: | Line 45: | ||
<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> | ||
== 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 [https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded 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 <tt>document.getElementById</tt> over <tt>document.querySelector</tt>. | |||
=== 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. | |||