HTTPS & HTTP ExpressionEngine Site URL Tag

Question

I have found out today that if you visit an EE site that uses the {site_url} tag in the path of the css link in the document head, that the site can not load the CSS file if you type in https rather than http.

I have got round this by using a htaccess file to force onto the http, but I just wondered if there was a setting within EE that you can change to make both work?

This only happened on Chrome and IE, I am guessing depends what your browser is set up to allow security wise.

Fredricfredrick

Answer 1

When I load CSS and JS I never use the domain I just set it relatively. for example:

<link rel="stylesheet" href="/layout/styles/layout.css" >

If you try this does that work?

Ium

Gareth might be using {stylesheet=} to get the advantages of that, in which case the behavior he mentions would show up. – Avant

Hi Sean yes that worked fine and it is what I ended up doing. Deviarte answer above looks like an interesting solution? – Fredricfredrick

Answer 2

I got some great help on this problem previously. I hope it's useful to you now, too.

Avant

Hey Scott - noticed you have helped with a few EE questions. It would be awesome if you could support our EE Stack Exchange proposal here: area51.stackexchange.com/proposals/46387/… (we need people with over 200 rep) – Locular

Answer 3

Few people know that you can use protocol-relative URL's for assets

Example:

<link rel="stylesheet" href="//www.site.com/site.css">
<script type="text/javascript" src="//www.site.com/site.js"></script>

If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the https protocol, otherwise it'll request it with HTTP.

This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE, keeping all your asset requests within the same protocol.

more info from here:

A relative URL without a scheme (http: or https:) is valid, per RTF 3986: Section 4.2. If a client chokes on it, then it's the client's fault because they're not complying with the URI syntax specified in the RFC.

Your example is valid and should work. I've used that relative URL method myself on heavily trafficked sites and have had zero complaints. Also, we test our sites in Firefox, Safari, IE6, IE7 and Opera. These browsers all understand that URL format

Mirador

This is a good and elegant solution! But beware: EE apparently doesn't like to have site_url set this way, FWIW. – Avant

Thanks for this Deviarte, I am guessing if you then want to use a global variable in your templates you would just need to create one that uses //www.site.com because the standard {site_url} just outputs the http? – Fredricfredrick

Answer 4

You can use PHP in your system/expressionengine/config/config.php file to set the {site_url} configuration, including protocol, dynamically. Something like this:

// Detect protocol and server host
$protocol = (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on") ? "https://" : "http://";
$base_url = $protocol . $_SERVER['HTTP_HOST'];

// Set EE index page
$config['index_page'] = "";

// Set base and site URL
$config['base_url'] = $base_url . "/" . $config['index_page'];
$config['site_url'] = $config['base_url'];

You can build your theme paths, various image paths, upload paths, etc all from that basis in config.php. But $config['site_url'] is what affects the output of {path=""} and {stylesheet} tags.

For more ideas, see NSM's Config Bootstrap file or the article Configuring ExpressionEngine for multiple servers. For all the paths you can set in config.php, see EE2 Config Overrides

Tidemark

Answer 5

I use Nginx.

I don't know why but resources load significantly faster in various browsers if I use absolute URLs (the full path) instead of relative (/ to start the string at the domain as CreateSean said, // to start the string at the protocol as Deviarte said) (or is it that they load slower with relative URLs? I don't know.). Ergo, neither of their solutions/practices (both things that I used to do...and still do) are preferable for my environments these days.

Instead what I did is the following in the config.php:

$config['base_url'] = $_SERVER["scheme_url"];
$config['site_url'] = $_SERVER["scheme_url"];

Please note you may have to provide PHP with scheme_url if it does not already exist. If like me you are using php-fpm just add this to your configuration as/where needed in your nginx site configuration(s):

    fastcgi_param scheme_url "$scheme://$host/";

edit:

Looking around at bootstrap/configs and some use the method of prepending the protocol to the config variables (e.g. the comment by unexplainedBacn above). In Nginx by default there is no HTTPS server variable, in your virtual host configuration for php under ssl add the following:

    fastcgi_param   HTTPS   on; 

Vesuvian

Answer 6

All,

Here is how I used Apache and the Config.php file to rewrite the URLs so as not to trigger 'non-SSL content warnings' from browsers. I'm still using the {path} and {stylesheet} variables in my templates because they're just too good to pass up :)

In Apache's htaccess file:

# Set an Apache 'site_url' variable to http when accessed via http:
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ - [E=site_url:http://mysite.com]


# Set Apache 'site_url' variable to https when accessed via https
RewriteCond %{SERVER_PORT} 443
RewriteRule ^(.*)$ - [E=site_url:https://mysite.com]

Then in system/expressionengine/config.php

Add the following two lines to your code (make sure you haven't set these variables elsewhere in the config file)

$config['base_url'] = $_SERVER["site_url"];
$config['site_url'] = $_SERVER["site_url"];

As I understand it, the site_url variable is what EE uses to for {stylesheets} and {paths} in EE.

The proverbial 'One last thing':

If you're still getting the non-SSL warning, just view source and search for 'http://' in your source. These are the culprits. They're are hard coded links that are not being set with the base_url/site_url variables.

You'll need to locate those http calls in your posts/templates/variables/snippets and replace those calls with a simple //.
So a call to

http://example.com/some_file.html

should now look like this:

//example.com/some_file.html.  

This works for absolute and relative URLs.

This is also true for the path you set to the EE file upload directories. Makes sure change the url of those directories to look like this

//example.com/path/to/your/upload/directory

And voila, you should be good to go :)

Hudak