HTTPS & HTTP ExpressionEngine Site URL Tag - expressionengine

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.

Answer 1

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

Answer 2

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

Answer 3

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?

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

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;

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 :)