Finding hidden comments on websites can be tricky, but there are a few techniques you can use to uncover these sneaky snippets of text. In this comprehensive guide, we’ll walk through the various places hidden comments can appear and how to access them so you don’t miss out on any secret conversations.
What are Hidden Comments?
Hidden comments, also sometimes referred to as “easter eggs,” are messages, jokes or other content that is tucked away in the code of a webpage rather than being visible at first glance. They are often left by developers as inside jokes or special treats for savvy web users who know where to look.
Some common places hidden comments may appear include:
- HTML comments – Content wrapped in HTML comment tags <!– –> so it won’t display on the rendered page.
- CSS comments – Notes added after the /* marker in CSS files.
- JavaScript comments – Lines beginning with // in JS files.
- Server-side language comments – Comments made in languages like PHP or ASP on the backend.
- Metadata – Special meta tags that won’t be seen but provide extra information.
The comments can contain all sorts of random tidbits like funny jokes, song lyrics, philosophical musings or messages to future code maintenance developers. Companies may also use hidden comments for internal communication or to display Easter eggs when specific conditions are met.
Viewing Page Source
One of the easiest ways to uncover hidden comments is to simply view the page source HTML. This will expose any HTML, CSS or JavaScript comments that may not be visible when viewing the normal rendered page.
Here are instructions for viewing source code in some common browsers:
Google Chrome
- Right click anywhere on the page and choose “View Page Source” or “Inspect” to open the Developer console.
- Ctrl+U is a handy keyboard shortcut to view source as well.
- In the Developer console, the page’s HTML code can be viewed in the Elements tab.
Mozilla Firefox
- Right click and select “View Page Source.”
- Press Ctrl+U to open the page source viewer.
- Alternatively, open the Web Developer menu and click “View Source.”
Microsoft Edge
- Press Ctrl+Shift+I to open the console and access page source.
- Right click and choose “View Source” from the menu.
- In the console, switch to the Elements tab.
Safari
- Choose “View Source” from the Safari Develop menu.
- Or use the shortcut Option+Command+U.
Once you’re in the page source view, you can scroll through the HTML to check for any interesting hidden snippets. Comments will generally be pretty easy to spot based on the syntax like <!– comment –> or /* comment */.
Browser Developer Tools
In addition to page source view, most modern browsers also include a suite of web developer tools that provide another avenue to uncover hidden details. These tools give you an interactive view of the page’s HTML structure and also allow inspection of any CSS and JavaScript files loaded by the page.
To access these tools in popular browsers:
Chrome DevTools
- Press Ctrl+Shift+I (Windows/Linux) or Command+Option+I (Mac).
- Or click the menu -> More Tools -> Developer Tools.
- Comments will be visible in the Elements, Sources and Styles tabs.
Firefox Developer Tools
- Press Ctrl+Shift+I (Windows/Linux) or Command+Option+I (Mac).
- Click the menu -> Web Developer -> Toggle Tools.
- View comments in the Inspector, Debugger and Style Editor tabs.
Edge DevTools
- Hit F12 or press Ctrl+Shift+I to launch the tools.
- Comments can be found under the Elements and Sources tabs.
The Elements tab or Inspector will let you browse through the page’s HTML markup with CSS and JavaScript snippets linked or embedded. The Sources or Debugger tabs expose any external CSS and JS files where comments may be hiding out. And for good measure, peek in Styles/Style Editor for CSS commentary.
Browser Extensions
There are also various browser extensions available that are designed specifically for sniffing out and displaying hidden content on pages.
A few good options include:
- Dust-Me Selectors – Scans CSS files for selectors that appear to be unused.
- HTML5 Outliner – Reveals hidden HTML sections and DOM elements.
- JavaScript Deobfuscator – Unpacks minified JS code into a more readable format.
- XSSer – Highlights potential cross-site scripting (XSS) security risks.
These tools work by programmatically scanning through the code and employing some smart heuristics to identify patterns that may indicate hidden content. The results enable you to quickly pinpoint areas worth investigating closer through view source.
The Wayback Machine
If you come across a site that once had some funny hidden easter eggs that now seem to have disappeared, the Internet Archive’s Wayback Machine can help you look up what used to be there.
To view a snapshot of a site from a different point in time:
- Go to archive.org.
- Enter the URL in the search bar and choose a date range.
- Click on a calendar date to see that archived version.
- Browse through the source code on that date to uncover formerly hidden parts.
This can be great for recovering hidden content that has been removed on the live site but preserved in an old snapshot. Just keep in mind the Wayback Machine doesn’t archive every page from every date, so you may have to do some digging to find what you need.
Ctrl+A Selection
Here’s a sneaky trick that takes advantage of how your browser handles text selection to spot hidden HTML elements.
- Load the page you want to inspect.
- Press Ctrl+A (Windows/Linux) or Command+A (Mac) to select all text on the page.
- Look for any sections highlighted in blue – these indicate the presence of hidden HTML components!
- Right click on the blue-highlighted area and choose “Inspect Element” to analyze further in developer tools.
The blue highlights appear because browsers will select the contents of HTML tags even if they are hidden or collapsed. So invisible divs, spans, comments, etc. can potentially be revealed this way.
Searching Through Site Files
If a site has an open filesystem you can access, searching directly through the source code files is an exhaustive way to turn up hidden bits. There are a couple approaches to try:
Using site: Search
- Many websites allow searching their content via Google using site: queries.
- Try searching site:example.com comments to turn up pages with mentions of comments.
- Other useful searches could include easter egg, secret, hidden, etc.
Browsing Server Directories
- Some sites may leave their server directories open for browsing.
- Navigate to the root folder and dig through source files for comments.
- Often the /src folder is a good place to look.
If you have any access to directly look through a site’s source code repository, this can provide conclusive searching to uncover all kinds of hidden gems.
Using Development APIs
Modern web frameworks provide developer APIs that you can sometimes leverage to extract hidden page details:
React Developer Tools
- Allows inspection of React component hierarchies and properties.
- May expose initially hidden components.
- Comments left in JSX source will also be visible.
Vue.js Devtools
- Lets you browse through Vue instance data and component trees.
- Source comments readable via Code tab.
- Some hidden functionality may be discerned from data bindings.
Angular Augury
- Debugging and visualization platform for Angular apps.
- Can reveal concealed components and framework comments.
- Read through displayed source code for insights.
If you know the web framework used by the target site, the devtools for that platform can provide additional insider access. This takes more work than a simple view source, but yields deeper technical visibility in return.
Searching Social Media
There may be chatter on social networks alluding to hidden aspects of websites:
- Reddit – Subreddits like r/programming may have posts about undisclosed site details.
- Twitter – Developers will sometimes tweet funny stuff they hid.
- Quora – Could potentially find firsthand descriptions of Easter eggs.
- GitHub – Comb through project issue tracker for clues.
While social searching takes more effort, it provides the advantage of tapping into insider perspectives. Developers working on a site may reveal Easter eggs on their profiles that would otherwise be difficult to find through analysis alone.
Using Automated Scanners
More advanced tactics involve utilizing automated scanning tools to methodically comb through site files for unusual artifacts or patterns:
Custom Scripts
- Writing a Python or Node script to recursively analyze source files can be helpful.
- Natural language processing can be used to flag irregular comments.
- Custom heuristics could identify common hidden code characteristics.
Burp Suite
- Powerful web app analysis and hacking tool.
- Contains a Scanner tool to automatically find comments, easter eggs, etc.
- Can spider entire site map and inspect all associated code.
ZAP Proxy
- Another dynamic application security testing (DAST) tool.
- Its spider can crawl all linked content and assets.
- Fuzzing feature helps uncover hidden inputs.
Automated scanning enables broad site coverage but requires more technical skill. Well-configured, these tools can sometimes surface deeply buried secrets a manual inspection would miss.
Hacking The Site
On extremely obscure hidden content, sometimes ethical hacking techniques are needed to finally bring secrets to light:
Analyze Network Traffic
- A proxy tool like OWASP ZAP can intercept and log all network requests.
- This data can then be mined for evidence of unseen assets being loaded.
- Strings related to potential Easter eggs may appear.
Reverse Engineering
- Decompiling a site’s mobile app or downloaded script files may reveal hidden functions.
- Disassemblers like IDA Pro and Ghidra can analyze compiled code.
- Easter egg logic may be buried in obscure code paths.
Fuzzing
- Fuzzing tools use invalid random data as input to find vulnerabilities.
- This technique could also trigger conditional display of secret content.
- BBQSQL and wfuzz are two popular web fuzzers.
While resource intensive and requiring technical expertise, hacking techniques provide a no-holds-barred approach to unearth buried artifacts. Always ensure you comply with ethical guidelines and ask for permission where appropriate.
Crowdsourcing Discovery
For particularly elusive hidden content across large sites, a crowdsourced effort could be very productive:
- Post on forums asking people to help search for secrets on a site.
- Split up areas of the site between different people.
- Create a shared document for everyone to log their findings.
- Offer prizes or recognition for major discoveries as motivation.
By distributing the work across a wider group, crowdsourcing allows much wider coverage than an individual can achieve alone. And some Easter eggs may only reveal themselves through specific complex input sequences best discovered collaboratively.
Conclusion
Hidden web content offers an intriguing form of mystery and fun on modern sites. As we’ve covered, uncovering these concealed extras calls on your full creativity and puzzle-solving skills combining everything from simple view source tricks to advanced network hacking.
Some key takeaways:
- View page source for easy-to-find HTML, CSS and JavaScript comments.
- Utilize browser developer tools for interactive code inspection.
- Leverage extensions, APIs and site search to expand visibility.
- Dig through social media for hints from those in the know.
- Apply automation and hacking to leave no stone unturned.
With persistence and the right combination of techniques, you can peel back any site’s hidden layers. Happy hunting!