此代码块的 eval() 函数的替代方法

Question

我正在开发一个像 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>

Answer 1

很难弄清楚你到底在问什么。

运行 eval() 用户生成的内容（看起来你正在做）确实带来了各种安全风险，因为它允许将用户生成的代码直接注入到上下文中它通常无法进入。就是这样，你无法改变它。如果你打算运行任意用户代码（无论你怎么做），你都会有这个风险。

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

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

此代码块的 eval() 函数的替代方法

Alternative for eval() function for this codeblock

html

javascript

jquery

eval