Building Web Projects

with Server-Side Includes, a little Perl, and some JavaScript
Hide Your HTML Comments

Hide Your HTML Comments

Published: September 10, 2024
Revised: September 18, 2024
Post a comment

Overview

If you're like most people, you like to comment your HTML files. I do this all the time, often commenting out sections that I want to save for later. And I'll add notes explaining why I'm doing this.

Well, that's all good, but as you know HTML comments are only hidden from the displayed page, not from the source file, so users are free to "view source," and see everything. But if I've gone to the trouble of detailing in HTML comments some thoughts or ideas, or maybe just commenting out sections of code, I really don't want to make those visible to other users. Not because there's anything secret necessarily, but because I'm just writing the note for myself, writing whatever I think will help me remember why I did what I did.

Below is a sample snippet for a example. You'll see that there are two HTML comments followed by two Server-Side Include (SSI) directives.

<!-- Manually set the Published Date -->
<!-- Need two formats, one that's readable, and one that's an integer for comparison. -->
<!--#set var="published" value="September 10, 2024" -->
<!--#set var="pubDate" value="20240910" -->

If I have this in my HTML page, when a user views the source they'll see this.

<!-- Manually set the Published Date -->
<!-- Need two formats, one that's readable, and one that's an integer for comparison. -->

Notice that only the first two lines are in the HTML source. That's because the server processes SSI first, then sneds the results to the browser.

Solution

Well, if I want to prevent my HTML comments from being visible in the HTML source, I simply need to add a simple SSI if-block to prevent those HTML comments from being sent to the browser, and therefore not even available in the source.

The SSI code below uses an SSI directive with the expr (expression) variable. The if-block is only displayed if the expression is true. But I've guaranteed that the expression will always evaluate to false by setting it to "1=0" which will ensure that the content of the if-block will never be displayed.

<!--#if expr=(1==0) -->
   Anything here will not be sent to the browser.
<!--#endif -->

So, using the earlier example, if I modify that to be,

<!--#if expr=(1==0) -->
   <!-- Manually set the Published Date -->
   <!-- Need two formats, one that's readable, and one that's an integer for comparison. -->
<!--#endif -->
<!--#set var="published" value="September 10, 2024" -->
<!--#set var="pubDate" value="20240910" -->

The two HTML comments will be hidden. And, of course, at this point you're free to remove the HTML comment tags and simply have your comments, like this.

<!--#if expr=(1==0) -->
   Manually set the Published Date
   Need two formats, one that's readable, and one that's an integer for comparison.
<!--#endif -->
<!--#set var="published" value="September 10, 2024" -->
<!--#set var="pubDate" value="20240910" -->

I hope you find this useful.