In association with heise online

Restructuring

Employing CSP effectively on a web site generally requires minor, and occasionally major, changes. It is relatively easy to move static <script> blocks into .js files and re-embed then in a page using <script type="text/javascript" src="scripts.js"></script>.

Attribute-based event handlers such as onchange are, however, also forbidden by CSP. The JavaScript in the following HTML element would also need to be modified:

<input id="i0" class="amount" onchange="updateSum()">

For the external script to be informed of changes to the element, it has to be registered as an event handler using the function addEventListener(). However this does not work in all browsers. For Internet Explorer version 8 and earlier, for example, the required function is attachEvent(). A simple solution for this and other browser idiosyncrasies is available. The jQuery library catches such anomalies and can also be used to easily address elements via CSS selectors. An onchange event handler for input fields with the CSS class 'amount', for example, can be registered as follows:

$().ready(function () {
$(".amount").change(function() {
updateSum();
});
});

Users who have not previously worked with jQuery can learn the basics on the jQuery web site.

Data links

Sometimes JavaScript requires data that is dynamically inserted into the HTML by the server. A PHP script on the server may, for example, dynamically assign the value 42 to a price variable at runtime when generating JavaScript. But with CSP meaning that JavaScript resides in static files, this technique no longer works.

There is, however, a trick – data is inserted into the HTML as before; the data can then be accessed by the scripts now located in external files. HTML5 permits custom attributes beginning with the prefix data- to be added to all elements. The server can thus generate the following code:

<input id="i1" class="amount" data-price="42">

With jQuery, like normal attributes, data attributes can then be addressed using attr(name):

price=$("#i1").attr("data-price")

In older applications which are unable to use HTML5 functions, it is possible to use invisible input fields of type hidden:

<input type="hidden" id="p3" value="9">

Eval is evil

The default policy forbids interpreting strings as JavaScript. Specifically, this means that the use of eval() and new Function() is now taboo. The setTimeout() and setInterval() functions can now only be used with a function object as their argument. So, for example,

setTimeout("alert('past')", 100);

would have to be replaced by the following:

setTimeout(function() { alert("past"); }, 100);

Users who use eval() to parse JSON-formatted data will instead need to use the JSON.parse() method, which is supported by all current browsers. If your web site needs to be able to support Internet Explorer 7 or earlier, you can use JSON libraries.

Next page: Smoke detector

Print Version | Permalink: http://h-online.com/-1892346
  • Twitter
  • Facebook
  • submit to slashdot
  • StumbleUpon
  • submit to reddit
 


  • July's Community Calendar





The H Open

The H Security

The H Developer

The H Internet Toolkit