PDA

View Full Version : Ext.ux.CssProxy



xantus
14 Jan 2009, 8:57 PM
I created an Ext user extension called Ext.ux.CssProxy (http://xant.us/ext-ux/examples/css-proxy/). It works like the ScriptTag proxy but data is encoded in CSS. This technique is safer because the data isn't executed, it is parsed out.

I included several demos, including one that loads an Ext grid with the CssProxy and JsonReader.

License: Apache v2

Enjoy!

Animal
15 Jan 2009, 1:55 AM
Very nice concept for when you are accessing data from a 3rd party. Much more secure (as long as you don't then eval the returned data, but programmatically parse it as JSON.)

Could you abstract that from a Proxy, and into a more generalized tweak to Ext.data.Connection so that it can be used for all Ajax requests, and not just those made through Proxies?

That way it can be used in a more general way, eg: TreeLoaders and Ext.form.Action calls.

dolittle
15 Jan 2009, 2:18 AM
With ScriptTag proxy you can do only synchronous request even if they are from different domains. The browser execute script tags in the order they are being added to the DOM.

Does css proxy behave the same?

Animal
15 Jan 2009, 4:10 AM
With ScriptTag proxy you can do only synchronous request even if they are from different domains. The browser execute script tags in the order they are being added to the DOM.


This is only true during initial document load.

During programmatic manipulation of the DOM, it's all asynchronous. After appending the new <script> element to the <head>, your javascript execution continues.

xantus
15 Jan 2009, 8:42 AM
Very nice concept for when you are accessing data from a 3rd party. Much more secure (as long as you don't then eval the returned data, but programmatically parse it as JSON.)

Exactly :)



Could you abstract that from a Proxy, and into a more generalized tweak to Ext.data.Connection so that it can be used for all Ajax requests, and not just those made through Proxies?

That way it can be used in a more general way, eg: TreeLoaders and Ext.form.Action calls.

Sure, I planned on doing that too.

...but for now, here's one example on how to get some remote data using CssProxy.

I know you know how to use this stuff, but this is for everyone else.


SimpleReader = function() {
SimpleReader.superclass.constructor.apply(this, arguments);
};
Ext.extend(SimpleReader, Ext.data.DataReader, {
read: function(r) { return r.responseText; },
readRecords: function(o) { return o; }
});

var conn = new Ext.ux.CssProxy({ url: "http://s.nb.io/hacks/csshttprequest/time-json/" });
conn.load(
{ }, // params
new SimpleReader(), // reader
function(r) { // callback
r = Ext.decode(r); // convert to json, warning! this evals
alert('Happy '+r.year+'! iso:'+r.isoformat);
}
);

dolittle
15 Jan 2009, 10:56 AM
@Animal


With ScriptTag proxy you can do only synchronous request even if they are from different domains. The browser execute script tags in the order they are being added to the DOM.
This is only true during initial document load.

During programmatic manipulation of the DOM, it's all asynchronous. After appending the new <script> element to the <head>, your javascript execution continues.

javascript execution continues but you can't execute new script tags until the old one arrives at least in some browsers (FF3).

Animal
15 Jan 2009, 1:13 PM
Exactly :)



Sure, I planned on doing that too.

...but for now, here's one example on how to get some remote data using CssProxy.

I know you know how to use this stuff, but this is for everyone else.


SimpleReader = function() {
SimpleReader.superclass.constructor.apply(this, arguments);
};
Ext.extend(SimpleReader, Ext.data.DataReader, {
read: function(r) { return r.responseText; },
readRecords: function(o) { return o; }
});

var conn = new Ext.ux.CssProxy({ url: "http://s.nb.io/hacks/csshttprequest/time-json/" });
conn.load(
{ }, // params
new SimpleReader(), // reader
function(r) { // callback
r = Ext.decode(r); // convert to json, warning! this evals
alert('Happy '+r.year+'! iso:'+r.isoformat);
}
);


You know that JsonReader uses eval, so any data returned by any Ajax method will be passed throuigh eval() and be vulnerable to executable script being placed in it.

From JsonReader.js:



read : function(response){
var json = response.responseText;
var o = eval("("+json+")");
if(!o) {
throw {message: "JsonReader.read: Json object not found"};
}
return this.readRecords(o);
},

xantus
15 Jan 2009, 2:14 PM
You know that JsonReader uses eval, so any data returned by any Ajax method will be passed throuigh eval() and be vulnerable to executable script being placed in it.

From JsonReader.js:



read : function(response){
var json = response.responseText;
var o = eval("("+json+")");
if(!o) {
throw {message: "JsonReader.read: Json object not found"};
}
return this.readRecords(o);
},


Yes I know. I was just talking to abe about it yesterday. I did put a little warning in the example code above. Btw, I didn't use the JsonParser in the example above, because it returns records.

Ext.decode also uses eval. You will only get protection if you know how to avoid execution, and use a json parser. Although...core Ext doesn't have a json parser.