javascript - 此代码块的 eval() 函数的替代方案-6ren

javascript - 此代码块的 eval() 函数的替代方案

转载作者：行者123 更新时间：2023-12-02 16:29:56

25

4

我正在开发像 JSBin 这样的 HTML 代码编辑器。我正在使用 eval() 来评估编辑器的 JS 文本框中的 JavaScript。但是，我发现由于安全问题我无法在线使用它。

请帮助我找到替代方案。这是我的代码。

<!doctype html>
<html lang="en">
 <head>
      <title>CodeMash - The HTML Code Player</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 </head>

 <style>

      body{
           margin: 0;
           padding: 0;
           font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
      }

      #topMenu{
           width: 100%;
           height: 40px;
           background-color: #e0e0e0;
           border-bottom: 2px solid grey;
      }

      #logo{
           font-weight: bold;
           font-size: 130%;
           padding: 5px 0 0 20px;
           float: left;
      }
      #run{
           float: right;
           padding: 5px 10px;
           font-weight: 120%;
      }
      #runButton{
           width: 70px;
           height: 30px;
      }
      #choice{
           width: 177.5px;
           margin: 0 auto;
           list-style: none;
           border: 1px solid grey;
           height: 27px;
           border-radius: 3px;
           padding: 0;
           position: relative;
           top: 5px;

      }
      #choice li{
           float: left;
           padding: 5px 2px;
           border-right: 1px solid grey;
      }

      .clear{
           clear: both;
      }

      .codeBox{
           height: 100%;
           width: 50%;
           float: left;
           position: relative;
      }

      .codeBox textarea{
           width: 100%;
           height: 100%;
           float: left;
           font-family: monotype;
           font-size: 120%;
           padding:5px;
           box-sizing: border-box;
      }

      .codeType{
           position: absolute;
           right: 20px;
           top: 10px;
      }
      #CSSBox , #JSBox{
          display: none;
      }

      iframe{
           height: 100%;
           position: relative;
           left: 20px;
           border: none;
      }

      .select{
           background-color: grey;
      }

 </style>

 <body>

      <div id="wrapper">

           <div id="topMenu">
                <div id="logo">
                     CodeMash
                </div>
                <div id="run">
                     <button id="runButton">Run</button>
                </div>
                <ul id="choice">
                     <li class="toggle select">HTML</li>
                     <li class="toggle">CSS</li>
                     <li class="toggle">JS</li>
                     <li style="border:none" class="toggle select">RESULT</li>
                </ul>
           </div>
           <div class="clear"></div>

           <div class="codeBox" id="HTMLBox">
                <div class="codeType">HTML </div>
                <textarea id="htmlCode">Hello</textarea>
           </div>
           <div class="codeBox" id="CSSBox">
                <div class="codeType">CSS </div>
                <textarea id="cssCode">html{background-color:blue}</textarea>
           </div>
           <div class="codeBox" id="JSBox">
                <div class="codeType">JS</div>
                <textarea id="jsCode">alert('HELLO WORLD!!!!');</textarea>
           </div>
           <div class="codeBox" id="RESULTBox">
                <div class="codeType">RESULT</div>
                <iframe id="result"></iframe>
           </div>
      </div>

      <script>
           var windowHeight=$(window).height();
           var menuBarHeight=$("#topMenu").height();
           var codeBoxHeight=windowHeight-menuBarHeight;
           $(".codeBox").height(codeBoxHeight+"px");

           $(".toggle").click(function(){
                $(this).toggleClass("select");

                var active=$(this).html();
                $("#"+active+"Box").toggle();

                var showDiv=$(".codeBox").filter(function(){
                     return($(this).css("display")!="none");
                }).length;

                var width=100/showDiv;
                $(".codeBox").css("width",width+"%");
           });

           $("#runButton").click(function(){
                   $("iframe").contents().find("html").html('<style>'+$("#cssCode").val()+'</style>'+$("#htmlCode").val());
                        document.getElementById("result").contentWindow.eval($("#jsCode").val());
           });





      </script>
 </body>
 </html>

最佳答案

很难准确地弄清楚您真正要问的是什么。

在用户生成的内容上运行eval()(看起来您正在这样做)确实会带来各种安全风险，因为它允许将用户生成的代码直接注入(inject)到它所使用的上下文中。一般情况下可能进不去。这就是事实，你无法改变它。如果您要运行任意用户代码(无论您如何执行)，您都会面临这种风险。

大多数想要运行任意用户生成代码的网站所做的是将用户生成的代码隔离在不同的域中，由于浏览器的跨域限制，运行用户生成的代码的域无法自由访问其余的域。页面位于其他域中，无法自由访问您的主服务器。这给你一些保护。仔细观察 jsFiddle 的作用，您将看到该技术被使用，因为用户的代码被提供到来自 http://fiddle.jshell.net 的 iframe 中，这与制作 jsFiddle 的其他框架不同。网站作品来自http://jsfiddle.net。 jsFiddle 还为 iframe 使用了一些沙箱功能。

在最新的浏览器中，您还可以使用sandbox capabilities设置额外的跨框架安全限制。 (仅限最新一代浏览器)。

关于javascript - 此代码块的 eval() 函数的替代方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28397931/

25

4

0

文章推荐： JavaScript 语法 : AngularJS Filter

文章推荐： javascript - 在另一个对象中声明对象数组

文章推荐： javascript - 更新顶点几何体 Threejs

方案:从一组三个数字中返回两个最大的数字
我应该编写一个函数来打印一组给定的三个数字中两个较大数字的平方和。我对这种情况的处理相当笨拙。我没有编写返回一组 3 中最大的两个数字的函数，而是编写了函数，以便表达式减少到两个所需的数字。 # S
方案:位置上的类型参数错误
如果有人可以提供帮助，我将不胜感激。我一直在敲我的头一天试图让这个工作。我已经在互联网上搜索并重新阅读了手册，但我就是不明白。 guile << __EOF__ ( define heading-li
方案 - 使用列表列表
目前我正在处理一个方案问题，其中我们正在使用方案列表表示一个图。我们使用的第一个变体是表示为的边列表图 '((x y) (y z) (x z)) 我们正在使用的图的第二个变体被称为 x 图，表示为
方案 - 从参数顺序运行两个过程？
我正在尝试创建一个函数，该函数将两个函数作为参数并执行它们。我尝试使用 cond ，但它只执行 action1 . (define seq-action (lambda (action1 act
方案，何时使用符号而不是字符串？
我提前为我的原始英语道歉；我会尽量避免语法错误等。两周前，我决定更新我对 Scheme(及其启示)的知识，同时实现我在手上获得的一些数学 Material ，特别是我注册的自动机理论和计算类(cla
方案 - 分数的余数
Scheme中有没有函数支持分数的“div”操作？意思是 - 11 格 2.75 = 4。最佳答案我认为你的问题的答案是:没有，但你可以定义它: #lang racket (define (di
方案:如何将列表拆分为奇数条目和偶数条目的两个列表？
我在scheme中实现合并排序，我必须通过定义两个辅助方法来实现:merge和split。 Merge 需要两个列表(已经按递增顺序)并将它们合并在一起。我这样做了如下: (define merge
方案:似乎无法加载文件
尝试从终端加载方案文件。我创建了一个名为 test.scm 的文件，其中包含以下代码: (define (square x) (* x x)) (define (sum-of-squares x y)
方案 - 计算列表中的元素
我有以下代码: (define (howMany list) (if (null? list) 0 (+ 1 (howMany (cdr list))))) 如果我们执行以
方案 - 转换为连续传递样式
我有点了解如何将基本函数(例如算术)转换为Scheme中的连续传递样式。但如果函数涉及递归怎么办？例如， (define funname (lambda (arg0 arg1)
方案 - 字符串追加两个字符串列表
我正在尝试附加两个字符串列表但我不知道如何在两个单词之间添加空格。 (define (string-concat lst1 lst2) (map string-append lst1
方案 - 将列表的元素解压到函数中
这个问题已经有答案了: How do I pass a list as a list of arguments in racket? (2 个回答) 已关闭 8 年前。我有一个函数，它需要无限数量的
方案:与集合混淆!
我对这段代码的工作方式感到困惑: (define m (list 1 2 3 '(5 8))) (let ((l (cdr m))) (set! l '(28 88))) ==>(1 2 3 (5 8
方案:添加到记录列表
我正在为学校做一项计划作业，有一个问题涉及我们定义记录“类型”(作为列表实现)(代表音乐记录)。我遇到的问题是我被要求创建一个过程来创建这些记录的列表，然后创建一个将记录添加到该列表的函数。这很简单
方案 - 计算列表中的元素
我有以下代码: (define (howMany list) (if (null? list) 0 (+ 1 (howMany (cdr list))))) 如果我们执行以
方案 - 字符串追加两个字符串列表
我正在尝试附加两个字符串列表但我不知道如何在两个单词之间添加空格。 (define (string-concat lst1 lst2) (map string-append lst1
方案:使用不带递归的抽象列表函数
如何使用抽象列表函数(foldr、foldl、map 和 filter 编写函数)，无需递归，消耗数字列表 (list a1 a2 a3 ...) 并产生交替和 a1 - a2 + a3 ...？最
方案 - 定义列表与符号
我试图找出在 Scheme 中发生的一些有趣的事情: (define last-pair (lambda (x) (if (null? (cdr x))
方案:列表计数器
这个问题在这里已经有了答案: Count occurrence of element in a list in Scheme? (4 个答案) 关闭 8 年前。我想实现一个函数来计算列表中元素出现
方案 - 使用表格的导数
我正在尝试使用下面的代码获取方案中的导数。谁能告诉我哪里出错了？我已经尝试了一段时间了。 (define d3 (λ (e) (cond ((number? e) 0) ((e

首页

博学

6Ren·AI

商城

javascript - 此代码块的 eval() 函数的替代方案