GithubHelp home page GithubHelp logo

roger-cruz / jquery-encoder Goto Github PK

View Code? Open in Web Editor NEW

This project forked from chrisisbeef/jquery-encoder

0.0 1.0 0.0 271 KB

Contextual Output Encoding for jQuery

License: MIT License

JavaScript 77.79% CSS 3.29% HTML 18.92%

jquery-encoder's Introduction

jQuery Encoder Plugin

A Contextual Encoding Plugin for jQuery

Download jquery-encoder

Download the production version or the development version.

Install Dependencies

Run npm install to install the plugin dependencies

  • John Resig's Class.create.js 1.1.4+

Or download the Class Library manually.

Usage

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.

<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/class.min.js"></script>
<script type="text/javascript">
    $.post( 'http://untrusted.com/webservice', { parameter1: 'value' }, function(data) {
        // Data returned may contain encoded data, so canonicalize the data to its simplest
        // form prior to encoding it for use on the page.
        var cdata = $.canonicalize(data);
        $('#element').encode('html', cdata);
    });
</script>
<div id="element"></div>

Static Methods

canonicalize( String data, bool strict=true )

Canonicalization (also called normalization) is the act of reducing a string to it's simplest form. For example, if the string %3CB%3E is passed into the canonicalize method, the value returned will be decoded into <b>. The most important part of this method is that it will detect if a string is passed in that contains either multiple encoding types, or double encoding, or both. The default behavior of the method is to raise an exception if it detects one of these scenarios. As a general rule, normal application operation should never pass data that is either double encoded or encoded using multiple escaping rules. Most definately, data that is provided by a user (such as a form field) will never contain data that fits that description.

    try {
        $.encoder.canonicalize(untrusted_data);
    } catch (e) {
        log.error(e);
        alert('An error has occured');
    }

@encodeForCSS( String propName, String input, boolean omitPropertyName )

This method allows developers to encode data specifically to be inserted into the @style@ attribute of an element or as the value of a style attribute passed in through the jQuery .style() method.

    $.post('/service/userprefs', { user: userID }, function(data) {
        $('#container').html('<div style="' + $.encoder.encodeForCSS('background-color', data['background-color']) + '">');
    });

@encodeForHTML( String input )

This method allows developers to encode data specifically to be inserted between two tags in a document, either through the use of the html() method or by accessing @innerHTML@ directly.

    $.post('http://untrusted.com/news/', function(data) {
        $('#element').html( $.encoder.encodeForHTML(data) );
    });

encodeForHTMLAttribute( String attr, String input, boolean omitAttributeName=false )

This method allows developers to encode data specifically to be inserted between quotes in an HTML Attribute value.

    $.post('http://untrusted.com/profile', function(data) {
        $('#element').html( '<div ' + $.encoder.encodeForHTMLAttribute('width', data.width) + '">' );
        // <div width="90"/>
    }

encodeForJavascript( String input )

This method allows developers to encode data specifically to be inserted into a javascript event on an DOM element. This method will escape for a javascript context instead of a html attribute context.

    $.post('http://untrusted.com/profile', function(data) {
        $('#element').html( '<div onmouseover="someFunction(\'' + $.encoder.encodeForJavascript(data.event) + '\)">');
    }

encodeForURL( String input, attr=null )

This method allows developers to encode data specifically to be inserted into a URL context. This is useful for encoding links with untrusted data in them. If the optional attr parameter is passed this function will return the full value attr=<encoded_value.

    $('#dyn_link').html('<a href="/profile?' + $.encoder.encodeForURL(userID, 'userID') + '">Link</a>');
    // <a href="/profile?userID=123>Link</a>

Instance Methods

New in version 0.1.1 is the ability to call encoding directly on an element for the .attr(), .html(), and .style() methods.

encode( Enum(html|css|attr) context, String input )

Sets a property of the element with the correct contextual, property-aware encoding applied.

 // Sets the 'value' attribute of the element with id #my-element
 $('#my-element').encode('attr', 'value', untrustedData)

 // Add a 'background-image' to the element with id #my-element
 $('#my-element').encode('css', 'background-image', untrustedUrl);

Release History

v0.1.1 - 2015.08.19

  • Updated for jQuery 1.9+ compatibility
  • New instance method .encode
  • Added full support for "Property-Aware Contextual OE"
  • Migrated to be a grunt build instead of a hacky maven build
  • Fixed Issue #8 - Support Astral Symbols in encodeForHTMLAttribute (Thanks @stuartf and @mathiasbynens)

v0.1.0 - Initial Release

jquery-encoder's People

Contributors

chrisisbeef avatar kmartinson avatar robertdmunn avatar roger-cruz avatar stuartf avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.