Ajax on HTTPS

**leroyuk1983** · 06-01-2012, 06:46 PM

Hi all,
I have a question, I have used the Ajax (slide out iFrame) on my website, works great when viewing on my local machine and on my testing server (HTTP) but as soon as I put it on my secure server at work, the Ajax script does not work properly.

I'm not advanced in servers so was wondering if anybody could shed some light on this? I do know that all servers can handle server side scripts.

Thanks
L

**djr33** · 06-01-2012, 06:52 PM

I do know that all servers can handle server side scripts.

I don't know exactly what you mean by this, but that's not necessarily true. Certainly most servers are technically capable of one serverside language or another, but that doesn't mean that every script will work on every server or that you'll have all of the privileges to run such a script on a server.
You should be able to test that by visiting the URL directly, though.

Regarding the main problem, AJAX has strict security requirements (set by the browser) that block anything from another domain. This can be for a truly different domain (eg, google.com and yahoo.com) or even for subdomains (like 1.google.com and 2.google.com). I believe that this applies for HTTP vs HTTPS as well. So you need to have the HTTPS webpage request the HTTPS ajax data, and the HTTP webpage request the HTTP ajax data.

You should be able to use a serverside language to set this in a dynamic way if you'd like. Or just do it by hand if you aren't using a serveside language to generate your pages. But you can't have exactly the same page on HTTPS and HTTP then. One way to do this would be to use a relative (non-absolute) URI in your ajax call. So instead of "http://my.site/path/..." you can use just "/path/..."

There are ways around the security requirements (if you can modify both the sending and receiving script) such as using JSONP, but that can get complicated.

**leroyuk1983** · 06-01-2012, 07:22 PM

Thanks for the info Daniel, what I meant by all servers are capable of running scripts, I meant all three of my servers are capable of running the scripts.

**jscheuer1** · 06-02-2012, 06:03 AM

What Daniel is saying is basically true. But it might be a little overcomplicated.

As a general rule, if it works on HTTP, it will work on HTTPS. However, all files must be on HTTPS.

Often overlooked is a script library, like if you use jQuery from Google, ex:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

That will at the very least raise a warning flag on an otherwise all HTTPS page.

Fortunately Google hosts on both, so you can simply change that to:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

**djr33** · 06-02-2012, 10:26 AM

Good point John.

There are two possibilities:
1) You're using AJAX content. That's what I was responding to in my post above. AJAX content must be loaded from the same domain (due to security restrictions).

2) You're loading Javascript (.js files), not AJAX content (even if this JS has code that uses AJAX later). Then all you need is to match HTTPS if it's HTTPS. (But HTTPS or HTTP should work if you're on HTTP.) This works even if it's on a different domain.

The second situation is much easier to fix, as John pointed out. So just add the S to HTTPS in the URL for the Javascript.
The first, if you want content loaded via AJAX, will require the more complex version I explained above.

If you need more help with it, show us a link to your page so we can see exactly what's happening, and/or just let us know if you're dealing with situation (1) or (2), or both.

**leroyuk1983** · 06-03-2012, 10:21 PM

Thanks guys, makes perfect sense, I'll look in to these tomorrow morning.

Lee

**leroyuk1983** · 06-15-2012, 05:07 PM

Hi, sorry for the late reply, i have been working on other projects.
I tried adding the S to the http but again, it did not work.

The <head> section of the web page is

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>SCM Assessments | External Examiners</title>
<link href="microsite_style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>
<script type="text/javascript" src="detection.js"></script>
<link rel="stylesheet" type="text/css" href="css/microsite_sidebar/sidebar.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="src/jquery.sidebar.js"></script>
</script>

The .js script can be found here: view

Any further help would be appreciated

Thanks
Lee

**jscheuer1** · 06-15-2012, 11:49 PM

The problem could be unrelated to http/https. You have two instances of jQuery on the same page:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>
<script type="text/javascript" src="detection.js"></script>
<link rel="stylesheet" type="text/css" href="css/microsite_sidebar/sidebar.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

That in itself can often spell trouble. Though there are always exceptions, generally at worst an http/https mismatch should only cause a security warning. Some browsers may not even give that.

But having two instances of jQuery on the same page will often render the script that relies upon the first instance of jQuery inoperable - which sounds more like what's happening here.

For further diagnosis, the best thing would be to have a link to the live page.

**leroyuk1983** · 06-16-2012, 07:42 PM

Thanks again John, I thought that the above highlighted scripts were different instances of jquery. Can you explain the differences??

Is it just locations of where the script is saved? But both are trying to o the same thing?

Unfortunately, I can't share a link as the site sits on a secure server which requires a username and password to access.

Lee

**jscheuer1** · 06-16-2012, 11:24 PM

I just noticed you're missing the script credits on the page:

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

You could PM me the address, username and password.

I might still need to see the page, because there's other code I cannot see and considerations (like possibly other scripts, styles, etc. you're not showing, missing scripts or stylesheets, or incorrect markup, etc.) I cannot detect from your post that might impact this solution. But let's give it a try first.

Replace everything in your post with this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>SCM Assessments | External Examiners</title>
<link href="microsite_style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/microsite_sidebar/sidebar.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>
<script type="text/javascript" src="detection.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="src/jquery.sidebar.js">
/***********************************************
* Ajax Side Panel script- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>

Notes:

Much has changed, so rather than explain each individual change, just copy and paste the entire code block over what you've got in your post.

Be especially careful in that the code in your post has a trailing </script> tag that cannot belong. I've removed it.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you're still having problems and want more help, either PM me the info so I can see the page, or put up a demo somewhere public that demonstrates the problem and post a link to it.

I question whether or not you need:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Which was:

Code:

<script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>

because neither of the DD scripts need it and it's probably too late for the detection.js to use and if that name is descriptive, it probably doesn't need it anyway. Do you have other scripts on the page that need it?

If not, get rid of it.

Thread: Ajax on HTTPS

Thread Tools

Search Thread

Ajax on HTTPS

The Following User Says Thank You to djr33 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions