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()（它看起来你正在做）确实会带来各种安全风险，因为它允许用户生成的代码直接注入到它通常无法正常运行的上下文中进入。就是这样，你无法改变它。如果您要运行任意用户代码（无论您如何操作），您将面临此风险。

大多数想要运行任意用户生成的代码的网站都是在不同的域中屏蔽用户生成的代码，由于浏览器的跨域限制，运行用户生成的代码的域无法自由访问其余的页面位于其他某个域中，无法自由访问主服务器。这为您提供了一些保护。仔细查看jsFiddle的作用，您将看到正在使用此技术，因为用户的代码将从http://fiddle.jshell.net提供给iframe，这与使http://jsfiddle.net网站工作的其他框架不同。 jsFiddle还为iframe使用了一些沙盒功能。

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

替代此代码块的eval（）函数

1 个答案: