Интересный способ сделать config для web js библиотеки

Kate · 6 Сен 2021

Как то раз мне захотелось сделать "Contact us" виджет и возникла дилемма, как задать настройки кнопки?
Хотелось чтобы:

Всё было понятно для не(до)программистов
Легко было написать генератор
Всё работало сразу же

Всё работало сразу же

Иметься ввиду что нужно только подключить скрипт. Без создания экземпляра класса и вызова где-то там в коде. Мне разу же пришла в голову идея передавать параметры в GET параметрах URL.
Но также хотелось бы выложить код на github без использования серверной части... Я задал вопрос на ~~Toster~~ QNA Habr

Как получить GET параметры ссылки по которой был загружен скрипт? Что я имею в виду например есть какой-то скрипт залитый на github httрs;//mуsitе.github.iо/script.js На сайте example.com мы его загружаем <script defer src="https://mysite.github.io/script.js?param1=1&param2=2"></script>  Github был выбран просто для примера, что нет возможности на стороне сервера отобразить параметры в скрипте. Возможно ли из js узнать из какого элемента script он был загружен? Или каким то другим образом получить параметры из URL?

Но после 5 минут поиска в интернете я нашел интересное свойство объекта document. document.currentScript

Получения параметров из адреса скрипта

Дальше дело за малым, получаем ссылку, парсим и радуемся что не пришлось писать backend логику
<head>
...
<script defer src="https://mysite.github.io/script.js?color=fff&text=helloWorld"></script>
</head>
let selfElement = document.currentScript;

if (selfElement?.src) {
let urlR = selfElement.src,
url = new URL(urlR),
params = url.searchParams

if (params.has("color")) {
mycustomelement.setColor(params.get("color"))
}

if (params.has("text")) {
mycustomelement.setText(params.get("text"))
}
...

}
Это успех осталось только написать логику дальше... НО меня всегда интересовала одна штука. А точнее тег <script> если указать параметр src то эго содержание не будет выполняться. Но поскольку мы уже смогли получить свой родительский элемент мы можем исправить это недоразумение
eval(selfElement.innerText);

Новая эра конфигов

И тут меня осенило можно же использовать это пространство, чтобы задавать конфигурацию плагина
<head>
...
<script defer src="https://mysite.github.io/script.js">
{
"color":"#fff",
"text":"Hello world!"
}
</script>
</head>
И теперь всё очень просто
let config = JSON.parse(selfElement.innerText);
Всё бы было хорошо если бы VScode не ругался на JSON между тегов script В принципе это не столь критично, но мне не хотелось лесть в настройки чтобы оно игнорировалось. Было решено как-то сделать так, чтобы IDE думало что это javascript
Можно бы было добавить кавычки и регуляркой парсить значения внутри. Но это ужасный вариант и я решил сделать так
<head>
...
<script defer src="https://mysite.github.io/script.js">
return {
color: "#fff",
text: "Hello JS world!",
}
</script>
</head>
Да использовать js внутри тега script кто бы мог подумать) Решил не использовать eval поскольку это не очень безопасно
let config = new Function(selfElement.innerText)();
Супер мы в шоколаде?! Не совсем( поскольку теперь помимо нашего return можно выполнить любой js код, это никуда не годиться... Что делать? В голову сразу же приходит SandBox. Но как изолировано запустить js код в js? Желания тянуть какую-то библиотеку нет, надо найти какое-то элегантное решение в несколько строк. После полчаса поисков нашёлся один gist
function construct(constructor, args) {
function F() {
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
}
// Sanboxer
function sandboxcode(string, inject) {
"use strict";
var globals = ["Function"];
for (var i in window) {
// <--REMOVE THIS CONDITION
if (i != "console")
// REMOVE THIS CONDITION -->
globals.push(i);
}
// The strict mode prevents access to the global object through an anonymous function (function(){return this;}()));
globals.push('"use strict";\n'+string);
return construct(Function, globals).apply(inject ? inject : {});
}
sandboxcode('console.log( this, window, top , self, parent, this["jQuery"], (function(){return this;}()));');
// => Object {} undefined undefined undefined undefined undefined undefined
sandboxcode('return this;', {window:"sanboxed code"});
// => Object {window: "sanboxed code"}
Мне не сразу стало понятно как оно работает, но сейчас поясню. Мы видим 2 функции construct и sandboxcode Первая на вход принимает какую-то функцию и массив аргументов, создает новою функцию F которая принимает все аргументы с массива и переопределяет прототип, на выходе получаем анонимную функцию с кучей аргументов
function anonymous(top,window,location,external,chrome,document,...) {
"use strict";
return this;
}
В этом и заключается вся магия мы просто переопределяем все существующие глобальные объекты и переменные.
Но код прийдётся немножко подредактировать потому что мы все же сможем получить доступ во вне используя eval(); или globalThis
//https://gist.github.com/gornostay25/3ea24d743c90b2cd6b2aaadb9241fec9
function sandboxcode(s) {
function construct(c, a) {
function F(){return c.apply(this, a)}
F.prototype = c.prototype;
return new F()
}
let g = ["Function","globalThis","eval"]
for (let i in globalThis){g.push(i)}
g.push(s);
return construct(Function, g).apply({});
}
Я убрал передачу своих глобальных переменных поскольку это мне не было нужно, также немного укоротил код. В массиве g находятся все объекты которые нужно перезаписать:
//function F(){return c.apply(this, a)}
Function.apply({},["test","ttest","ttest2","alert(123);"])
/*
ƒ anonymous(test,ttest,ttest2
) {
alert(123);
}
*/
Теперь момент истины:
<head>
...
<script defer src="https://mysite.github.io/script.js">
alert("bad code"); //Uncaught TypeError: alert is not a function
console.log(window,this,globalThis,Function,eval);
// => undefined {} undefined undefined undefined
return {
color: "#fff",
text: "Hello JS world!",
}
</script>
</head>
let config = JSON.parse(JSON.stringify(sandboxcode(selfElement.innerText)));
// => {color: "#fff", text: "Hello JS world!"}
Чтобы каким то образом не передалась функция или гетер класса делаем фильтр через JSON И всё мы справились!!!
Надеюсь это кому-то пригодится. Мне будет приятно гуляя по github увидеть что кто-то сделал свою библиотеку или виджет по этому принципу. Всем всего хорошего!