November 9, 2015 8:04 pm

Some Useful tiny JavaScript functions

In this article, we will create a library with a few small but useful JavaScript functions. Our library is encapsulated in a usefulStuff object.

Useful tiny JavaScript functions

Force HTTPS in JavaScript

We can use JavaScript to check if the users are on a secure (HTTPS) page and redirect them to the HTTPS equivalent of the current page if they are not on one, at the moment.

HTML characters and security

As JavaScript does not have a built-in function which performs the task of PHP’s htmlentities or htmlspecialchars we can easily build one. However, we do not want to convert all HTML special characters to their equivalent entities or vice-versa. We just want to convert enough of them to prevent users from adding scripts and other possibly malicious tags and attributes through their input.

To convert the special characters in HTML to harmless entities we can just use multiple global replaces:

Doing the opposite just requires you to replace the entities to special characters:

Parse query string with JavaScript

Another useful thing that you are probably aware of is parsing the GET parameters in the URL. You know that you can access them with window.location.search but the value returned is just a string with raw parameters that you have to parse, something like this: “?a=1&d&bb=355&grr=hello”. Therefore, we can create a small function which will take any URL as an argument and convert the GET parameters into an object that can easily be used within the application.

Using the function and the object is shown in the picture below:

usefull javascript

Break your website out of iframes

Our last method will break you out of almost any iframe, no matter who put your webpage in the iframe. If person X tries to add an iframe to a webpage on your website which calls the escapeFrames method then whenever a visitor opens person X’s webpage with the iframe the visitor will end up in your website.

To exemplify, if in index.html we call the escapeFrames method:

Then, in another page called other-page.html we have the following markup:

When other-page.html is opened, users with JavaScript enabled will always end up having index.html opened in their browser’s tab instead of other-page.html (unless the iframe is sandboxed with the sandbox attribute)

Conclusion

It is a good idea to place the functions that you frequently use in your projects in a separate file and reuse them over and over again whenever they are needed. That way after some time passes you will have built a collection of many functions which you can easily reuse in different projects without starting from scratch every time.

You can download the usefulStuff library and a file with some examples.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories: