Yett - A small library to control the execution of (third party) scripts

Yett

:closed_lock_with_key: A small webpage library to control the execution of (third party) scripts like analytics

Simply drop yett at the top of your html and it will allow you to block and delay the execution of other scripts.

Background

[ :question: ] So, why on Earth would I want to block scripts on my own website?

We use yett in order to provide GDPR compliant consent-first-analytics , via an UI like below.

Analytics scripts are blocked until users Accepts, in production on https://console.snips.ai

Blocking execution of analytics script (until consent is given) can be done manually, but the problem is that analytics providers often provide minified code embeds that you have to include in your html as they are. If you want to exercise control over their execution, then you have to tamper with this minified JS yourself, which is complex and does not scale well if you load server 3rd party scripts.

Thus we invented yett . Just drop in the script and define a domain blacklist - yett will take care of the rest :sparkles: .

On a side note, it is technically quite amazing to know that a few lines of js is all you need to control execution of other scripts, even those included with a script tag. :wink:

Also, yett has an interesting meaning.

Usage

Yett needs a blacklist , which is an array of regexes to test urls against.

<script>
    // Add a global variable *before* yett is loaded.
    YETT_BLACKLIST = [
        /www\\.google-analytics\\.com/,
        /piwik\.php/,
        /cdn\.mxpnl\.com/
    ]
</script>

:warning: It is strongly recommended that you add type attributes to <script> tags having src attributes that you want to block. It is necessary for script execution blocking to work in the Edge browser, and has the benefit of also preventing the scripts from loading in all other major browsers.

CDN

Finally, include yett with a script tag before other scripts you want to delay:

<script src='unpkg.com/yett'></script>

Then, use window.yett.unblock() to resume execution of the blocked scripts.

NPM

You can also use npm to install yett:

npm i yett

window.YETT_BLACKLIST = [
    // ... //
]
// Side effects here!
import { unblock } from 'yett'

unblock()

Unblock

unblock(...scriptUrls: String[])

Unblocks blacklisted scripts.

If you don't specify a scriptUrls argument, all blocked script will be executed. Otherwise, only blacklist regexes that match any of the scriptUrls provided will be removed, and only the scripts that are not considered as blacklisted anymore will execute.

Build locally

# Clone
git clone https://github.com/snipsco/yett
cd yett
# Install
npm i
# Serves demo @ localhost:8080
npm run dev
# Build for release
npm run build

Browser compatibility

The most 'advanced' javascript feature that yett uses is MutationObserver , which is compatible with all major browsers as well as IE11 .

If you absolutely need IE 9/10 compatibility, then you have to use a polyfill :

<script src="https://cdn.jsdelivr.net/npm/mutationobserver-shim/dist/mutationobserver.min.js"></script>

Caveats

Add a type attribute manually

Needed for targetting Microsoft Edge ! Adding this property also prevents the script from loading on Chrome , Safari and Firefox .

In order to prevent the execution of the script for Edge users, you will have to add type="javascript/blocked" manually as shown in the example below.

<!-- Add type="javascript/blocked" yourself, otherwise it will "only" work on Chrome/Firefox/Safari/IE -->
<script src="..." type="javascript/blocked"></script>

Monkey patch

This library monkey patches document.createElement . No way around this.

Dynamic requests

Scripts loaded using XMLHttpRequest and Fetch are not blocked. It would be trivial to monkey patch them, but most tracking scripts are not loaded using these 2 methods anyway.

Suggestions

If you have any request or feedback for us feel free to open an issue !

So far we’re using this library for analytics, but it could also be used to block advertising until consent, and other things we haven’t thought about yet. We’re excited to see what use cases the community comes up with!

License

MIT