jqencoder is a jQuery plugin whose goal is to provide jQuery developers with a means to do contextual output encoding on untrusted data. As applications become more and more reliant on rich client technologies the need for client-side code to have the ability to properly escape untrusted data becomes exponentially more important.
Why is Contextual Output Encoding Important?
Proper contextual output encoding is the primary and most effective way to combat Cross-Site Scripting (XSS) attacks. The premise is to use the escaping rules of the current context to not allow an attacker to break out of that context. The reason that output encoding is so important is because HTML, by nature, mixes code and data; thus an attacker can disguise code as data and that code can be executed unintentionally by other users.
There is a specific type of XSS Attack called DOM-Based XSS. The most dangerous factor of DOM-Based XSS is that attacker payloads are frequently *not* sent to the server; which means that any code on the server that is aimed at defending against XSS vulnerabilities will not be accessed, leaving your users wide open to attack. Client side contextual encoding is the answer to this problem. By encoding untrusted data in the correct context while dynamically building portions of the DOM or writing out Javascript, developers can effectively mitigate DOM-Based XSS attacks.
Client side contextual encoding also holds a prominent responsibility in dynamic AJAX applications - primarily those who load data from 3rd party services and display that data on their page. The client has no control over the integrity of the data being sent to them in most cases, so it is important than when rendering data from an untrusted source, such as a public webservice, that the developer be able to encode that untrusted data for use in the correct context.
How do you use jQEncoder?
Using the plugin is very simple, there are both static and instance methods to provide the right type of output encoding for your current situation. The plugin also provides a canonicalization method, which is imperative for detecting attacks that use double or multi encoding when handling data from an untrusted source. If you are dealing with data that may contain encoding, you can first canonicalize that data, then re-encode it for the appropriate context.
You can also use the static methods for dynamically building out your document instead of building elements using the DOM
Sandbox
Your payload will be injected directly into the div to the right using
Your payload will be injected directly into the value of the class attribute of an inner div element within the div to the right. This will done using the following code
Your payload will be injected directly into the value of the style attribute of an inner div element within the div to the right. This will done using the following code
Your payload will be injected directly into the value of the alert function fired by the onmouseover attribute of an inner div element within the div to the right. This will done using the following code
Your payload will be injected directly into the value of the href attribute of an inner a element within the div to the right. This will done using the following code