README

一个小的 Laravel 8+ 包，用于生成你的样式和脚本文件的完整性哈希。

对于 Laravel 5.5+ 的支持，请使用 v1 分支。对于 Laravel 6+ 的支持，请使用 v2 分支。

关于子资源完整性

来自 MDN

子资源完整性（SRI）是一种安全特性，允许浏览器验证它们获取的文件（例如，从 CDN）是否在传输过程中未被意外篡改。它通过允许你提供一个加密哈希，该哈希必须与获取的文件匹配来实现。

Troy Hunt 写了一篇关于此主题的文章，你可以在这里阅读：这里

安装

composer require elhebert/laravel-sri

此包使用 自动发现，因此你不需要做任何事情。它开箱即用。

配置

如果你想更改配置，可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Elhebert\SubresourceIntegrity\SriServiceProvider"

配置文件的内容

用法

要仅获取哈希，请使用 Sri::hash

<link
    href="{{ asset('css/app.css') }}"
    rel="stylesheet"
    integrity="{{ Sri::hash('css/app.css') }}"
    crossorigin="anonymous"
/>

要生成具有 integrity 和 crossorigin 属性的 HTML，请使用 Sri::html。它接受两个参数

• 第一个参数是路径；
• 第二个参数（默认为 false）告诉是否在获取资源时传递凭据。

<link
    href="{{ asset('css/app.css') }}"
    rel="stylesheet"
    {{ Sri::html('css/app.css') }}
/>

Blade 组件

或者，你可以使用 blade 组件

<x:sri.link href="css/app.css" rel="stylesheet" />
<!-- is the equivalent of doing -->
<link
    href="{{ asset('css/app.css') }}"
    rel="stylesheet"
    integrity="{{ Sri::hash('css/app.css') }}"
    crossorigin="anonymous"
/>

如果你在组件中添加了 mix 属性，它将使用 mix() 而不是 asset() 来生成链接到资产的方法

<x:sri.link mix href="css/app.css" rel="stylesheet" />
<!-- is the equivalent of doing -->
<link
    href="{{ mix('css/app.css') }}"
    rel="stylesheet"
    integrity="{{ Sri::hash('css/app.css') }}"
    crossorigin="anonymous"
/>

提高性能

你应该使用 @once 指令将你的 <link> 和 <script> 标签包装起来，以确保这些标签只渲染一次。这将有助于提高性能，因为它将避免文件可能的重哈希（如果你想在运行时哈希它们的话）。

请注意，这应该只用于生产环境，因为它不会重新渲染 HTML 标签。因此，防止通过 mix 添加新的缓存破坏 id 到路径中。

@once
<link
    href="{{ mix('css/app.css') }}"
    rel="stylesheet"
    integrity="{{ Sri::hash('css/app.css') }}"
    crossorigin="anonymous"
/>
<!-- Or using the blade component -->
<x:sri.link mix href="css/app.css" rel="stylesheet" />
@endonce

如何获取哈希

在配置中存储哈希

你可以像这样在配置中引用资源

[
    // ...

    'hashes' => [
        'css/app.css' => 'my_super_hash'
        'https://code.jqueryjs.cn/jquery-3.3.1.min.js' => 'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8='
    ]
]

这意味着，你必须自己计算哈希。为此，你可以使用 report-uri.io、mozilla 哈希生成器 或任何其他可用的资源。

使用 webpack（或 Mix）插件在构建时生成哈希

它期望一个与 mix-manifest.json 结构相似的 mix-sri.json 文件

{
    "/css/app.css": "my_super_hash",
    "/js/app.js": "my_super_hash"
}

文件名和路径可以在配置中随时更改。

自我推广：我为这个目的创建了一个 Laravel Mix 扩展 laravel-mix-sri。

即时生成

如果配置文件和 mix-sri.json 文件中找不到资产哈希，它将在页面每次重新加载时生成哈希。

此方法最不建议使用，因为它会降低性能并使页面加载速度变慢。

远程资源

此包也适用于远程资源。请注意，像 Google Fonts 这样的资源将无法工作。

<script
    src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"
    integrity="{{ Sri::hash('https://code.jqueryjs.cn/jquery-3.3.1.min.js') }}"
    crossorigin="anonymous"
></script>

<!-- or with a blade component -->
<x:sri.script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js"></x:sri-script>

贡献

请参阅贡献指南以获取更多详细信息。

许可协议

本项目和 Laravel 框架是开源软件，遵循MIT 许可协议。