elhebert / laravel-sri
Subresource Integrity hash generator for laravel
Installs: 145 908
Dependents: 0
Suggesters: 0
Security: 0
Stars: 40
Watchers: 3
Forks: 16
Open Issues: 3
Requires
- php: ^7.3 | ^7.4 | ^8.0
- illuminate/support: ^8.71 | ^9.0 | ^10.0 | ^11.0
Requires (Dev)
- mockery/mockery: ^1.4.4
- orchestra/testbench: ^6.23 | ^7.0 | ^8.0 | ^9.0
- phpunit/phpunit: ^9.5.10 | ^10.5
- dev-master
- 3.3.0
- 3.2.0
- 3.1.0
- 3.0.1
- 3.0.0
- v2.x-dev
- 2.5.0
- 2.4.0
- 2.3.1
- 2.3.0
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.1
- 2.1.0
- 2.0.2
- 2.0.1
- 2.0.0
- v1.x-dev
- 1.5.3
- 1.5.2
- 1.5.1
- 1.5.0
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.0
- 1.2.1
- 1.2.0
- 1.1.0
- 1.0.2
- 1.0.0
- dev-dependabot/composer/laravel/framework-10.48.23
- dev-dependabot/composer/symfony/http-foundation-6.4.14
- dev-dependabot/composer/symfony/process-6.4.14
- dev-shift-79402
This package is auto-updated.
Last update: 2024-11-12 23:43:17 UTC
README
Small Laravel 8+ package that'll generate the integrity hashes for your style and script files.
For Laravel 5.5+ support, use the v1 branch. For Laravel 6+ support, use the v2 branch.
About Subresources Integrity
From MDN:
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.
Troy Hunt wrote an article speaking on the subject, you can read it here
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.
Config
If you want to make changes in the configuration you can publish the config file using
php artisan vendor:publish --provider="Elhebert\SubresourceIntegrity\SriServiceProvider"
Content of the configuration
Usage
To only get a hash, use Sri::hash
:
<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:
- 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:
<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:
<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).
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
.
@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:
[ // ... '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.
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
:
{ "/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.
Self promotion: I made a Laravel Mix extension laravel-mix-sri for this purpose.
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.
This method is the least recommended, because it reduce performance and make your page load slower.
Remote resources
This package also work for remote resources. Be careful that resources like Google Fonts won't work.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="{{ Sri::hash('http://code.jquery.com/jquery-3.3.1.min.js') }}" crossorigin="anonymous" ></script> <!-- or with a blade component --> <x:sri.script src="http://code.jquery.com/jquery-3.3.1.min.js"></x:sri-script>
Contributing
Please see CONTRIBUTING for more details.
License
This project and the Laravel framework are open-sourced software licensed under the MIT license.