View Full Version : FormPanel and SSL

22 Nov 2007, 10:13 PM
Hi to everybody!

First of all, I've been using Ext2.0 for a short while, so I'm not an expert in its internal behavior.. and I will appreciate any guidelines you could give me..

I'm developing a website that requires username/password authentication.. I have put a login form in the home page using FormPanel. Here is the code of this form:

Ext.form.Field.prototype.msgTarget = 'side';

var loginForm = new Ext.FormPanel({
url: 'http://myserver.com/users/login.json',
title: 'Login',
defaultType: 'textfield',

items: [{
fieldLabel: 'Username',
name: 'username'
fieldLabel: 'Password',
name: 'password',
inputType: 'password'

buttons: [{
text: 'Login',
handler: function(){
success: function(form, action) {
Ext.MessageBox.alert('Logged in', 'Login successful');
window.location.href = 'http://myserver.com/users/access';
failure: function(form, action) {
title:'Login error',
msg: 'Wrong user/password.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR


The form sends credentials to a CakePHP script using Ajax and return the response in JSON format (basically success true or false). All this things work properly..

The problem is when I try to use SSL, sending users credentials to https://myserver.com/users/login, instead of http://myserver.com/users/login. If all the home webpage is loaded as SSL, things also work ok.. but if I only change the schema on form URL to https, credentials are not sent (I've check this using firebug and apache log). The same happens if all the webpage is loaded as SSL and I send the form to http.

I suppose this is a kind of security measure to avoid Cross Scripting issues, so I want to ask you if exist some kind of walk around to allow this behavior. I don't want to force all the contents in my website to be encrypted by server, including home page..

I've been thinking to put LoginForm into an IFrame, loaded by SSL, to avoid this kind of problem, but I think this solution is not elegant and also forces me to load Ext scripts twice (one time in the home page and another time into the iframe).

So.. any suggestion? Thank you for your help.. ;)

23 Nov 2007, 1:43 AM
I think it will be the same origin policy.

Ext forms use Ajax to submit their payload, and return a response to your callback. Ext.Ajax uses an XHR, and since the page didn't come from the https address, it's refusing to send the sbumission.

If you have control of the server script, you could use cross-domain Ajax using script tags.

I have posted an extension to Ext.Ajax to enable it to use script tag transport. See the User Extensions forum.

You will have to set Ext.Ajax.scriptTag = true before submitting.

27 Nov 2007, 10:42 AM
Hi Animal,

Thank you so much for you answer and sorry for my late response.. I wanted to try first your solution in order to post here the results. Using it, I've been able to send the authentication request by SSL maintaining the original page as non-SSL.

The only inconvenient of this method is that you have to send the username and password as params in a GET request (so it goes in the address). But since Ajax url requests are not cached by browser history and all the request goes encrypted by SSL, it's not a major problem (if you can control the way the request is processed).

Although, it would be nice if requests also could be sent using POST method, in order to use this great capability as a wide solution.

Again, thank you for your help.