为什么使用散列 CSS 样式表和 Javascript 文件名？答案

【问题标题】：Why use hashed CSS stylesheet and Javascript file names?为什么使用散列 CSS 样式表和 Javascript 文件名？
【发布时间】：2018-04-27 15:37:49
【问题描述】：

在深入查看一些最流行的网站的代码时，我见过很多次，CSS和JavaScript文件名是这样的，

<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>

似乎文件名已经过哈希处理，我不知道是什么原因。所以我遇到了以下问题。

使用这种方法的目的是什么？
我也见过非常复杂的文件夹名称。这是为什么呢？
是否存在任何安全问题？
我们能否使用 PHP 动态更改文件/文件夹名称以获得最大的安全性？

我对这个领域并不陌生。

【问题讨论】：

如果bundle会被重建，哈希改变并且浏览器知道它需要更新缓存的资产
名称是通过自动化脚本生成的。它可以防止名称冲突并停止浏览器缓存问题。
^^ 那。它们可能是在捆绑期间生成的。
@MysterX 如果你添加像http://wxample.com/.../abc.js?v=0.5.3 这样的版本也可以工作，不是吗？
是的，大多数现代浏览器都可以使用这种语法，但几年前一些旧版本的浏览器将仅出于缓存目的使用文件名。此外，在开发时，您的版本号不会改变，并且您可能会使用相同的 css 或 js 文件测试页面数百次，因此与其担心版本号（在您的开发环境中不会改变），可能更容易包括日期或时间戳，或哈希...

标签： javascript php html css hash

【解决方案1】：

您可以假设这些文件/文件夹名称不是开发人员在开发阶段使用的名称，而是文件构建过程的产物。 JavaScript 和 CSS 通常由多个源文件构建到一个文件中，涉及或多或少的编译/转译和捆绑步骤。

您希望文件名是/包含文件哈希的原因是，这在文件更改时强制缓存失效。静态文件可以由浏览器、服务器和中间的许多其他代理缓存。只要文件不更改，这很好。但是，当发布新版本时，应该为用户提供这个新版本。如果资源的文件名发生变化，浏览器总是会向服务器请求文件的新版本，而不是使用缓存的版本。

您不应该不要依赖像这样的复杂文件名作为安全/授权功能。文件名在应用程序的索引文件中引用，因此最终用户知道。此外，默默无闻的安全通常是一个坏主意。

【讨论】：

添加http://wxample.com/.../abc.js?v=0.5.3之类的版本会不会不行？？浏览器获取完整的 url 以及任何参数（如果存在），不是吗？
@mrid 是的，这也可以解决问题。但实际上没有动力让文件名保持人类可读，因为在设置良好的构建/部署过程中，没有人会碰它们。此外，这种方法需要开发人员维护某种版本控制方案，而文件哈希可以完全自动计算。