代码之家 › 专栏 › 技术社区 › Dawid

是否可以“沙盒”任意的javascript只在一个而不是整个文档上操作?

security javascript

Dawid · 技术社区 · 14 年前

我要做的是强制一些任意的javascript代码在dom元素内部执行,例如 <div> . 换言之,是否可以让一段代码“思考”到 <DIV & GT; 是文档层次结构的根(或 <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代码的效果区域?如果可能怎么做?

最好的问候。

编辑:

我要执行的代码可能就是一切。如果您的解决方案是基于对给定代码的某种修改,请描述如何正确地执行它。

编辑2:

首先,我不知道为什么我会投反对票。

其次,我要执行的代码是别人的任意代码,而不是我的。

要让一切都清楚:

我真正想做的是以某种方式模拟浏览器。获取一些网页的内容,然后插入到我的网页中。当我们决定关闭javascript并删除所有可能出现的地方时,这是相对容易的,但这是我做不到的。目前我只想限制DOM修改(恶意代码)。稍后,当我有一个基本的想法时,我将处理重定向和cookies。

6 回复 | 直到 9 年前

dthorpe 14 年前

实现代码块完全隔离和封装的最佳方法是将其放入iframe中,并将其放到站点的子域中,这样外部HTML页的域名就不会与内部HTML页相同。在iframe中,javascript将只看到iframe url的dom,并且不能访问外部dom。此隔离由浏览器安全模型强制执行。

这种技术的另一个好处是,您可以高度自信,在iframe中运行的脚本不会泄漏并从外部页面窃取数据。这种隔离也是缺点——在外部页面和内部页面之间共享数据比较困难。为了在iframe和外部页面之间提供对数据的控制访问或共享,您可以研究各种跨域数据共享技术。如果只需要在iframe内部页面上抛出参数“at”,那么可以将URL上的数据作为查询参数传递。如果您需要双向数据交换,您可以使用域降低技术将域名简单地排列起来,这样浏览器就可以在外部和内部页面之间进行数据交换。

既然您建议在输入控件中输入eval()任意代码,那么您肯定应该保护您的主页逻辑免受潜在的黑客攻击。使用iFrAME。

Kemal DaÄ 11 年前

一种方法是用匿名函数封装所有需要保护的代码,并用类似的对象传递所有环境参数,但修改后不允许全局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);

现在,我们可能会想到一个问题,我们如何修改文档对象?也许一个围裙

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)中使用。

为了能够应用此方法,首先必须确定所有可能的方法,脚本如何尝试读取或写入全局DOM对象。我不能给你完整的解决方案,因为使用这个方法显然是一个项目可能会消耗我整个星期,但这可能会照亮你的道路!

Aaron Anodide 14 年前

这是来自 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>

Josh Stodola 14 年前

默认情况下,jquery基于 document 元素,但您可以传递第二个参数,告诉jquery“start”在哪里,这实际上限制了该元素的执行…

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

hallvors 11 年前

从理论上讲,控制JS执行环境在某种程度上是可能的(甚至可能实际上是可能的),您可以对脚本进行沙盒处理。然而,这是非常,非常涉及这样做。这是一项非常艰巨的工作,建议在任何情况下都使用iframe。

如果由于某种原因,iframes确实无法解决问题,您可以尝试查看caja项目:

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

我自己也没用过卡贾,但听起来它可以满足你的需要。不过,您可能需要支付一些严重的复杂性成本。iframe基本上是Web体系结构对您的用例的回答,而大多数其他解决方案将类似于复杂而复杂的黑客攻击。

bvella 9 年前

很久以前就有人问过这个问题,但是最近我偶然发现了它,因为我有一个类似的情况,我需要嵌入第三方内容,包括javascript。

我遇到一个叫caja的谷歌项目( https://developers.google.com/caja/ )用他们自己的话来说:

是使第三方HTML、CSS和JavaScript安全嵌入您的网站的工具。它支持嵌入页面和嵌入应用程序之间的丰富交互。CAJA使用一个对象功能安全模型来允许各种灵活的安全策略,这样您的网站就可以有效地控制嵌入式第三方代码对用户数据的作用。

我还没有用过,但计划很快试用一下。