Cloning Disqus - Introducing CommentRFirst published on November 11, 2015
This blog is open source and is built using Jekyll, a static website generator. One of the interesting side effects of hosting a completely static website is that I don’t have a dynamic backend that I can use for comments. Comments, at a minimum, require a) a database b) a form to post comments and c) a dynamically generated view.
In the world of static websites, a new category of SaaS as sprung up around “blog hosting services”. By far the most popular service is Disqus, but there are others such as Discourse.
Rather than simply pull in one of these services, I decided to try building my own! I decided to base my design on Disqus. Except my service won’t serve ads, does not require creating an account, and won’t track you.
The bare minimum requirements:
- It must allow posting of comments without creating an account: just an author and body input.
Eventually I might add these features:
- Moderation: I should be able to delete comments, or approve comments before they’re visible.
- Moderator comments: My comments should be highlighted in some way.
- Self-Service: Someone who has just posted a comment should be able to edit or delete that comment.
- SPAM Detection: I don’t want a CAPTCHA, so I might build some trivial SPAM detector.
I decided to name my project CommentR. It’s open source and available on GitHub.
Architecturally I knew that CommentR would be a simple API service. So I started with two simple API calls:
curl -X GET /Comments?permalink=XXX curl -X POST --data "permalink=XXX&author=YYY&body=ZZZ" /Comment
GET call returns the visible comments for a page (keyed using a
permalink URL) either as JSON or an HTML fragment depending the HTTP Accept header. The
POST call submits a new comment for a page (again keyed using a
permalink URL) and returns the same result as the
And for the simplest level of “security” the API checks the HTTP Refer header from a known whitelist and rejects HTTP requests that are invalid.
This approached worked fine on my computer, but I soon as I deployed it to an Azure site and tried it I ran into the dreaded CORS issue. Rather than open up that can of worms, I decided to change gears and implement CommentR using an IFrame.
The Final Design: IFrames
As it turns out, this is the approach that Disqus uses! It’s actually very simple:
- The IFrame src is a page that displays the comments specifically for the parent page (keyed using the same
permalinkURL as before).
- All AJAX calls occur from within the IFrame, so the same-origin policy applies.
You should be able to see the final working version below. Leave a comment!