Czy w przeglądarce można uruchomić JavaScript w piaskownicy?

Zastanawiam się, czy możliwe jest piaskownica JavaScript działająca w przeglądarce, aby uniemożliwić dostęp do funkcji, które są normalnie dostępne dla kodu JavaScript działającego na stronie HTML.

Na przykład, powiedzmy, że chcę zapewnić użytkownikom końcowym JavaScript API, aby umożliwić im zdefiniowanie programów obsługi zdarzeń, które mają być uruchamiane, gdy wystąpią „interesujące zdarzenia”, ale nie chcę, aby ci użytkownicy mieli dostęp do właściwości i funkcji windowobiektu. Czy jestem w stanie to zrobić?

W najprostszym przypadku powiedzmy, że chcę uniemożliwić użytkownikom dzwonienie alert. Oto kilka podejść, które przychodzą mi do głowy:

• window.alertGlobalnie przedefiniuj . Nie sądzę, żeby to było właściwe podejście, ponieważ inny kod działający na stronie (tj. Rzeczy, które nie zostały utworzone przez użytkowników w ich programach obsługi zdarzeń) mogą chcieć użyć alert.
• Wyślij kod obsługi zdarzeń do serwera w celu przetworzenia. Nie jestem pewien, czy wysłanie kodu do serwera w celu przetworzenia jest właściwym podejściem, ponieważ programy obsługi zdarzeń muszą działać w kontekście strony.

Być może rozwiązanie, w którym serwer przetwarza funkcję zdefiniowaną przez użytkownika, a następnie generuje wywołanie zwrotne do wykonania na kliencie, zadziała? Nawet jeśli to podejście działa, czy istnieją lepsze sposoby rozwiązania tego problemu?

Google Caja jest tłumaczem typu „source-to-source”, który „umożliwia umieszczanie na stronie niezaufanego kodu HTML i JavaScript innej firmy, a jednocześnie zapewnia bezpieczeństwo”.

Spójrz na ADsafe Douglasa Crockforda :

ADsafe umożliwia bezpieczne umieszczanie kodu gościa (takiego jak reklamy skryptowe lub widżety stron trzecich) na dowolnej stronie internetowej. ADsafe definiuje podzbiór JavaScript, który jest wystarczająco potężny, aby umożliwić kodowi gościa wykonywanie wartościowych interakcji, jednocześnie zapobiegając złośliwym lub przypadkowym uszkodzeniom lub włamaniom. Podzbiór ADsafe można zweryfikować mechanicznie za pomocą narzędzi takich jak JSLint, dzięki czemu nie jest konieczna inspekcja przez człowieka w celu sprawdzenia kodu gościa pod kątem bezpieczeństwa. Podzbiór ADsafe wymusza również dobre praktyki kodowania, zwiększając prawdopodobieństwo, że kod gościa będzie działał poprawnie.

Możesz zobaczyć przykład korzystania z ADsafe, przeglądając pliki template.htmli template.jsw repozytorium GitHub projektu .

Stworzyłem bibliotekę piaskownicy o nazwie jsandbox, która wykorzystuje pracowników sieci do oceny kodu w piaskownicy. Posiada również metodę wejściową do jawnego podawania danych kodu w trybie piaskownicy, których w innym przypadku nie byłby w stanie uzyskać.

Poniżej znajduje się przykład interfejsu API:

jsandbox
    .eval({
      code    : "x=1;Math.round(Math.pow(input, ++x))",
      input   : 36.565010597564445,
      callback: function(n) {
          console.log("number: ", n); // number: 1337
      }
  }).eval({
      code   : "][];.]\\ (*# ($(! ~",
      onerror: function(ex) {
          console.log("syntax error: ", ex); // syntax error: [error object]
      }
  }).eval({
      code    : '"foo"+input',
      input   : "bar",
      callback: function(str) {
          console.log("string: ", str); // string: foobar
      }
  }).eval({
      code    : "({q:1, w:2})",
      callback: function(obj) {
          console.log("object: ", obj); // object: object q=1 w=2
      }
  }).eval({
      code    : "[1, 2, 3].concat(input)",
      input   : [4, 5, 6],
      callback: function(arr) {
          console.log("array: ", arr); // array: [1, 2, 3, 4, 5, 6]
      }
  }).eval({
      code    : "function x(z){this.y=z;};new x(input)",
      input   : 4,
      callback: function(x) {
          console.log("new x: ", x); // new x: object y=4
      }
  });

Myślę, że warto tu wspomnieć o js.js. To interpreter JavaScript napisany w JavaScript.

Jest około 200 razy wolniejszy niż natywny JS, ale jego natura sprawia, że ​​jest idealnym środowiskiem piaskownicy. Inną wadą jest jego rozmiar - prawie 600 kb, co w niektórych przypadkach może być akceptowalne dla komputerów stacjonarnych, ale nie dla urządzeń mobilnych.

Jak wspomniano w innych odpowiedziach, wystarczy uwięzić kod w piaskownicy iframe (bez wysyłania go na serwer) i komunikować się z wiadomościami. Proponuję przyjrzeć się małej bibliotece, którą stworzyłem głównie ze względu na potrzebę udostępnienia jakiegoś API do niezaufanego kodu, tak jak opisano w pytaniu: istnieje możliwość wyeksportowania określonego zestawu funkcji bezpośrednio do piaskownicy, gdzie niezaufany kod zostanie uruchomiony. Jest też demo, które wykonuje kod przesłany przez użytkownika w piaskownicy:

http://asvd.github.io/jailed/demos/web/console/

Wszyscy dostawcy przeglądarek i specyfikacja HTML5 pracują nad rzeczywistą właściwością piaskownicy, aby umożliwić korzystanie z elementów iframe w piaskownicy - ale nadal jest to ograniczone do szczegółowości elementów iframe.

Ogólnie rzecz biorąc, żaden poziom wyrażeń regularnych itp. Nie może bezpiecznie oczyścić dowolnego JavaScript dostarczonego przez użytkownika, ponieważ degeneruje się on do problemu zatrzymania: - /

Ulepszona wersja kodu piaskownicy dla pracowników sieci @ RyanOHara, w jednym pliku (nie eval.jsjest potrzebny żaden dodatkowy plik).

function safeEval(untrustedCode)
    {
    return new Promise(function (resolve, reject)
    {

    var blobURL = URL.createObjectURL(new Blob([
        "(",
        function ()
            {
            var _postMessage = postMessage;
            var _addEventListener = addEventListener;

            (function (obj)
                {
                "use strict";

                var current = obj;
                var keepProperties = [
                    // required
                    'Object', 'Function', 'Infinity', 'NaN', 'undefined', 'caches', 'TEMPORARY', 'PERSISTENT', 
                    // optional, but trivial to get back
                    'Array', 'Boolean', 'Number', 'String', 'Symbol',
                    // optional
                    'Map', 'Math', 'Set',
                ];

                do {
                    Object.getOwnPropertyNames(current).forEach(function (name) {
                        if (keepProperties.indexOf(name) === -1) {
                            delete current[name];
                        }
                    });

                    current = Object.getPrototypeOf(current);
                }
                while (current !== Object.prototype);
                })(this);

            _addEventListener("message", function (e)
            {
            var f = new Function("", "return (" + e.data + "\n);");
            _postMessage(f());
            });
            }.toString(),
        ")()"], {type: "application/javascript"}));

    var worker = new Worker(blobURL);

    URL.revokeObjectURL(blobURL);

    worker.onmessage = function (evt)
        {
        worker.terminate();
        resolve(evt.data);
        };

    worker.onerror = function (evt)
        {
        reject(new Error(evt.message));
        };

    worker.postMessage(untrustedCode);

    setTimeout(function () {
        worker.terminate();
        reject(new Error('The worker timed out.'));
        }, 1000);
    });
    }

Sprawdź to:

https://jsfiddle.net/kp0cq6yw/

var promise = safeEval("1+2+3");

promise.then(function (result) {
      alert(result);
      });

Powinien się wyświetlać 6(testowane w Chrome i Firefox).

Brzydki sposób, ale może to działa dla ciebie, wziąłem wszystkie globale i przedefiniowałem je w zakresie piaskownicy, a także dodałem tryb ścisły, aby nie mogli uzyskać obiektu globalnego za pomocą funkcji anonimowej.

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 = [];
  for (var i in window) {
    // <--REMOVE THIS CONDITION
    if (i != "console")
    // REMOVE THIS CONDITION -->
    globals.push(i);
  }
  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 
console.log("return of this", sandboxcode('return this;', {window:"sanboxed code"})); 
// => Object {window: "sanboxed code"}

https://gist.github.com/alejandrolechuga/9381781

Niezależny interpreter JavaScript z większym prawdopodobieństwem zapewni solidną piaskownicę niż wersję implementacji wbudowanej przeglądarki w klatce. Ryan już wspomniał o js.js , ale bardziej aktualnym projektem jest JS-Interpreter . W docs pokrycie jak wystawiać różne funkcje do tłumacza, ale jego zakres jest inaczej bardzo ograniczony.

Od 2019 roku vm2 wygląda na najpopularniejsze i najczęściej aktualizowane rozwiązanie tego problemu.

Dzięki NISP będziesz mógł przeprowadzić ocenę w piaskownicy. Chociaż napisane wyrażenie nie jest dokładnie JS, zamiast tego napiszesz s-wyrażenia. Idealny do prostych DSL, które nie wymagają rozbudowanego programowania.

1) Załóżmy, że masz kod do wykonania:

var sCode = "alert(document)";

Teraz przypuśćmy, że chcesz wykonać to w piaskownicy:

new Function("window", "with(window){" + sCode + "}")({});

Te dwa wiersze po wykonaniu zakończą się niepowodzeniem, ponieważ funkcja „alert” nie jest dostępna z poziomu „piaskownicy”

2) A teraz chcesz udostępnić element członkowski obiektu window ze swoją funkcjonalnością:

new Function("window", "with(window){" + sCode + "}")({
    'alert':function(sString){document.title = sString}
});

Rzeczywiście, możesz dodać cudzysłowy i zrobić inne polerowanie, ale myślę, że pomysł jest jasny.

Skąd pochodzi JavaScript użytkownika?

Niewiele można zrobić, aby użytkownik osadził kod na swojej stronie, a następnie wywołał go z przeglądarki (patrz Greasemonkey, http://www.greasespot.net/ ). Robią to tylko przeglądarki.

Jeśli jednak przechowujesz skrypt w bazie danych, a następnie pobierzesz go i przeprowadzisz eval (), możesz wyczyścić skrypt przed jego uruchomieniem.

Przykłady kodu, który usuwa wszystkie okna. i dokument. Bibliografia:

 eval(
  unsafeUserScript
    .replace(/\/\/.+\n|\/\*.*\*\/, '') // Clear all comments
    .replace(/\s(window|document)\s*[\;\)\.]/, '') // removes window. or window; or window)
 )

Ma to na celu zapobieżenie wykonaniu następujących czynności (nie przetestowano):

window.location = 'http://mydomain.com';
var w = window  ;

Istnieje wiele ograniczeń, które musiałbyś zastosować do niebezpiecznego skryptu użytkownika. Niestety dla JavaScript nie jest dostępny żaden „kontener piaskownicy”.

Pracowałem nad uproszczoną piaskownicą js, aby umożliwić użytkownikom tworzenie apletów dla mojej witryny. Chociaż nadal napotykam pewne wyzwania związane z zezwoleniem na dostęp do DOM (parentNode po prostu nie pozwala mi zachować bezpieczeństwa = /), moim podejściem było po prostu przedefiniowanie obiektu okna z niektórymi jego użytecznymi / nieszkodliwymi składnikami, a następnie eval () użytkownika kod z tym ponownie zdefiniowanym oknem jako domyślnym zakresem.

Mój „podstawowy” kod wygląda tak ... (nie pokazuję go całkowicie;)

function Sandbox(parent){

    this.scope = {
        window: {
            alert: function(str){
                alert("Overriden Alert: " + str);
            },
            prompt: function(message, defaultValue){
                return prompt("Overriden Prompt:" + message, defaultValue);
            },
            document: null,
            .
            .
            .
            .
        }
    };

    this.execute = function(codestring){

        // here some code sanitizing, please

        with (this.scope) {
            with (window) {
                eval(codestring);
            }
        }
    };
}

Mogę więc utworzyć instancję Sandbox i użyć jej funkcji execute (), aby uruchomić kod. Ponadto wszystkie nowe zadeklarowane zmienne w kodzie eval'd ostatecznie będą powiązane z zakresem execute (), więc nie będzie kolidujących nazw ani bałaganu z istniejącym kodem.

Chociaż obiekty globalne będą nadal dostępne, te, które powinny pozostać nieznane w kodzie piaskownicy, muszą być zdefiniowane jako proxy w obiekcie Sandbox :: scope.

Mam nadzieję, że to działa dla Ciebie.

Możesz opakować kod użytkownika w funkcję, która na nowo definiuje zabronione obiekty jako parametry - byłyby wtedy undefinedwywołane:

(function (alert) {

alert ("uh oh!"); // User code

}) ();

Oczywiście sprytni napastnicy mogą obejść ten problem, sprawdzając Javascript DOM i znajdując niezamknięty obiekt, który zawiera odniesienie do okna.

Innym pomysłem jest skanowanie kodu użytkownika za pomocą narzędzia takiego jak jslint . Upewnij się, że nie ma predefiniowanych zmiennych (lub: tylko zmienne, które chcesz), a następnie, jeśli są ustawione lub dostępne jakiekolwiek zmienne globalne, nie pozwól na użycie skryptu użytkownika. Ponownie, może być podatny na chodzenie po DOM - obiekty, które użytkownik może skonstruować za pomocą literałów, mogą mieć niejawne odniesienia do obiektu okna, do którego można uzyskać dostęp, aby uciec z piaskownicy.