Introducing: 'Kirby SRI'

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:

screenshot of the kirby-sri plugin

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

  1. Clone or download this repository.
  2. Unzip / Move the folder to site/plugins.

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 :slight_smile:

6 Likes

Releasing v0.3.0-beta:

New features:

  • Added user-defined CORS-settings for css / js files.
  • Added user-defined hash algorithm.

How to use:

Just define these in your config.php as usual:

Option Type Default Description
plugin.kirby-sri.algorithm String sha512 Defines the cryptographic hash algorithm (currently the allowed prefixes are sha256, sha384 and sha512).
plugin.kirby-sri.use-credentials Boolean false Sets crossorigin attribute to use-credentials instead of anonymous.

Feedback welcome!

Feel free to test this release and if something’s bothering you, just open an issue.

Releasing v0.5.0:

New / changed features:

  • Added plugin.kirby-sri.fingerprinting to control fingerprinting (Default: true)
  • Modified plugin.kirby-sri.use-credentials
    • Renamed to plugin.kirby-sri.crossorigin (requires config.php update!)
    • Value is now a string (Default: anonymous) (requires config.php update!)

How to use:

Option Type Default Description
plugin.kirby-sri.crossorigin String anonymous Defines crossorigin attribute.
plugin.kirby-sri.fingerprinting Boolean true Optionally enables / disables fingerprinting.

Feedback welcome, as always!

Special thanks for reporting a bug goes to @mrunkel!

:slightly_smiling_face:

not sure where and how to put this, does this plugin works in kirby 3?

This is an old plugin for Kirby 2 and won’t work if you are using Kirby 3. Plugins for Kirby 3 are in the Kirby 3 plugin category, or can be found on the website: Plugins | Kirby CMS

my plugin has SRI

1 Like