When integrating a shopping cart into a web site you obviously need to switch to an SSL environment before asking for any payment details, and you want the SSL site to look as nice as the main site does, or identical to the main site in fact. But you don’t want to have two copies of everything because then you would have to maintain two copies of everything which is a pain in the butt. So you make sure to use a <base href= in the header and relative paths for all your links so that they redirect back to the non-SSL site. Then you can set your images and resources such as CSS and Javascript files with full paths specifying https:// and it should all work right?
Well, it turns out that images specified within a CSS file will not load in SSL unless the full URL is specified. This wouldn’t be a problem in a normal PHP script because you could just put a condition in such as this:
<img src="<?= $_SERVER['HTTPS'] == 'on' ? $SSL_URL : '/' ?>images/global/logo.jpg" border="0" />
But CSS files are generally not processed by the PHP compiler so this method isn’t going to work. What I ended up doing in this situation was to intercept the call to the CSS file and redirect it through a PHP script which would process the CSS file automatically before returning the modified style information with the correct URLs.
The first step was to modify the path of the CSS file being called in the event of the call coming from SSL:
<link rel="stylesheet" type="text/css" href="/css/<?= $_SERVER['HTTPS'] == 'on' ? 'payments-' : '' ?>shop.css" />
This change means that any CSS file requested from SSL will have the prefix payments- in the filename. Then I created a mod-rewriting rule for Apache to follow when retrieving the CSS file:
RewriteRule ^css/payments-(.+)$ includes/css_rewrite.php?css_file=$1 [L,QSA]
The effect of this rule is that any CSS file that is requested and has the prefix payments- will be redirected to a PHP script where the final piece of magic occurs. In the PHP script, the original CSS file is opened and processed line by line. The objective here is to correct any image pages. I did this as follows:
$line = str_replace("url(images", "url(".$SSL_URL.'images', $line);
You can use Regex or any string replacement method you like for this. Obviously, you also need to cater for URLs that have leading slashes or use .. for parent directories, and you also need to consider that the URL may be enclosed in single or double quotes.
Once all lines in the file have been processed you simply need to set the content type of the output:
header('content-type:text/css');
And then output the modified CSS file:
echo $new_contents;
The biggest benefit that I have found of tackling the problem in this way is that there is minimal effort required to maintain the CSS. Any new CSS file that is added or any change to any existing CSS file is automatically handled as long as the CSS file is called correctly in the first place. There is no need to maintain two separate copies of the CSS or for the web design guys to give any special considerations to the problem when creating the CSS.
About Jared
