Reputation: 2932
I did a little test regarding XSS attacks in ExtJS4. My HTML page looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-all-dev.js"></script>
<script type="text/javascript" src="testExtXSS.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
and testExtXSS.js looks like this:
Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(document.cookie)</script>Text field',
value: '<script>alert(document.cookie)</script>Text field'
}
]
});
formPanel.render('myDiv');
});
I expected the script tag in fieldLabel to be executed but it was not. When I looked at the HTML elements using Firebug and Chrome Developer Tools I could see the script element in the HTML tree.
Can anyone explain to me how ExtJS inserts this into the DOM and why it is not executed.
Thanks and best regards, Ronald
Upvotes: 0
Views: 4208
Reputation: 3645
This is because the ext template is injected using innerHTML, which is the fastest approach, but comes with a drawback that scripts don't get executed.
But you can just use update() method for Ext.dom.Element:
...
{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '<script>alert(1)</script>Text field',
value: 'some val',
listeners: {
render: function(cmp) {
cmp.getEl().update(cmp.getEl().dom.innerHTML, true);
}
}
}
...
Screenshot: http://my.jetscreenshot.com/6795/20130813-pdeh-28kb (Sorry for my english)
Upvotes: 1