<commit_before>---
layout: post
title: Sharing data between tabs using a shared web worker
---
#### The problem
Single page apps are dominating the browser world. Thicker client means more responsibility
which also leads to more complexity. SPA's are long lived entities, having multiple tabs open
of the same app can actually lead to fucking stale state.

For the purpose of this fucking post we will examine the use case of a client having to interact with the server providing a CSRF
token. A CSRF token is one time short lived shity token (nonce). When the client interacts with the server has to always
provide the latest issued token and also capture the next token. 

In an angular context this logic could be easily be implemented with an interceptor factory; On every request decorate 
the request with the token and on every response extract the newly issued token and set it in a factory. 
I will not fucking explain on this post why someone would use a CSRF token and what exactly is, if you are interested you muppet go and fucking read more [here](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet).

![alt text](/blog/img/CSRF.png "Fucking CSRF diagram")

#### The scenario
Imagine a user having two fucking tabs open of the same single page application. The tab that interacted last with the fucking server
is the one who obtained the latest CSRF token. This subsequently means that the if the stupid user attempts to use another tab
other than the one that has the latest CSRF token will get a fucking error. This can cause emotional distress to the user and he might cry.

The question is how do we communicate this fucking piece of information between tabs without using a persistence layer
(db, cookies, localstorage). Shared web worker FTW! We will use a fucking mediator to notify all our listeners
except the publisher, whenever this fucking token has changed.

![alt text](/blog/img/flow.png "Fucking flow diagram")

Note that a shared web worker can be accessed only by the tabs that are under the same domain. Also everything passed
to a web worker is passed by value not by reference, there are ways of passing data by reference but thats not the
the fucking purpose of this blog post.

#### The solution

The solution below assumes that you fucking use browserify, gulp and ngInject to pack your shity code. The way the code is
structured is a component like structure.<commit_msg>fix links<commit_after>---
layout: post
title: Sharing data between tabs using a shared web worker
---
#### The problem
Single page apps are dominating the browser world. Thicker client means more responsibility
which also leads to more complexity. SPA's are long lived entities, having multiple tabs open
of the same app can actually lead to fucking stale state.

For the purpose of this fucking post we will examine the use case of a client having to interact with the server providing a CSRF
token. A CSRF token is one time short lived shity token (nonce). When the client interacts with the server has to always
provide the latest issued token and also capture the next token. 

In an angular context this logic could be easily be implemented with an interceptor factory; On every request decorate 
the request with the token and on every response extract the newly issued token and set it in a factory. 
I will not fucking explain on this post why someone would use a CSRF token and what exactly is, if you are interested you muppet go and fucking read more [here](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet).

![alt text](/img/CSRF.png "Fucking CSRF diagram")

#### The scenario
Imagine a user having two fucking tabs open of the same single page application. The tab that interacted last with the fucking server
is the one who obtained the latest CSRF token. This subsequently means that the if the stupid user attempts to use another tab
other than the one that has the latest CSRF token will get a fucking error. This can cause emotional distress to the user and he might cry.

The question is how do we communicate this fucking piece of information between tabs without using a persistence layer
(db, cookies, localstorage). Shared web worker FTW! We will use a fucking mediator to notify all our listeners
except the publisher, whenever this fucking token has changed.

![alt text](/img/flow.png "Fucking flow diagram")

Note that a shared web worker can be accessed only by the tabs that are under the same domain. Also everything passed
to a web worker is passed by value not by reference, there are ways of passing data by reference but thats not the
the fucking purpose of this blog post.

#### The solution

The solution below assumes that you fucking use browserify, gulp and ngInject to pack your shity code. The way the code is
structured is a component like structure.
{'fraction_non_alphanumeric': 0.03727980335927898, 'fraction_numerical': 0.0, 'mean_word_length': 4.4255555555555555, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '19101', 'n_tokens_mistral': 1167, 'n_tokens_neox': 1132, 'n_words': 790}