Background:
- To optimize for IE6 is a pain in the !$”§$ - Therefore we want to display a warning message when a user visits one of our Drupal pages with Internet Explorer 6.
- We have multiple Drupal sites running on the same machine with the same IP address. Some of sites use HTTPS certificates. In order to use different certificates SNI is uses to differentiate between the certificates (see http://en.wikipedia.org/wiki/Server_Name_Indication). However, under Windows XP no version of Internet Explorer is capable of SNI. Users accessing secured pages from Windows XP get sent a wrong certificate – Therefore we want to display a warning for that.
Solution:
I created a block, that checks for XP with any version of Internet Explorer and if found displays a warning message. The same block also displays a warning message when IE6 is found – that would get displayed on later Windows Versions that still run IE6 – I don’t know if that is a use case, but it is still nice to have.
It looks like this:
Here is the block (input type php):
<?php
//User Agent String
$ua = $_SERVER["HTTP_USER_AGENT"];
//Test for XP with IE
$xp = false;
if(strpos($ua, ‘Windows NT 5.’) || strpos($ua, ‘Windows XP’)) {
$xp = strpos($ua, ‘MSIE’) ? true : false;
}
//Test for IE6
$ie6 = strpos($ua, ‘MSIE 6.’) ? true : false;
//Disable potential caching of this page
if($xp || $ie6) {
$GLOBALS['conf']['cache'] = FALSE;
}
//Testing
//print “<p>$ua</p>”;
//$ie6 = true;
//$xp = true;
?><?php if($xp): ?>
<div id=”security-warning”>
<div id=”security-warning-close”>
<a class=”close” href=”#” onclick=”javascript:document.getElementById("security-warning").style.display="none"; return false;”>x</a></div>
<table id=”security-warning-table”>
<tbody>
<tr>
<td id=”warning-icon” rowspan=”2″>
<img alt=”Warning!” src=”/sites/awo-rtk.de/files/icons/warning1.png” style=”width: 48px; height: 48px;” /></td>
<td class=”warning-message-bar” id=”warning-message” rowspan=”2″>
<b>Ihr Browser ist unsicher!</b>
<p> </p>
<p>Auf dieser Seite werden Sicherheitsstandards eingesetzt, die von Windows XP nicht unterstützt werden. Bitte verwenden Sie einen anderen Browser.</p>
</td>
<td class=”browser-link-icon”>
<a href=”http://www.firefox.com” target=”_blank”><img alt=”Firefox” src=”/sites/awo-rtk.de/files/icons/firefox.png” style=”border-style: none; width: 48px; height: 48px;” /></a></td>
<td class=”browser-link-icon”>
<a href=”http://www.apple.com/safari/download/” target=”_blank”> <img alt=”Safari” src=”/sites/awo-rtk.de/files/icons/safari.png” style=”border-style: none; width: 48px; height: 48px;” /></a></td>
<td class=”browser-link-icon”>
<a href=”http://www.google.com/chrome” target=”_blank”> <img alt=”Get Google Chrome” src=”/sites/awo-rtk.de/files/icons/chrome.png” style=”border-style: none; width: 48px; height: 48px;” /></a></td>
</tr>
<tr>
<td class=”browser-link-text”>
Firefox</td>
<td class=”browser-link-text”>
Safari</td>
<td class=”browser-link-text”>
Chrome</td>
</tr>
</tbody>
</table>
</div>
<?php elseif($ie6): ?><div id=”security-warning”>
<div id=”security-warning-close”>
<a class=”close” href=”#” onclick=”javascript:document.getElementById("security-warning").style.display="none"; return false;”>x</a></div>
<table id=”security-warning-table”>
<tbody>
<tr>
<td id=”warning-icon” rowspan=”2″>
<img alt=”Warning!” src=”/sites/awo-rtk.de/files/icons/warning1.png” style=”width: 48px; height: 48px;” /></td>
<td class=”warning-message-bar” id=”warning-message” rowspan=”2″>
<b>Ihr Browser ist veraltet!</b>
<p>Auf dieser Seite werden moderne Sicherheitsstandards und Darstellungsformen eingesetzt, die Ihr Browser nicht unterstützt. Bitte verwenden Sie einen anderen Browser.</p>
</td>
<td class=”browser-link-icon”>
<a href=”http://www.firefox.com” target=”_blank”><img alt=”Firefox” src=”/sites/awo-rtk.de/files/icons/firefox.png” style=”border-style: none; width: 48px; height: 48px;” /></a></td>
<td class=”browser-link-icon”>
<a href=”http://www.microsoft.com/windows/internet-explorer/” target=”_blank”> <img alt=”Internet Explorer” src=”/sites/awo-rtk.de/files/icons/ie.png” style=”width: 48px; height: 48px;” /></a></td>
<td class=”browser-link-icon”>
<a href=”http://www.apple.com/safari/download/” target=”_blank”> <img alt=”Safari” src=”/sites/awo-rtk.de/files/icons/safari.png” style=”border-style: none; width: 48px; height: 48px;” /></a></td>
<td class=”browser-link-icon”>
<a href=”http://www.google.com/chrome” target=”_blank”> <img alt=”Get Google Chrome” src=”/sites/awo-rtk.de/files/icons/chrome.png” style=”border-style: none; width: 48px; height: 48px;” /></a></td>
</tr>
<tr>
<td class=”browser-link-text”>
Firefox</td>
<td class=”browser-link-text”>
IE 8+</td>
<td class=”browser-link-text”>
Safari</td>
<td class=”browser-link-text”>
Chrome</td>
</tr>
</tbody>
</table>
</div>
<?php endif; ?>
Here is the CSS:
#security-warning {
border: 3px solid #EEE;
padding: 10px;
margin: 10px;
position: relative;
}
#security-warning-close {
position: absolute;
right: 5px;
top: 0px;
}
#security-warning-close a {
color: #999;
text-decoration: none;
}
#security-warning-table td {
padding: 5px 10px;
vertical-align: top;
}
#security-warning-table img {
padding-top: 20px;
}
.browser-link-icon {
}
.browser-link-text {
}
.browser-link-icon,
.browser-link-text {
text-align: center;
}
.warning-message-bar {
border-right: 1px solid #EEE;
}
Icons:
You can find the icons at http://www.iconfinder.com/

