Why use hashed CSS stylesheet and Javascript file names?

Question

When looking deeply at the code of some most popular websites, I've seen many times that, CSS and JavaScript file name are like this,

<link type="text/css" rel="stylesheet" href="//sample.com/css/css__k3sYInttBtNNuJgtPSyqaYy9vVxS4qTZLrfs1ujQB9g__SH_QaIH3bnSp3nOw8n8afhszfHJlxVt51qRlrrrOnk0__fBOuweRojwN82z7EY4v-sVsMwU_P_vZSaU3fmyho6Do.css" media="all" />

<script type="text/javascript" src="//sample.com/js/js__-V23Vc4PVahQcqfyxss_rmNogErBARnPCvI7oPXC0qQ__O-yO5Gg8pRRaefl4d0X9qXUJTOSHq0yazxF-4tJCU_k__fBOuweRojwN82z7EY4v-sVsMwU_P_vZSaU3fmyho6Do.js"></script>

It seems like that file names has been hashed and I don't know what is the reason. So I've got following problems.

What is the purpose of using this kind of method?
I've seen Very complex folder names also. Why is that?
Are there any security concerns?
Can we dynamically change file/folder names using PHP for maximum security?

I am little new to this area.

If bundle would be rebuilt, hash changes and browser knows that it needed to update cached assets — MysterX
– MysterX, Commented Nov 14, 2017 at 15:55
The names are generated through automation scripts. It prevents name collisions and stops browser caching issues. — bassxzero
– bassxzero, Commented Nov 14, 2017 at 15:56
@MysterX that will also work if you add versions like http://wxample.com/.../abc.js?v=0.5.3 won't it ? — mrid
– mrid, Commented Nov 14, 2017 at 16:05
Yes, most modern browsers will be just fine with this syntax, but years ago some older versions of browsers would go by file name only for caching purposes. Also when developing your version number does not change and you may be testing a page with the same css or js file many hundreds of times, so rather than worrying about version number (whcih does not change on your dev environment) it may be easier to include date or a timestamp instead, or a hash... — Tadasbub
– Tadasbub, Commented Nov 14, 2017 at 16:34

TimoStaudinger · Accepted Answer · 2017-11-14 16:03:58Z

8

You can assume that these file/folder names are not what the developers are working with during the development phase, but rather an artifact of the files' build process. JavaScript and CSS is often built into a single file from several source files, involving more or less compilation/transpilation and bundling steps.

The reason why you would want the filename to be/include a hash of the file is that this forces a cache invalidation whenever the file changes. Static files can be cached by the browser, server, and a number of other agents in-between. This is fine as long as the file does not change. However, when a new release is published, the user should be served this new version. If the file name of the resource changes, the browser will always request the new version of the file from the server, rather than using a cached version.

You should not rely on complex file names like this as a security/authorization feature. The file names are referenced in the app's index file and thus known to the end user. Also, security by obscurity is generally a bad idea.

edited Nov 14, 2017 at 16:03

answered Nov 14, 2017 at 15:58

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrid Over a year ago

will it not work if you add versions like http://wxample.com/.../abc.js?v=0.5.3 ?? the browser takes the complete url along with any params (if present), doesn't it ?

TimoStaudinger Over a year ago

@mrid Yep, that would also do the trick. But there is really no incentive to keep the file names human-readable, since in a well set-up build/deployment process, no human will ever touch them. Also, this approach requires the developer to maintain some kind of versioning scheme, while a file hash can be calculated fully automatically.

Collectives™ on Stack Overflow

Why use hashed CSS stylesheet and Javascript file names?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related