Protecting your Web Components (but you did not hear this from me)
Tags: webcomponents, javascript, webdev, showdev
Published: 2021-06-14 13:08:03

---
title: Protecting your Web Components (but you did not hear this from me)
published: true
description: Add extra hurdles to keep your Web Component code (a bit) safer
tags: webcomponents,javascript,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx8q3gcoah8a310a7ojh.jpg
---

<img width="100%" style="width:100%" src="https://storage.googleapis.com/ml2grow-intern.appspot.com/blogimg/listen-very-carefully.gif">

<br>
<hr> 
<br>

Protecting your IP (Intellectual Property) can be done by filing loads of Legal documents. Doing it with script is fairly impossible. Everything can be reversed engineered.

The most you can do is use tools like [JSObfuscator](https://obfuscator.io/) and [JSFuck](http://www.jsfuck.com/) to make your code as unreadable as possible. But ofcourse experienced hackers have tools also...

Then it dawned me; it is all about **adding extra hurdles**, and there is one more hurdle we can call to action.

<hr>

![](https://i.ytimg.com/vi/CspaXNkC2ec/maxresdefault.jpg)

<hr>

In JavaScript 
```js
customElements.define("my-element", class extends HTMLElement{ ... })
``` 
can be written as:

```js
let D = "define";
customElements[D]("my-element", class extends HTMLElement)
```

and since ``customElements`` and ``HTMLElement`` are on ``window``

we can write:
```js
let D = ["0unused","customElements","define","HTMLElement"];
window[D[1]][D[2]]("my-element", class extends window[D[3]]{ ... });
```

Nothing special thus far; this is how Obfuscators & Dictionaries work.

<br>
<hr>
<br>

![](https://image.freepik.com/free-vector/lightbulb-idea-engraved-hand-drawn-old-sketch-vintage-symbols-back-school-elements_248627-391.jpg)

The epiphany only came after 25 years in the Web world...

![](https://i.imgur.com/N8GzVPL.png)

If you load a script with:

```html
<script src="element.js"></script>
```

the script can reference its source:

```js
console.log(document.currentScript.src);
```

Thus, I can put the Dictionary IN the URI

```html
<script src="element.js?-customElements-define-HTMLElement-"></script>
```

```js
let D = document.currentScript.src.split`-`;

// D = ["element.js?","customElements","define","HTMLElement"];

window[D[1]][D[2]]("my-element",class extends window[D[3]]{ ... });
```




## Notes:

* put your files deep down in a nested Subdirectory, and split on slashes
* Use a Sub-domain
* check if your script is running from the correct ``location``

And you have added so many hurdles the average code hacker will give up.

* Check where strings are used. If your replace ``.connected`` be carefull not to replace ``.connectedCallback``
* A domain name can be 253 characters and may contain **-** hyphens inbetween
* The Browser doesn't do a DNS Lookup for every document!
* stuff as many JavaScript methods in the domain name
* if you can't register 
``customElements-define-ACME- ... - innerHTML-querySelectorAll.com``
 just swap a word
* Use DNS prefetch: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
* oh... and domain **calls** are done in lowercase.. so you need to be creative (I am not going to spill all the [beans](https://emn178.github.io/online-tools/base32_encode.html))

Your code is still not save, add more hurdles:

* Whack some ``atob()`` conversions in.
* Know your Array Methods : https://array-methods.github.io
* Make your Dictionary Array dynamic (push,pop,unshift,shift)
* Add a time check.. if its a second later (someone has opened the F12 debugger).. do something unexpected

* Write a gulp script to post-process your files (you are not getting mine)



### And most important of all; don't tell anyone!

<br>
<br>

<p align="center">
  <img src="https://i.imgur.com/nIspOdQ.png">
</p>

<br>
<hr>
<br>

{% jsfiddle https://jsfiddle.net/WebComponents/62f1eLay result,html,js %}