Альтернатива для функции eval() для этого кодового блока

Я работаю над редактором HTML-кода, например JSBin. Я использую eval() для оценки JavaScript в текстовом поле JS редактора. Однако я узнал, что не могу использовать его в Интернете из-за проблем с безопасностью.Альтернатива для функции eval() для этого кодового блока

Пожалуйста, помогите мне найти альтернативу. Вот мой код.

<!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>

источник

2015-02-08 Shubham

Отправьте его на серверный скрипт, который выводит его в '

Альтернатива для функции eval() для этого кодового блока

Смежные вопросы