Tworzenie bezpiecznej piaskownicy JavaScript z modułami ES6 i globalThis

Opanowanie globalThis w JavaScript w celu bezpiecznej izolacji kontekstu

Konieczne jest zapobieganie nieautoryzowanemu dostępowi do obiektu globalnego podczas pisania kodu JavaScript, który wchodzi w interakcję z zewnętrznymi lub niezaufanymi danymi wejściowymi. Gwarantuje to bezpieczeństwo i spójność Twojego otoczenia. Jedną ze współczesnych metod kontrolowania zasięgu globalnego jest poprzez globalJavaScript ma stosunkowo nową funkcjonalność zwaną tą obiekt.

The na całym świecie Niezależnie od tego, czy używają Node.js, czy przeglądarki, programiści mogą dzięki temu uzyskać dostęp do kontekstu globalnego w różnych środowiskach obiekt. co najważniejsze, międzynarodowyPonieważ to można rekonfigurować, można utworzyć piaskownice lub kontrolowane środowiska wykonawcze, tymczasowo je nadpisując.

Dzięki tej funkcji programiści mogą izolować wykonanie kodu, co jest szczególnie przydatne podczas pracy z niezaufanymi danymi wejściowymi. Możemy przeprowadzić piaskownicę kodu, ustanawiając unikalny kontekst globalny, który umożliwi dostęp jedynie do z góry określonego zestawu zmiennych, jednocześnie zapobiegając narażeniu na pozostałą część obiektu globalnego.

W tym artykule omówimy sposób użycia globalThis i moduły ES6 do budowy piaskownicy. Zademonstruję dowód koncepcji, który na chwilę zastępuje kontekst globalny, aby zagwarantować bezpieczne wykonanie kodu w regulowanym otoczeniu.

Budowanie bezpiecznego kontekstu globalnego za pomocą modułów ES6 i globalThis

Głównym celem oferowanych skryptów jest zapewnienie środowisko piaskownicy gdzie obiekt globalny (globalThis) zostaje tymczasowo zastąpiony. Ta metoda pozwala ukryć ważne zmienne lub właściwości oryginalnego obiektu globalnego, co jest bardzo pomocne podczas pracy z kodem zewnętrznym lub niezaufanym. Ponowne zdefiniowanie zakresu globalnego zapewnia lepszą kontrolę nad dostępem do zmiennych, zasadniczo ograniczając kod do dostępu tylko do właściwości zadeklarowanych w piaskownicy.

Zapisywanie oryginału globalThis do zmiennej lokalnej (zapisanyGlobalny) jest pierwszym krokiem w procesie z pierwszego przykładu. Jest to ważny krok, ponieważ po wykonaniu kodu w trybie piaskownicy przywrócony zostanie kontekst globalny. Po zastąpieniu kontekstu globalnego nowym obiektem (tutaj mójKontekst), skrypt próbuje pobrać zmienne (tutaj A I B) znajdujący się w tej piaskownicy. Jak wykazano w pierwszym wymienionym zagadnieniu, w przypadku nieokreślenia pewnych zmiennych pojawia się błąd odniesienia. Wreszcie, Wreszcie block zapewnia, że ​​po wykonaniu kontekst globalny jest zawsze przywracany, co pozwala uniknąć nieoczekiwanych skutków w innych obszarach aplikacji.

Drugie podejście wykorzystuje a Pełnomocnik sprzeciwić się udoskonaleniu tej procedury. W JavaScript proxy umożliwia programistom reinterpretację i przechwytywanie działań podejmowanych na obiektach. W ramach tego skryptu serwer proxy monitoruje żądania dostępu do właściwości i określa, czy żądana właściwość występuje w obiekcie piaskownicy. A Błąd odniesienia jest generowany w przypadku, gdy nie można zlokalizować właściwości, co gwarantuje, że nie są dostępne żadne zmienne zewnętrzne. Z tego powodu jest to silna opcja zabezpieczania zasięgu globalnego i zarządzania zmiennym dostępem w dynamicznych ustawieniach piaskownicy.

Aby całkowicie odizolować wykonanie piaskownicy, trzeci skrypt wykorzystuje IIFE (wyrażenie funkcji natychmiastowo wywołanej). Kodowi zewnętrznemu trudno jest uzyskać dostęp do kontekstu globalnego lub zakłócać go, ponieważ wzorzec IIFE otacza całą akcję wewnątrz własnego zakresu lokalnego. Ta metoda jest bezpieczniejsza, ponieważ globalThis nie jest wystawiona na działanie świata zewnętrznego i ulega zmianom jedynie w obrębie IIFE. Gwarantując, że cały kod w trybie piaskownicy działa w całkowicie oddzielnym środowisku, zwiększa bezpieczeństwo i spójność działania skryptu.

let myContext = { a: 1, b: 2 };
let f = () => {
    let savedGlobal = globalThis;  // Save the original globalThis
    globalThis = myContext;        // Overwrite globalThis with the sandbox context
    try {
        let result = a + b;         // Attempt to access a and b within the sandbox
        return result;              // Return the calculated result
    } catch (e) {
        console.error(e);           // Catch errors, such as reference errors
    } finally {
        globalThis = savedGlobal;   // Restore the original global context
    }
};
console.log(f());

const myContext = { a: 1, b: 2 };
const sandboxHandler = {
    get: (target, prop) => {
        if (prop in target) {
            return target[prop];
        } else {
            throw new ReferenceError(\`Property \${prop} is not defined\`);
        }
    }
};
let mySandbox = new Proxy(myContext, sandboxHandler);
let f = () => {
    let savedGlobal = globalThis;
    globalThis = mySandbox;           // Overwrite with sandbox proxy
    try {
        let result = a + b;           // Access sandbox variables safely
        return result;
    } catch (e) {
        console.error(e);
    } finally {
        globalThis = savedGlobal;      // Restore global context
    }
};
console.log(f());

((globalThis) => {
    const myContext = { a: 1, b: 2 };
    const f = () => {
        let result = myContext.a + myContext.b;  // Access sandbox variables directly
        return result;
    };
    console.log(f());                // Log the result of the sandboxed function
})(globalThis);

Rozszerzanie użycia niestandardowego kontekstu globalnego w piaskownicy JavaScript

Kolejna korzyść z zatrudnienia globalTo jest zgodność z wieloma kontekstami, takimi jak przeglądarki internetowe i systemy po stronie serwera, takie jak Node.js w sytuacji sandboxingu. Zasadniczo, gdy nadpiszesz obiekt globalny niestandardowym kontekstem, przekierujesz akcent swojego kodu na kontrolowany zbiór zmiennych, jak pokazano w naszym przykładzie. Podczas uruchamiania niezaufanych skryptów stron trzecich lub oddzielania odrębnych modułów dużej aplikacji online, strategia ta może być szczególnie pomocna w zapobieganiu wzajemnemu zanieczyszczeniu zmiennych.

Kolejnym istotnym elementem jest fakt, że system modułowy ES6 w JavaScript posiada wbudowane techniki określania zakresu, które częściowo separują zmienne. Z drugiej strony za pomocą globalPozwalając nam zarządzać pełną sytuacją globalną, to pozwala nam wyjść poza to. Uniemożliwiając skryptom, które nie powinny mieć do niego dostępu, zobaczenie oryginalnego kontekstu globalnego, nie tylko zwiększa to bezpieczeństwo, ale także pomaga zapobiegać niezamierzonemu nadpisaniu zmiennych globalnych. Ta metoda sprawdza się dobrze w ochronie aplikacji przed złośliwym lub źle napisanym kodem.

Łączenie modułów ES6 z Serwery proxy jeszcze bardziej poprawia bezpieczeństwo w sytuacjach, gdy potrzebujesz szczegółowej kontroli nad tym, które komponenty aplikacji mają dostęp do obiektu globalnego. Filtrując dostęp do określonych właściwości w obiekcie globalnym, proxy pozwalają mieć pewność, że można uzyskać dostęp tylko do dozwolonych właściwości. Dane każdego dzierżawcy w aplikacji obsługującej wielu dzierżawców muszą być całkowicie oddzielone od danych innych dzierżawców. Rozwiązanie to jest skalowalne i można je dostosować do różnych przypadków użycia.