elhebert/laravel-sri

Subresource Integrity hash generator for laravel

Laravel Subresource Integrity

, _(*1)

Small Laravel 8+ package that'll generate the integrity hashes for your style and script files., _(*2)

For Laravel 5.5+ support, use the v1 branch. For Laravel 6+ support, use the v2 branch., _(*3)

About Subresources Integrity

From MDN:, _(*4)

Subresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched file must match., _(*5)

Troy Hunt wrote an article speaking on the subject, you can read it here, _(*6)

Installation

composer require elhebert/laravel-sri

This package uses auto-discovery, so you don't have to do anything. It works out of the box., _(*7)

Config

If you want to make changes in the configuration you can publish the config file using, _(*8)

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

Content of the configuration

Usage

To only get a hash, use Sri::hash:, _(*9)

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

To generate the HTML for the integrity and the crossorigin attributes, use Sri::html. It accepts two parameters:, _(*10)

• first one is the path;
• second one (default is false) tells if you want to pass the credentials when fetching the resource.

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

Blade Component

Alternatively you can use blade components:, _(*11)

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

If you add a mix attributet to the component it'll use mix() instead of asset() to generate the link to the assets:, _(*12)

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

Improve performance

You should wrap your <link> and <script> tags with the @once directive to ensure that your tags are only rendered once. This will help with performances as it'll avoid a potential re-hashing of the files (in case you want to hash them on the fly)., _(*13)

Be careful that this should only be use for production as it won't re-render the html tag. Thus preventing new cache busting id to be added to the path by mix., _(*14)

@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

How to get a hash

Store hashes in the configuration

You can references the assets in the configuration like this:, _(*15)

[
    // ...

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

This means, you have to calculate the hashes yourself. To do this, you can use report-uri.io, mozilla hash generator or any other resource available., _(*16)

Using a webpack (or Mix) plugin to generate hashes on build

It expect a mix-sri.json file with a similar structure to the mix-manifest.json:, _(*17)

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

The filename and path can be changed in the configuration at any time., _(*18)

Self promotion: I made a Laravel Mix extension laravel-mix-sri for this purpose., _(*19)

Generate them on the fly

If it can't find the asset hash in the config file nor in the mix-sri.json file, it'll generate the hash on each reload of the page., _(*20)

This method is the least recommended, because it reduce performance and make your page load slower., _(*21)

Remote resources

This package also work for remote resources. Be careful that resources like Google Fonts won't work., _(*22)

<x:sri.script src="http://code.jquery.com/jquery-3.3.1.min.js"></x:sri-script>

Contributing

Please see CONTRIBUTING for more details., _(*23)

License

This project and the Laravel framework are open-sourced software licensed under the MIT license., _(*24)