static.html 12.1 KB
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>VulnNotti</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="{% static 'vendor/freelancer_bootstrap/css/bootstrap.min.css' %}">
    <!-- Custom fonts for this template -->
    <link rel="stylesheet" href="{% static 'vendor/freelancer_font-awesome/css/font-awesome.min.css' %}">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="{% static 'vendor/magnific-popup/magnific-popup.css' %}">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="{% static 'css/freelancer.min.css' %}">
    <!--  highlight.js  -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.5.0/styles/vs2015.min.css">
    <script src="//cdn.jsdelivr.net/highlight.js/9.5.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>


  </head>


  <body id="page-top">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="/">Home</a>
      </div>
    </nav>

    <!-- Header -->
    <header class="bg-primary text-white text-center">
      <div class="container">
        <h3 class="text-uppercase mb-0">정적 분석 페이지 입니다.</h3>
        <hr class="star-light">
      </div>

    </header>

    <!-- Portfolio Grid Section -->

    <!-- <section class="portfolio" id="portfolio"> -->
    <div class="col-lg-4" style="float: left;">
      <div class="container">
        <canvas id="barChart" width="700" height="400"></canvas>
      </div>
    </div>
    <div class="col-lg-4" style="float: right;">
      <div class="container">
        <canvas id="barChart2" width="700" height="400"></canvas>
      </div>
    </div>
    <div class="col-lg-4" style="float: right;">
      <div class="container">
        <canvas id="pieChart" width="600" height="300"></canvas>
      </div>
    </div>


    <p>&nbsp;</p>
    <p>&nbsp;</p>


    <div class="col-md-12 col-lg-12">
      <div style="width: 100%; margin-left: 0px; margin-right: 0px;">

        <table class="table table-hover">
          <thead>
            <tr>
              <th>NO</th>
              <th>CVE</th>
              <th>Type</th>
              <th>Level</th>
              <th>Publish Date</th>
              <th>Update Date</th>
              <th>File Name</th>
              <th>Function Name</th>
              <th>CVE URL</th>
              <th>CVE Detail</th>
            </tr>
            {% for object in object_list %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ object.cveName }}</td>
              <td>{{ object.type }}</td>
              <td>{{ object.level }}</td>
              <td>{{ object.publish_date }}</td>
              <td>{{ object.update_date }}</td>
              <td>{{ object.fileName }}</td>
              <td>{{ object.funcName }}</td>
              <td>{{ object.url }}</td>
              <td>{{ object.cveDetail }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <!-- <div style="text-align: center;">
      <button id="prev" class="btn btn-primary" style="background-color: #FF0066; border: #FF0066;"><< Prev</button>
      <button id="next" class="btn btn-primary" style="margin-left: 200px; background-color: #FF0066; border: #FF0066;">Next >></button>
    </div> -->
  

    <!-- {% for object in object_list %}
    <div class="portfolio-modal mfp-hide" id="portfolio-modal-{{ forloop.counter }}">
      <div class="portfolio-modal-dialog bg-white">

        <div class="modal-header">
          <h2 class="text-secondary text-uppercase mb-0" style="text-align: center;">cve function name</h2>
        </div>

        <div class="col-lg-6" style="float: left; border: 1px solid red; height: 1000px;">
          <h2 class="text-secondary text-uppercase mb-0" style="text-align: center;">previous sourcecode</h2>
          <hr class="star-dark mb-5">
          <pre><code>

          </code></pre>
        </div>

        <div class="col-lg-6" style="float: left; border: 1px solid red; height: 1000px;">
          <h2 class="text-secondary text-uppercase mb-0" style="text-align: center;">modified sourcecode</h2>
          <hr class="star-dark mb-5">
          <pre><code>
            {{ object.codeOriBefore }}
          </code></pre>
        </div>

        <div class="modal-footer" style="float: clear;">
          <a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
            <i class="fa fa-close"></i>
            Close
          </a>
        </div>

      </div>
    </div>
    {% endfor %} -->

  </body>

  <script src="{% static 'js/Chart.min.js' %}"></script>
  <script src="{% static 'vendor/freelancer_jquery/jquery.min.js' %}"></script>
  <script src="{% static 'vendor/freelancer_bootstrap/js/bootstrap.bundle.min.js' %}"></script>
  <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
  <script src="{% static 'vendor/magnific-popup/jquery.magnific-popup.min.js' %}"></script>
  <script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
  <script src="{% static 'js/contact_me.js' %}"></script>
  <script src="{% static 'js/freelancer.min.js' %}"></script>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
  <script type="text/javascript">


  // $(document).on("click", "#next", function() {
  //   $.ajax({
  //     url: '{% url 'static' %}',
  //     data: {
  //       idx : $('#idx').val(),
  //       method : 'next',
  //     },
  //     dataType: "json",
  //     success: function(){
  //       object_list = []
  //       var tbody = document.getElementById('tbody');
  //       tbody.innerHTML = '';
  //     },
  //     error: function(e){
  //       alert("error");
  //     },
  //   });
  // });


  // barChart
  var level0 = {{ level0 }};
  var level1 = {{ level1 }};
  var level2 = {{ level2 }};
  var level3 = {{ level3 }};
  var level4 = {{ level4 }};
  var level5 = {{ level5 }};
  var level6 = {{ level6 }};
  var level7 = {{ level7 }};
  var level8 = {{ level8 }};
  var level9 = {{ level9 }};


  var ctx = document.getElementById("barChart").getContext('2d');
  var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: ["0-1", "1-2", "2-3", "3-4", "4-5", "5-6", "6-7", "7-8", "8-9", "9-10"],
      datasets: [{
          label: 'CVE Level',
          data: [level0, level1, level2, level3, level4, level5, level6, level7, level8, level9],
          backgroundColor: [
              'rgba(0, 196, 0, 0.4)',
              'rgba(0, 224, 32, 0.4)',
              'rgba(0, 240, 0, 0.4)',
              'rgba(209, 255, 0, 0.4)',
              'rgba(255, 224, 0, 0.4)',
              'rgba(255, 204, 0, 0.4)',
              'rgba(255, 188, 16, 0.4)',
              'rgba(255, 156, 32, 0.4)',
              'rgba(255, 128, 0, 0.4)',
              'rgba(255, 0, 0, 0.4)',
          ],
          borderColor: [
              'rgba(0,196,0,1)',
              'rgba(0, 224, 32, 1)',
              'rgba(0, 240, 0, 1)',
              'rgba(209, 255, 0, 1)',
              'rgba(255, 224, 0, 1)',
              'rgba(255, 204, 0, 1)',
              'rgba(255, 188, 16, 1)',
              'rgba(255, 156, 32, 1)',
              'rgba(255, 128, 0, 1)',
              'rgba(255, 0, 0, 1)',
          ],
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero:true
              }
          }]
      }
  }
  });

  var year2009 = {{ year2009 }};
  var year2010 = {{ year2010 }};
  var year2011 = {{ year2011 }};
  var year2012 = {{ year2012 }};
  var year2013 = {{ year2013 }};
  var year2014 = {{ year2014 }};
  var year2015 = {{ year2015 }};
  var year2016 = {{ year2016 }};
  var year2017 = {{ year2017 }};
  var year2018 = {{ year2018 }};

  var ctx = document.getElementById("barChart2").getContext('2d');
  var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: ["2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"],
      datasets: [{
          label: 'CVE Year',
          data: [year2009, year2010, year2011, year2012, year2013, year2014, year2015, year2016, year2017, year2018],
          backgroundColor: [
              'rgba(50, 50, 50, 0.4)',
              'rgba(0, 196, 0, 0.4)',
              'rgba(255, 0, 0, 0.4)',
              'rgba(255, 128, 0, 0.4)',
              'rgba(100, 100, 0, 0.4)',
              'rgba(0, 192, 192, 0.4)',
              'rgba(96, 0, 255, 0.4)',
              'rgba(200, 200, 0, 0.4)',
              'rgba(0, 0, 255, 0.4)',
              'rgba(255, 60, 60, 0.4)',
          ],
          borderColor: [
              'rgba(50, 50, 50, 1)',
              'rgba(0, 196, 0, 1)',
              'rgba(255, 0, 0, 1)',
              'rgba(255, 128, 0, 1)',
              'rgba(100, 100, 0, 1)',
              'rgba(0, 192, 192, 1)',
              'rgba(96, 0, 255, 1)',
              'rgba(100, 200, 100, 1)',
              'rgba(0, 0, 255, 1)',
              'rgba(255, 60, 60, 1)',
          ],
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero:true
              }
          }]
      }
  }
  });
  // pieChart
  // var red = {{ red }}
  // var green = {{ green }}
  // var blue = {{ blue }}
  // var test = 10;
  var Dos = {{ DOS }};
  var Overflow = {{ OVERFLOW }};
  var XSS = {{ XSS }};
  var SqlInjection = {{ SQLINJECTION }};
  var CSRF = {{ CSRF }};
  var FileInclusion = {{ FILEINCLUSION }};
  var MemoryCorruption = {{ MEMORY }};
  var ExecuteCode = {{ EXCUTE }};
  var NORMAL = {{ NORMAL }};

  var ctx = document.getElementById("pieChart").getContext('2d');
  // var ctx2 = document.getElementById("pieChart2").getContext('2d');
  var data = {
      datasets: [{
          data: [Dos, Overflow, XSS, SqlInjection, CSRF, FileInclusion, MemoryCorruption, ExecuteCode, NORMAL],
          backgroundColor: [
              'rgba(50, 50, 50, 0.4)',
              'rgba(0, 196, 0, 0.4)',
              'rgba(255, 128, 0, 0.4)',
              'rgba(100, 100, 0, 0.4)',
              'rgba(0, 192, 192, 0.4)',
              'rgba(96, 0, 255, 0.4)',
              'rgba(200, 200, 0, 0.4)',
              'rgba(0, 0, 255, 0.4)',
              'rgba(255, 60, 60, 0.4)',
          ],
          borderColor: [
              'rgba(50, 50, 50, 1)',
              'rgba(0, 196, 0, 1)',
              'rgba(255, 128, 0, 1)',
              'rgba(100, 100, 0, 1)',
              'rgba(0, 192, 192, 1)',
              'rgba(96, 0, 255, 1)',
              'rgba(100, 200, 100, 1)',
              'rgba(0, 0, 255, 1)',
              'rgba(255, 60, 60, 1)',
          ],
          borderWidth: 1
      }],
      // These labels appear in the legend and in the tooltips when hovering different arcs
      labels: [
          'DoS',
          'Overflow',
          'XSS',
          'Sql Injection',
          'CSRF',
          'File Inclusion',
          'Memory Corruption',
          'Execute Code',
          'NORMAL'
      ]
  };
  var options = {
          title: {
                    display: true,
                    text: 'CVE Type',
                    position: 'top'
                },
          rotation: -0.7 * Math.PI
  };

  var myChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
  });
  // var myChart2 = new Chart(ctx2, {
  //   type: 'pie',
  //   data: data,
  //   options: options
  // });

  </script>
</html>