Thread

Our site was originally developed by a third party. Since then, we’ve taken ownership of the site, and I’m the lead (read: only) developer working on it. We have multiple forms on the site which are delivered over SSL, yet the content isn’t. With the recent updates to Google Chrome, the pages delivered over SSL aren’t rendered properly (no pop message displayed to users to display the insecure content), and I’ve been banging my head against a wall trying to get it to work. IE and FF at least display messages about displaying the content or not.

So my question is - how can I get my CSS to be delivered over SSL when it needs to be?

After importing the stylesheets into EE, this is how I’m linking to them:

<link rel="stylesheet" type="text/css" media="screen" href="{stylesheet='styles/bootstrap'}" />

And this is how I’m linking to images within the css:

.promo li.step-1 { background: url("img/bullet-01.png") 0 50% no-repeat; }

I’ve tried changing the image urls to {site_url}img/bullet-01.png and //{site_url}img/bullet-01.png and neither work.

Any suggestions that I haven’t tried? I’m really new at working with EE, and my Google Fu seems to have failed me with this.

Thanks.

You may or may not be familiar with ExpressionEngine’s config file, which can be found at system/expressionengine/config.php. The file, as the name suggests, is where different paths and other various settings can be stored.

Here’s an example of how we set paths in our config.php file. Notice there’s a bit of logic in there to determine if the page being viewed was requested via https or not; if it was, we’ll tell EE that all URL’s in this request should include https://... instead of http://...; that way all of the links you’ve built with {site_url}, {path='...'}, {page_url}, {stylesheet='...'} etc., will return secure addresses when needed.

/***************************************************************
Logic for building our URL and Paths goes here
****************************************************************/

$root_path = '/path/to/project/on/file/system/';
$private_path = $root_path . 'system/';
$public_path = $root_path . 'public_html/';

if($_SERVER['HTTPS']){
 $public_url_component_0 = 'https';
}else{
 $public_url_component_0 = 'http';
}

// Define the public facing URL path
$public_url = $public_url_component_0 . '://example.com/'; 


/***************************************************************
We shouldn't have to touch too much (anything) below this line
****************************************************************/

$config['base_url'] = $public_url;
$config['site_url'] = $public_url;
$config['cp_url'] = $public_url . 'admin.php';
$config['theme_folder_path']   = $public_path . 'themes/';
$config['theme_folder_url']    = $public_url . 'themes/';
$config['third_party_path'] = $private_path . 'third_party/';
$config['tmpl_file_basepath'] = $private_path . 'templates/'; 
$config['snippet_file_basepath'] = $private_path . 'snippets/';

$config['upload_preferences'] = array(
    1 => array(
  'name'        => 'Documents',
        'server_path' => $public_path . 'documents/uploads/',
        'url'         => $public_url . 'documents/uploads/'
    )
);

If that’s a bit further than you want/need to go, a quick/dirty fix would be getting your CSS out of the templating engine, save it as a flat file, and reference it via an https url, ex:

<link rel="stylesheet" type="text/css" media="screen" href="https://example.com/css-files/bootstrap.css" />

My config file is very similar:

$protocol                          = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 'https://' : 'http://';
 //$base_url                          = $protocol . $_SERVER['HTTP_HOST'];
 $base_url              = $protocol . "www.domain.com";
 $base_path                         = $_SERVER['DOCUMENT_ROOT'];

My production server is set up a little bit differently. Using the PHP variable $_SERVER[‘HTTP_HOST’] on my dev environment is fine, but on the production, I can’t use that value, because it will just refer to the IP of the VM where the production code is stored. That IP address isn’t accessible by anyone outside of my office, which is why I have to make sure it’s set to the URL on production. The server that the domain name points to (which is hosted by us) grabs what it needs from this server. It’s this interaction that I think is making it a bigger issue than it should be, unfortunately. You know, if it makes any sense to anyone else besides my Ops guys.

The CSS was originally outside of EE, and I thought that might be one of the issues. Looks like it wasn’t. 😊

It’s common to need different settings between dev and production; either use different config.php files with appropriate values, or add some other logic to the file to handle your scenario.

if($_SERVER['HTTP_HOST'] == "192.168.X.Y"){
  $base_url = $protocol . $_SERVER['HTTP_HOST'];
}else{
  $base_url = $protocol . "www.domain.com";
}

Either way, it sounds like it’s just an issue of being able to specify a full, non-relative paths where you need to. If you can’t specify them with logic within config.php, you can always do it the quick/ugly/not-as-correct way.

The quick and dirty way seems to work. The stylesheets are being served up over SSL, but any images contained within are not. It looks like that should be okay, since I’m only getting warnings about the insecure content being served up over SSL, it’s not breaking the page.

I was hoping that I could figure out something a little more dynamic, but if this works, then this is what will be used.

Thanks for your help!

If you’ve got proper relative paths within the CSS all of the images should also transfer via SSL; it shouldn’t be too difficult to track down the offending images and update their paths - can easily be done w/ Firebug… or a find/replace in the CSS.