Using comments to ‘hide’ SCRIPT tag content – please stop this obsolete practice

Many years ago, when HTML3 and 4 were still widely used in the mid to late 1990s, it was a common practice to place HTML style comments, or in some cases CDATA comments inside the SCRIPT tag in an attempt to hide that content from browsers that could not process it. In those browsers the content (javascript source code) would sometimes be displayed on the page, making it quite a mess.

This practice is now obsolete, and often problematic as there are very few of those browsers in use today – primarily only for testing of legacy functionality.

Example of old approach

<script type="text/javascript">
<--
// some script
-->
</script>

NOTE: for XHTML or XML documents, the use of a CDATA style comment is still required.
<script type=”text/javascript”>
//<![CDATA[
…code…
//]]>
</script>

REFERENCES:

Security through obscurity – hiding your server version information

I’ve recently spent a lot of time reviewing the OWASP documentation, and (like many corporations) realized that I’d neglected to keep up with this configuration item.

By sharing the exact version of each piece of server software you are using, “hackers” are able to quickly identify unpatched systems and their known vulnerabilities.

To make their work harder, there are a few simple steps that the server admin can take to remove this information from the HTTP Headers and error pages.

Apache HTTPd:

  1. sudo vi /etc/apache2/conf-enabled/security.conf
  2. Add:

    ServerTokens ProductOnly
    ServerSignature Off
  3. If using virtual hosts, add the following to each one:
    ServerSignature Off
  4. sudo service apache2 restart

Apache Tomcat:

  1. vi /opt/tomcat7/conf/server.xml
  2. Find the <Connector > entry and add:
    server="Apache"
  3. cd /opt/tomcat7/lib
  4. mkdir -p org/apache/catalina/util
  5. vi /opt/tomcat7/lib/org/apache/catalina/util/ServerInfo.properties
    server.info=Apache Tomcat
  6. sudo service tomcat7 restart

PHP “X-Powered-By: PHP/5.x.x-1ubuntuX.X”

  1. sudo vi /etc/php5/apache2/php.ini
    expose_php = Off
  2. sudo service apache2 restart

REFERENCES:

Hiding Firebug Lite controls in browser

I started getting extremely tired of the FireBug Lite overlaying content in some of my legacy websites. By taking a look at the markup it was adding, I found a quick and easy way to hide it for most users.

Adding the following to one of your CSS files should do the trick…


/* Begin hide FireBug Lite */
#jsConsole,
#jsConsoleShowSourceButton,
#jsConsoleHideSourceButton,
#jsConsoleShowConsoleButton,
#jsConsoleHideConsoleButton { display:none; }
/* End hide FireBug Lite */

NOTE: I have not yet confirmed, but this approach should work in other browsers such as MSIE, Chromium and Safari that also may use FireBug Lite.

No JavaScript support

There are still a measurable number of internet users that browse without the use of JavaScript, use the NoScript plugin, or have disabled it for security purposes. In those cases, as well as for SEO. It’s often a good idea to manipulate the display to better accomodate these users. One of the most common methods is shown below, as we can toggle a CSS class on the HTML tag easily and use CSS “cascade” to hide or show alternate content.

NOTE: this example currently requires PrototypeJS, but can easily be changed to not do so.


<!DOCTYPE html>
<html class="no-js">
<head>
<script type="text/javascript">
var ar = document.getElementsByTagName('html');
var i = ar.length;// should only be one!
while(i--){
Element.removeClassName(ar[i],'no-js');
}
</script>
<style type="text/css>
html .no-js-show { display:none; }
html.no-js .no-js-show { display:block; }
html.no-js .no-js-hide { display:none; }
</style>
</head>
<body>
JavaScript is:
<p class="no-js-hide">enabled</p>
<p class="no-js-show">JavaScript is disabled</p>
</body>
</html>

Hide Focus attribute and CSS

This is an odd MSIE proprietary attribute (‘hidefocus‘) that is used to remove the dotted border (outline) of the focused elements, usually links or images, in the page. Modern CSS is much more robust and should be used in most cases for valid HTML.

The example below requires you to add the class specifically to elements, but your design may allow for you to do so for as elements of larger components of your design.

<style type="text/css">
.hidefocus:focus {
outline: none;
}
</style>

<a href="#" class="hidefocus" hidefocus="true">Some link</a>

NOTE: You should still provide some sort of visual focus mechanism for accessibility purposes, even when you prevent the default behavior.

REFERENCES: