javascript - PHP 中的子资源完整性和缓存破坏技术

标签 javascript php css caching subresource-integrity

我想实现 Subresource Integritycache busting 用于静态 Assets ,例如我的应用程序中的样式表和 JavaScript 文件。目前我使用 PHP 和 Twig 模板。

我知道有很多工具可以为所有 JS 和 CSS 文件生成哈希值,但我正在寻找如何将哈希值实现到 <script> 中。和 <link>数百个文件的标签。

This blog post描述了我正在尝试做的大部分事情,但是作者只介绍了缓存破坏,并在他每次手动更改的文件名中使用了静态时间戳。使用构建工具以编程方式生成该时间戳也不难,但对于 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/hrefintegrity每次都添加属性并不是明智的做法。

我可以编写一个 Twig 函数,每次调用一个 PHP 函数来对文件进行哈希处理,它可能在开发人员上运行正常,但这在计算上似乎非常昂贵。

什么是可行的方法?

最佳答案

回答您的问题:没有可行的方法,因为这不是子资源完整性的正确应用。

根据 W3C完整性属性是:

...a mechanism by which user agents may verify that a fetched resource has been delivered without unexpected manipulation

之所以引入它,是因为现在很多页面都像您一样从 CDN 获取它们的 CSS 和 JS 脚本,如果黑客曾经获得对 CDN 的控制权,他们可能会通过注入(inject)对数千个网站造成巨大破坏恶意代码注入(inject)资源!

想象一下,如果 code.jquery.comajax.googleapis.com 提供的每个版本的 jQuery 突然包含恶意代码!有多少站点会受到影响?可怕。

通过为代理(浏览器)提供一个完整性散列,获取的资源的内容应该与该散列进行比较,您可以确保代理只有在它得到您告诉它期望的内容时才会继续执行代码。如果不同,请不要相信它!

对于您的 应用程序中的资源,我假设它们存在于同一台服务器上,因此没有中间路线可以拦截。如果黑客获得了您的服务器的控制权并在 JS 脚本中注入(inject)了恶意代码,他们也可以轻松地重新散列内容并更改 HTML 中的完整性属性。子资源完整性不提供额外的安全检查。

但是……

如果您想为 integrity 属性动态生成哈希,我建议您只是为了解决一个非常有趣的问题:

使用 Gulp(我个人的偏好)来连接、缩小和指纹您的资源的文件名。使用 gulp.src('bar.*.min.js') 读取生成文件的内容。使用 NPM sha1 package 将散列创建为变量,最后可能使用 gulp-inject更改 src 属性然后 gulp-replace也可以编写 integrity 属性。像这样的一些流程就是我想要的:-)

我希望这能回答您的问题。

关于javascript - PHP 中的子资源完整性和缓存破坏技术,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34365979/

相关文章:

javascript - 你将如何创建一个 JQuery/svg 单击拖动选择轮廓效果?

javascript - 将元素的宽度(或高度)设置为较高祖先元素的百分比

基于Referrer的Javascript重定向

javascript - 在单击复选框的行中显示单个表格单元格

php - 如何统计mysql的行数?

css - 如何将网站的位置设置在窗口的中间/中心?

javascript - JQuery 输入[名称 =""] 在 Firefox 上无法识别

php - 选择距离按钮最近的文本区域

jquery - 滚动到部分导航问题

android - 在手机上查看时创建可折叠导航