我想为应用程序中的静态资产(如样式表和JavaScript文件)实现子资源完整性和缓存破坏。目前我使用PHP和Twig模板。
我知道有很多工具可以为所有JS和CSS文件生成哈希,但我正在寻找如何将哈希实现到数百个文件的<script>
和<link>
标签中。
这篇博客文章描述了我试图做的大部分事情,然而作者只涉及缓存破坏,并在文件名中使用静态时间戳,他每次都会手动更改。使用构建工具以编程方式生成时间戳也不困难,但SRI的值是一个散列,对于每个文件来说都是不同的。
例如,header.html.twig
:的一个片段
<!-- cdn requests -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'
integrity='sha384-8gBf6Y4YYq7Jx97PIqmTwLPin4hxIzQw5aDmUg/DDhul9fFpbbLcLh3nTIIDJKhx'
crossorigin='anonymous'></script>
<!-- same-origin requests -->
<script src='foo.1a516fba.min.js'
integrity='sha384-GlFvui4Sp4wfY6+P13kcTmnzUjsV78g61ejffDbQ1QMyqL3lVzFZhGqawasU4Vg+'></script>
<script src='bar.faf315f3.min.js'
integrity='sha384-+vMV8w6Qc43sECfhc+5+vUA7Sg4NtwVr1J8+LNNROMdHS5tXrqGWSSebmORC6O86'></script>
每次更改src
/href
和integrity
属性不是一种明智的方法。
我可以编写一个Twig函数,每次调用PHP函数对文件进行哈希处理,它可能在dev上正常工作,但这似乎在计算上非常昂贵。
对此,可行的方法是什么?
回答您的问题:没有可行的方法,因为这不是子资源完整性的正确应用。
根据W3C,完整性属性为:
一种机制,通过该机制,用户代理可以验证所获取的资源是否已在没有意外操作的情况下交付
之所以引入它,是因为现在很多页面都像你一样从CDN中获取CSS和JS脚本,如果黑客想要控制CDN,他们可能会通过向提供的资源中注入恶意代码,在数千个网站上造成巨大破坏!
想象一下,如果code.jquery.com
或ajax.googleapis.com
交付的jQuery的每个版本都突然包含恶意代码!有多少站点会受到影响?恐怖的
通过向代理(浏览器)提供一个完整性哈希,应该与提取的资源的内容进行比较,您可以确保代理只有在得到您告诉它的期望时才能继续执行代码。如果不同,不要相信它!
在您的应用程序中的资源的情况下,我假设它们存在于同一服务器上,因此没有中间路线可拦截。如果黑客控制了你的服务器并在JS脚本中注入恶意代码,他们也可以很容易地重新刷新内容并更改HTML中的完整性属性。子资源完整性不提供额外的安全检查。
但是
只是为了解决一个非常有趣的问题,如果你想动态生成integrity
属性的哈希:,我建议你
使用Gulp(我个人的偏好)来连接、缩小和指纹您的资源的文件名。使用gulp.src('bar.*.min.js')
读取生成的文件的内容。使用NPM sha1包创建散列作为变量,最后可能使用gulp-inject来更改src属性,然后使用gulp-replacement来写入integrity
属性。这样的流量是我想要的:-)
我希望这能回答你的问题。