Hey there,
when I read @bastianallgeier’s article regarding CDN integration in Kirby, I didn’t want to go ‘without protection’:
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.
Mozilla Developer Network
1. Subresource Integrity (SRI)
TL;DR: Kirby-side generated SRI hashes for safer CDN usage - it’s a thing!
Example output:
kirby-sri
generates base64-encoded cryptographic hashes for your css / js files based on their content and adds them to the integrity
attribute of their corresponding <script>
or <link>
elements.
Installation
Use one of the following methods to install & use kirby-sri
:
1. Git Submodule
If you know your way around Git, you can download this plugin as a submodule:
git submodule add https://github.com/S1SYPHOS/kirby-sri.git site/plugins/kirby-sri
2. Clone or download
3. Activate the plugin
Activate the plugin with the following line in your config.php
:
c::set('plugin.kirby-sri', true);
2. Cache-busting / fingerprinting
Since I wasn’t able to implement subresource integrity without interfering with cache-busting / fingerprinting plugins (as they all modify Kirby’s built-in helper functions css()
and js()
), I included this feature as well (credit to @Iksi’s plugin kirby-fingerprint).
a) Apache
If you’re using Apache as your webserver, add the following lines to your .htaccess
(right after RewriteBase
):
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.([0-9]{10})\.(js|css)$ $1.$3 [L]
b) NGINX
If you’re using NGINX as your webserver, add the following lines to your virtual host setup:
location /assets {
if (!-e $request_filename) {
rewrite "^/(.+)\.([0-9]{10})\.(js|css)$" /$1.$3 break;
}
}
You can find the plugin on Github. It’s not much, but it’s something. I’d love to get some feedback on this, and since this is my first (public) plugin, try to be nice