bitslip6/bitfire

View on GitHub
firewall/views/exceptions.html

Summary

Maintainability
Test Coverage
<style>
  {{custom_css}}
  .form-check-input::before { content: "" !important; }
</style>

<script type="text/javascript">
                
    const VERSION = {{version}};
    const VERSION_STR = "{{sym_version}}";
    

    function update_value(config, value) {
      GBI("spin").classList.remove("hidden");
      BitFire_api("toggle_config_value", {"param":config,"value":value})
        .then(r => r.json())
        .then(data => {
          window.CTR++;
          if (window.CTR >= 5) {1
            window.setTimeout(function(){ 
              GBI("spin").classList.add("hidden");
              GBI("save_changes").innerHTML = "<a href='{{self}}?page=bitfire#tooltips' class='white' style='color:#FFF'>Tour Dashboard <span class='fe fe-chevron-right'></span></a>"; },
              100);
          }
        });
    }
    // config name, block|on|true / report|alert / off|false
    function toggle(elm, type) {
      var e = GBI(elm);
      console.log(e);
      let value = 0;
      if (e.checked) {
        value = Math.floor((Date.now() / 1000) + (86400*3));
      }
      BitFire_api("toggle_config_value", {"param":elm,"value":value})
        .then(r => r.json())
        .then(data => { console.log("toggle", data); });
    }



    function update_str(config) {
      console.log("up", config);
      let e = GBI(config+"_text");
      if (e) {
        let value = e.value;
        console.log("update str", config, value);
        return update_value(config, value);
      } else {
        alert("error, unable to update " + config + " please create support ticket");
      }
    }
</script>

    <!-- NAVIGATION
    ================================================== -->
    

    <div class="main-content">
      
      {{header}}
      
      <script type="text/template" id="exception_template">
        <tr class="mt-4 mb-4">
          <td><%=host%></td>
          <td><%=url%></td>
          <td><%=parameter%></td>
          <td><%=message%></td>
          <td><%=code%></td>
          <td><span class="fe fe-trash-2 pointer" title="remove this exception" onclick="rem_exception('<%=uuid%>')"></span></td>
        </tr>
      </script>
    

      <!-- CARDS -->
      <div class="container-fluid">
        <div class="row justify-content-center">


          <div class="col-12 col-lg-10 col-xl-8">

            <div class="card" style="padding:1rem;">
              <div class="">
                <h3 class="card-header-title text-primary">
                  BitFire Blocking Exceptions
                </h3>
                <br>
                <p class="text-secondary">
                  Exceptions are rules unique to your website which allow normal functionality which may otherwise be blocked by the BitFire firewall.
                  This can happen when plugin developers use features in odd ways that the firewall mistakenly blocks.
                </p>
                <p class="text-secondary">
                  Exceptions are added automatically during the first 5 days of install. You can manually add exceptions to blocked requests by 
                  clicking the magic wand icon on the dashboard blocking page, or by manually editing the exception file.
                </p>
                <hr>
                <p class="text-muted">You can manually edit this file at: {{exception_file}}</pan>
                <hr>



                <label class="form-label left pl-3" style="margin-right:70px; margin-left:-10px;"> Auto-Learn Exceptions </label>
                <div class="form-switch left ml-2">
                    <input class="form-check-input success" autocomplete="off" id="dynamic_exceptions" type="checkbox" {{checked}} onclick="toggle('dynamic_exceptions')" data-bs-toggle="tooltip" data-bs-placement="top" title="Enable dynamic exception learning to prevent false positives.  Learns for 5 days.">
                </div>
                <div class="text-muted right pr-3" id="dynamic_exceptions_text">{{learn_complete}}</div>
                <br>


                <hr>
              </div>
              <div class="card-body mb-4">
                <table style="width:100%">
                  <thead>
                    <tr>
                      <th>Host</th>
                      <th>URL</th>
                      <th>Parameter</th>
                      <th>Rule Type</th>
                      <th>Rule Number</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody id="exception_list">
                    
                  </tbody>
                </table>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    
  <script type="text/javascript">

    window.BITFIRE_NONCE = '{{api_code}}';
    var EXCEPTIONS = {{exception_json}};
    var content = GBI("exception_template");
    var exception_renderer = _.template(content.innerText);

    var html = "";
    var list_elms = _.map(EXCEPTIONS, function (x) {
      console.log(x);
      html += exception_renderer(x);
    });

  // MAIN
  document.addEventListener("DOMContentLoaded", function () {
    GBI("exception_list").innerHTML = html;
  });


    function rem_exception(uuid) {

      BitFire_api("rem_api_exception", {"uuid": uuid})
        .then(response => response.json())
        .then(data => {
          console.log(data);
          if (!data || !data.success) {
            alert("unable to remove exception " + data.note); 
          } else {
            alert(data.note);
            window.location.reload();
          }
        });

    }

    let toggles = document.getElementsByClassName("tog");
    for (let i = 0; i < toggles.length; i++) {
      let id = toggles[i].getAttribute("id");
      let name = id.replace("_con", "");
      let title = toggles[i].getAttribute("data-title");
      let tog = toggles[i].hasAttribute("data-toggle");

      let de = toggles[i].getAttribute("data-enabled");
      let alert = alert_or_block(de);

      let check1 = (alert == "report") ? "checked" : "";
      let check2 = (alert == "on") ? "checked" : "";

      let tail1 = (tog) ? "" : " in alert mode only";
      let tail2 = (tog) ? "" : " in full blocking";

      let tool1 = 'data-bs-toggle="tooltip" data-bs-placement="top" title="'+title+tail1+'"';
      let tool2 = 'data-bs-toggle="tooltip" data-bs-placement="top" title="'+title+tail2+'"';


      let html = '<div id="'+name+'_spin" class="spinner-border text-success spinner-border-sm left mt-1 mr-2 hidden" role="status"></div>';
      if (!tog) {
        html += '<div class="form-check form-switch left" style="margin-left:-60px"> <input class="form-check-input warning" id="'+name+'_report" autocomplete="off" type="checkbox" onclick="return toggle_report(\''+name+'\', true)" '+check1+' '+ tool1 +'> </div>';
      }
      html += '\
  <div class="form-switch right">\
      <input class="form-check-input success" autocomplete="off" id="'+name+'_block" type="checkbox" onclick="return toggle_report(\''+name+'\', false)" '+check2+' '+tool2+'>\
  </div>';
      window.CONFIG_LIST[name] = alert;

      toggles[i].innerHTML = html;
    }


  </script>

  {{gtag}}