Mungkinkah Sandbox JavaScript Berjalan di Browser?

Saya bertanya-tanya apakah mungkin untuk menjalankan JavaScript di browser untuk mencegah akses ke fitur yang biasanya tersedia untuk kode JavaScript yang berjalan di halaman HTML.

Sebagai contoh, katakanlah saya ingin memberikan API JavaScript untuk pengguna akhir agar mereka menentukan penangan acara yang akan dijalankan ketika "peristiwa menarik" terjadi, tetapi saya tidak ingin pengguna tersebut mengakses properti dan fungsi windowobjek. Apakah saya dapat melakukan ini?

Dalam kasus paling sederhana, katakanlah saya ingin mencegah panggilan pengguna alert. Beberapa pendekatan yang dapat saya pikirkan adalah:

• Definisikan ulang window.alertsecara global. Saya tidak berpikir ini akan menjadi pendekatan yang valid karena kode lain yang berjalan di halaman (yaitu hal-hal yang tidak ditulis oleh pengguna dalam event handler mereka) mungkin ingin digunakan alert.
• Kirim kode event handler ke server untuk diproses. Saya tidak yakin bahwa mengirim kode ke server untuk diproses adalah pendekatan yang tepat karena penangan acara harus berjalan dalam konteks halaman.

Mungkin solusi di mana server memproses fungsi yang ditentukan pengguna dan kemudian menghasilkan panggilan balik yang akan dijalankan pada klien akan bekerja? Bahkan jika pendekatan itu berhasil, adakah cara yang lebih baik untuk menyelesaikan masalah ini?

Google Caja adalah penerjemah sumber-ke-sumber yang "memungkinkan Anda untuk menempatkan inline HTML dan JavaScript pihak ketiga yang tidak tepercaya di halaman Anda dan tetap aman."

Lihatlah Douglas Crockford's ADsafe :

ADsafe membuatnya aman untuk meletakkan kode tamu (seperti iklan skrip pihak ketiga atau widget) di halaman web mana pun. ADsafe mendefinisikan subset dari JavaScript yang cukup kuat untuk memungkinkan kode tamu melakukan interaksi yang berharga, sementara pada saat yang sama mencegah kerusakan atau intrusi berbahaya atau tidak sengaja. Subset ADsafe dapat diverifikasi secara mekanis dengan alat-alat seperti JSLint sehingga tidak ada inspeksi manusia yang diperlukan untuk meninjau kode tamu untuk keamanan. Subset ADsafe juga memberlakukan praktik pengkodean yang baik, meningkatkan kemungkinan kode tamu akan berjalan dengan benar.

Anda dapat melihat contoh cara menggunakan ADsafe dengan melihat template.htmldan template.jsfile dalam repositori GitHub proyek .

Saya membuat perpustakaan sandboxing yang disebut jsandbox yang menggunakan pekerja web untuk sandbox kode dievaluasi. Ini juga memiliki metode input untuk secara eksplisit memberikan data kode sandbox yang tidak bisa didapatkan.

Berikut ini adalah contoh dari 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
      }
  });

Saya pikir js.js layak disebutkan di sini. Ini adalah penerjemah JavaScript yang ditulis dalam JavaScript.

Itu sekitar 200 kali lebih lambat dari JS asli, tetapi sifatnya membuatnya menjadi lingkungan kotak pasir yang sempurna. Kelemahan lain adalah ukurannya - hampir 600 kb, yang mungkin dapat diterima untuk desktop dalam beberapa kasus, tetapi tidak untuk perangkat seluler.

Seperti disebutkan dalam respons lain, cukup mem-jailed kode di iframe kotak pasir (tanpa mengirimnya ke sisi server) dan berkomunikasi dengan pesan. Saya akan menyarankan untuk melihat perpustakaan kecil yang saya buat sebagian besar karena kebutuhan untuk menyediakan beberapa API untuk kode yang tidak dipercaya, seperti yang dijelaskan dalam pertanyaan: ada peluang untuk mengekspor set fungsi tertentu langsung ke kotak pasir di mana kode yang tidak dipercaya berjalan. Dan ada juga demo yang mengeksekusi kode yang dikirimkan oleh pengguna di kotak pasir:

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

Semua vendor browser dan spesifikasi HTML5 sedang bekerja menuju properti kotak pasir yang sebenarnya untuk memungkinkan iframe kotak pasir - tetapi itu masih terbatas pada rincian granularitas iframe.

Secara umum, tidak ada derajat ekspresi reguler, dll. Dapat dengan aman membersihkan pengguna sewenang-wenang yang disediakan JavaScript karena merosot ke masalah penghentian: - /

Versi yang ditingkatkan dari kode sandbox pekerja web @ RyanOHara, dalam satu file (tidak eval.jsdiperlukan file tambahan ).

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);
    });
    }

Menguji:

https://jsfiddle.net/kp0cq6yw/

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

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

Seharusnya keluaran 6(diuji di Chrome dan Firefox).

Cara yang jelek tapi mungkin ini bekerja untuk Anda, saya mengambil semua global dan mendefinisikannya kembali di ruang pasir, juga saya menambahkan mode ketat sehingga mereka tidak bisa mendapatkan objek global menggunakan fungsi anonim.

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

Interpreter Javascript independen lebih mungkin menghasilkan kotak pasir yang kuat daripada versi yang dikurung dari implementasi browser bawaan. Ryan sudah menyebutkan js.js , tetapi proyek yang lebih mutakhir adalah JS-Interpreter . The docs mencakup bagaimana untuk mengekspos berbagai fungsi untuk interpreter, tetapi ruang lingkup dinyatakan sangat terbatas.

Pada 2019, vm2 sepertinya solusi yang paling populer dan paling sering diperbarui untuk masalah ini.

Dengan NISP Anda akan dapat melakukan evaluasi kotak pasir. Meskipun ekspresi yang Anda tulis bukanlah JS, namun Anda akan menulis ekspresi-s. Ideal untuk DSL sederhana yang tidak membutuhkan pemrograman yang luas.

1) Misalkan Anda memiliki kode untuk dieksekusi:

var sCode = "alert(document)";

Sekarang, misalkan Anda ingin menjalankannya di kotak pasir:

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

Dua baris ini ketika dieksekusi akan gagal, karena fungsi "peringatan" tidak tersedia dari "kotak pasir"

2) Dan sekarang Anda ingin mengekspos anggota objek jendela dengan fungsionalitas Anda:

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

Memang Anda bisa menambahkan tanda kutip yang keluar dan membuat pemolesan lainnya, tapi saya rasa idenya jelas.

Dari mana asal pengguna JavaScript ini?

Tidak banyak yang dapat Anda lakukan tentang pengguna memasukkan kode ke halaman Anda dan kemudian memanggilnya dari browser mereka (lihat Greasemonkey, http://www.greasespot.net/ ). Itu hanya sesuatu yang dilakukan browser.

Namun, jika Anda menyimpan skrip dalam database, lalu mengambilnya dan eval (), maka Anda dapat membersihkan skrip sebelum dijalankan.

Contoh kode yang menghapus semua jendela. dan mendokumentasikan. referensi:

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

Ini mencoba untuk mencegah eksekusi berikut (tidak diuji):

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

Ada banyak batasan yang harus Anda terapkan pada skrip pengguna yang tidak aman. Sayangnya, tidak ada 'wadah kotak pasir' yang tersedia untuk JavaScript.

Saya telah mengerjakan kotak pasir js sederhana untuk membiarkan pengguna membuat applet untuk situs saya. Walaupun saya masih menghadapi beberapa tantangan dengan mengizinkan akses DOM (parentNode tidak akan membiarkan saya menjaga semuanya tetap aman = /), pendekatan saya hanya untuk mendefinisikan ulang objek jendela dengan beberapa anggota yang berguna / tidak berbahaya, dan kemudian mengevaluasi () pengguna kode dengan jendela yang didefinisikan ulang ini sebagai ruang lingkup default.

Kode "inti" saya seperti ini ... (Saya tidak menunjukkannya sepenuhnya;)

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);
            }
        }
    };
}

Jadi, saya dapat membuat instance Sandbox dan menggunakan executnya () untuk menjalankan kode. Juga, semua variabel yang dideklarasikan baru dalam kode yang dievalisasi pada akhirnya akan terikat pada lingkup execut (), sehingga tidak akan ada nama yang berbenturan atau mengacaukan kode yang ada.

Meskipun objek global masih dapat diakses, objek yang seharusnya tidak diketahui oleh kode sandboxed harus didefinisikan sebagai proksi dalam objek Sandbox :: scope.

Semoga ini berhasil untuk Anda.

Anda bisa membungkus kode pengguna dalam fungsi yang mendefinisikan ulang objek terlarang sebagai parameter - ini akan undefinedketika dipanggil:

(function (alert) {

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

}) ();

Tentu saja, penyerang yang pandai dapat menyiasatinya dengan memeriksa DOM Javascript dan menemukan objek yang tidak ditimpa yang berisi referensi ke jendela.

Gagasan lain adalah memindai kode pengguna menggunakan alat seperti jslint . Pastikan itu diatur untuk tidak memiliki variabel yang telah ditetapkan (atau: hanya variabel yang Anda inginkan), dan kemudian jika ada global ditetapkan atau diakses jangan biarkan skrip pengguna digunakan. Sekali lagi, mungkin rentan untuk berjalan DOM - objek yang dapat dibangun pengguna menggunakan literal mungkin memiliki referensi implisit ke objek jendela yang dapat diakses untuk keluar dari kotak pasir.