Возможно ли "песочница" произвольного JavaScript работать только на одном <div>, а не на всем документе?

то, что я пытаюсь сделать, - заставить какой-то произвольный код JavaScript выполнить "внутри" элемент DOM, например. <div>. Другими словами, можно ли сделать кусок кода "мышлением", что <div> является корнем иерархии документов (или <body> документа)?

Пример реальной жизни:

Скажем, у нас есть страница, которая позволяет выполнять код JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Executor</title>
  <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
  <div></div>
  <input/>
  <button onclick="$('div').html(eval($('input').val()))">
    Execute
  </button>
</body>
</html>

Код имеет доступ ко всему документу и может его изменить, например:

$("input").hide()

Не мешает мне писать какой-нибудь глупый код, -)

Можно ли ограничить область действия для некоторого фрагмента кода JavaScript? и как это сделать, если это возможно?

С уважением.

Edit:

Код, который я хочу выполнить, может быть всем. Если ваше решение основано на какой-либо модификации данного кода, пожалуйста, опишите, как это сделать правильно.

Edit2:

Во-первых, я не знаю, почему я голосую.

Во-вторых, код, который я буду исполнять, - это другой произвольный код, а не мой.

Чтобы все было ясно:

То, что я действительно пытаюсь сделать, - это как-то имитировать браузер. Получите содержимое какой-либо веб-страницы и вставьте в мою. Это относительно легко, когда мы решили отключить JavaScript и вырезать все места, где он может появиться, но этого я не могу сделать. На данный момент я хочу ограничить только модификацию DOM (вредоносный код). Я буду работать над переадресациями и куками позже, когда у меня есть базовая идея.

ОТВЕТЫ

Ответ 1

Лучший способ добиться полной изоляции и инкапсуляции фрагмента кода состоит в том, чтобы поместить его в iframe и поместить его в субдомен вашего сайта, чтобы имя домена внешней HTML-страницы не было идентично внутреннему HTML-страницу. Внутри iframe JavaScript увидит только DOM URL-адреса iframe и не будет иметь доступа к внешней DOM. Эта изоляция обеспечивается моделью безопасности браузера.

Положительная сторона этого метода заключается в том, что вы можете быть уверены, что script, работающий внутри iframe, не будет просачиваться и украсть данные с вашей внешней страницы. Эта изоляция также является недостатком - сложнее обмениваться данными между внешней страницей и внутренней страницей. Чтобы обеспечить контролируемый доступ или обмен данными между iframe и внешней страницей, существует множество методов совместного использования данных между доменами, которые вы можете исследовать. Если вам нужно всего лишь задать аргументы "на" внутренней странице iframe, вы можете передать данные по URL как параметры запроса. Если вам нужен двусторонний обмен данными, вы можете использовать методы понижения домена, чтобы кратко привести имена доменов, чтобы браузер позволял осуществлять обмен данными между внешней и внутренней страницами.

Поскольку вы предлагаете eval() произвольный код, введенный во входной элемент управления, вам определенно нужно защищать логику главной страницы от потенциального хакера. Используйте iframe.

Ответ 2

Один подход может заключаться в инкапсулировании всего кода, который необходимо защитить, с анонимной функцией, и передать все параметры окружающей среды с похожими объектами, но не модифицировать, чтобы не допускать глобальных манипуляций DOM, для простейшего примера

(function(document,JQuery,$,window){ //make sure all global access methods are here

//eval code here or just copy and paste

})(modifiedDocument,modifiedJQuery,modifiedJQuery,modifiedWindow);

Теперь может возникнуть вопрос, как мы можем изменить объект документа? Возможно, один aproach

var modifiedDocument = function(){

    this.getElementById = function(id){ //one of global accessing functions

         //check if given id is withing the restriction div
         return document.getElementById(id);

         //if found element is not withing restriction div just return null or what is default
         return null;
    }

}

Самоназывающие анонимные функции позволяют нам предотвращать конфликты глобальных переменных и использоваться во многих известных библиотеках, таких как jQuery.

Чтобы иметь возможность применить этот метод, сначала вам нужно определить все возможные способы, как script пытается прочитать или записать глобальный объект DOM. Я не могу дать вам полное решение, потому что, используя этот метод, очевидно, что проект может потреблять всю мою неделю, но это может осветить ваш путь!

Ответ 3

Это из jQuery selectors. Это полезно?

<!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <input name="man-news" />

      <input name="milkman" />
      <input name="letterman2" />
      <input name="newmilk" />
    <script>$("input[name*='man']").val("has man in it!");</script>
    </body>
    </html>

Ответ 4

По умолчанию jQuery основан на элементе document, но вы можете передать второй параметр, который сообщает jQuery, где "начать", что существенно ограничивает выполнение этого элемента...

var divToRestrictTo = $("#myDiv");
$("input", divToRestrictTo); // will only look within the DIV

Ответ 5

Теоретически возможно (и может быть даже практически возможно) управлять средой исполнения JS до такой степени, что вы можете изолировать script. Тем не менее, он очень, очень заинтересован в этом. Это тяжелая работа, и использование IFRAME рекомендуется практически для любого случая этого требования.

Если IFRAME действительно почему-то не может быть и речи, вы можете попробовать посмотреть проект Caja:

http://code.google.com/p/google-caja/

Я сам не использовал Caja, но похоже, что он может делать то, что вам нужно. Тем не менее, вам, вероятно, придется заплатить определенную сложность. IFRAME - это, в основном, ответ на веб-архитектуру в вашем случае использования, и большинство других решений будут напоминать сложные и сложные хаки.

Ответ 6

Это уже давно спрошено, но я наткнулся на него недавно, потому что у меня такая же ситуация, когда мне нужно встроить контент сторонних разработчиков, включая javascript.

Я столкнулся с проектом google caja (https://developers.google.com/caja/), который своими словами:

- это инструмент, позволяющий безопасно вставлять сторонний HTML, CSS и JavaScript в ваш сайт. Он обеспечивает богатое взаимодействие между страницей внедрения и встроенными приложениями. Caja использует модель безопасности объектов, позволяющую использовать широкий диапазон гибких политик безопасности, чтобы ваш сайт мог эффективно контролировать то, что встроенный сторонний код может выполнять с пользовательскими данными.

Я еще не использовал его, но планирую попробовать его в ближайшее время.