Running a popular website can be very expensive. Hotlinking is one of the ways hosting can become unnecessarily expensive for webmasters. Unauthorized websites might be driving up the costs of bandwidth, CPU usage, and even storage. (Yes, hotlinking even affects server storage. Each time a visitor visits a website, the server log file can grow.) What are you to do? There are lots of ways to prevent hotlinking, but this Free Hype Template shows how to add JavaScript to deter hotlinking.
Here’s the example…
It’s not much to see. It’s just an unlocked emoji icon, the word “Unlocked” and a button that links to A Book About Hype. What’s going on here?
Well, since Photics.com is authorized to display this Hype project, the “Unlocked” scene is shown. But if this project was loaded from an unauthorized website, the “Locked” scene would be shown. The following JavaScript code is essentially the lock.
1 2 3 4 5 6 7 8 9 | var ok = "photics.com"; // Permitted domain name var hn = window.location.hostname; // Hostname var phn = parent.location.hostname; // Parent Hostname if (hn == ok || hn == "127.0.0.1") { if (phn == hn) { hypeDocument.showSceneNamed("Unlocked"); } } |
The first line sets the “allowed” variable to the authorized website. It’s the domain name or host name of the website. The second line sets the “host” variable to the host website. This is the URL of the page that loads the JavaScript.
127.0.0.1 is allowed because that’s what the Hype App uses to “Preview” the project locally.
This is where it gets a little confusing. If someone simply embedded your Hype html page with an iFrame, just checking the Hostname is not enough. There’s a second check to see if the Parent Hostname is the same as the Hostname. This prevents someone from loading the Hype project with an iFrame or loading the JavaScript directly.
Although, this is not an impenetrable defense. It’s more of a deterrent. It doesn’t prevent someone from simply copying the Hype files to their server and altering the code. The lock is designed to limit hotlinking. This site uses .htaccess (Apache server) to prevent hotlinking. If you can’t use that in your environment, the “lock” template represents an alternative method.
Another important note – the template defaults to the “Locked” scene. That means the project is locked on startup. Only if the correct parameters have been met, then the next scene is loaded.
Even if you’re not concerned about hotlinking, this method can be modified for other effects. Perhaps you’re creating a video game. A password system could be used to skip levels. It’s the same basic idea. If the entered password is the same as the level’s password, then load that level’s scene.
Hype makes this stuff easy, but the same general idea applies to JavaScript. All sorts of JavaScript code can be triggered from a hotlinked JavaScript file. While you might feel the urge to get revenge against the offenders, I recommend staying professional and don’t be malicious. The “lock” template simply displays a warning message and prevents access to the content. It doesn’t try to crash the browser or trigger any other such retaliatory actions.
You can download and run the Lock Hype Template to see for yourself.
It’s also a good moment to think about this matter in reverse. Are you using Google Analytics? Lots of websites do. The analytics.js file is a JavaScript file from a server other than your own. That file is controlled by Google and it can change at any time. Do you know what it’s doing exactly? A large part of the Internet depends on massive corporations to remain benevolent, to be secure, to be free of error. If something goes awry with just a single JavaScript file, the damage could be far reaching.
That’s why this is an important issue for web developers to understand. How are your files being shared? How are you sharing files? With just a few extra lines of code, you can better protect your content.