Является ли добавление этой «площадки для кода» на мой веб-сайт WordPress угрозой безопасности?

Поэтому я планирую добавить интерактивную демонстрацию фрагментов кода в виде «игровой площадки для кода» в некоторые учебные пособия на моем веб-сайте.

Мне было интересно, есть ли здесь риски для безопасности.

Поля кода доступны для редактирования.

Очевидно, что люди могут легко внедрить JavaScript.

Однако отличается ли это от того, когда мы внедряем JS с вкладки консоли? Есть ли здесь какие-либо проблемы с безопасностью?

Спасибо за любую помощь в этом.

PS. Вы можете запустить фрагмент кода ниже или посмотреть код здесь: https://codepen.io/elementhow/pen/dyJKYoB

let examples = document.querySelectorAll(".prog-example");

examples.forEach((example, i, arr) => {
   let pres = example.querySelectorAll(".examples pre");
   if (pres.length < 1) document.querySelector('.examples').remove();
   let htmlOfPreview = example.querySelector(".preview-parent pre");
   let preview = example.querySelector(".preview");
   htmlOfPreview.innerHTML = escapeHTML(preview.innerHTML);
   htmlOfPreview.addEventListener('input',function(){
      preview.innerHTML = htmlOfPreview.textContent;
   });

   let CSSdiv = document.createElement("style");
   document.getElementsByTagName("head")[0].appendChild(CSSdiv);
   pres.forEach((pre, i, arr) => {
      pre.addEventListener("click", function () {
         arr.forEach((e) => e.classList.remove("label-active"));
         pre.classList.add("label-active");
         CSSdiv.innerHTML = pre.textContent;
      });
      pre.setAttribute('contenteditable',"");
      if (pre.hasAttribute("contenteditable")){
         pre.addEventListener('input', function(){
         CSSdiv.innerHTML = pre.textContent;
      });
      }
   });
   if (pres[0]) pres[0].click();
});

function escapeHTML(html) {
   return document.createElement("div").appendChild(document.createTextNode(html)).parentNode.innerHTML;
}
*, *::after {
   box-sizing: border-box;
}
.prog-example {
   display: flex;
   width: 100%;
   background:#cecece;
}
.prog-example .examples {
   max-height: 440px;
   overflow-y: auto;
   padding: 0 10px;
   background-color:#eee8ab;
   min-width:170px;
   position:relative;
}

.prog-example .preview-parent {
   margin: 10px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}
.prog-example .examples pre {
   font-size: 12px;
   padding: 6px;
   border: 1px solid #999;
   margin: 14px 0;
   border-radius: 8px;
   cursor: pointer;
   background-color:#fff;
   min-width:170px;
}
.prog-example .examples pre[contenteditable]{
       /* cursor: text; */
}
.prog-example .examples pre.label-active {
   outline: 2px solid #333;
}
.prog-example .preview-parent pre {
   background-color: #eee;
   margin: 0 0 10px;
   padding: 0 10px;
   position:relative;
}
.prog-example .preview-parent .preview {
   border: 1px solid #999;
   flex-grow: 1;
   position:relative;
   min-height:130px;
   background-color:#fff;
}
.prog-example .preview-parent > pre::after,.prog-example .preview-parent .preview::after,  .prog-example .examples::after {
   content:'HTML';
   position:absolute;
   background-color:#777;
   font-family:monospace;
   font-size:13px;
   color:#fff;
   padding:4px;
    border-bottom-left-radius:6px;
   top:0;
   right:0;
}
.prog-example .preview-parent .preview::after {
   content:'PREVIEW';
}
.prog-example .examples::after {
   content:'CSS';
}

/* scroll bar if there is overflow */
.prog-example .examples::-webkit-scrollbar-track {
   background-color: #f4f4f4;
}
.prog-example .examples::-webkit-scrollbar {
   width: 6px;
   background-color: #f4f4f4;
}
.prog-example .examples::-webkit-scrollbar-thumb {
   background-color: #00000044;
}
<div class="prog-example">
   <div class="examples">
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre>
.test-button{
   font-size:44px;
}      </pre>
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre>
.test-button{
   font-size:44px;
}      </pre>
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre>
.test-button{
   font-size:44px;
}      </pre>
      <pre>
.test-button{
   font-size:16px;
}</pre>
      <pre>
.test-button{
   font-size:21px;
}      </pre>
      <pre contenteditable>
.test-button{
   font-size:44px;
}      </pre>
      </div>
   <div class="preview-parent">
      <pre contenteditable></pre>
      <div class="preview">
<div class="wrapper">
<button class='test-button'>click me</button>
</div>
         </div>
   </div>
   </div>

ну, вы разрешаете запускать там пользовательский javascript .... так что потенциально это угроза безопасности ... <img onerror="alert('blah')" src>

vanowm 09.04.2022 20:57

Вы также можете зайти в консоль браузера и ввести JavaScript. Как это отличается? Это мой вопрос.

Maxime Desrosiers 09.04.2022 21:33
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
2
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Краткий ответ: пока нет входных данных, которые могут отправлять http-запросы на ваш сервер, все это на стороне клиента и безопасно.

Длинный:

В мире HTTP для поверхности атаки вам нужно «поле ввода» (не элемент пользовательского интерфейса), куда вы можете отправить некоторые данные, которые будут проанализированы сервером. Это делается через http-запросы, где вы помещаете какие-то данные в заголовок и тело, отправляете их на сервер и ожидаете от сервера какой-то ответ. Если вы не создадите политики для того, какие формы данных приемлемы для сервера, то можно внедрить код, который заставит сервер вести себя иначе, чем бизнес-логика.

В вашем случае вы получаете игровую площадку с сервера, и скрипт на игровой площадке запускается на движке javascript вашего браузера (на стороне клиента), но ничего не отправляется обратно на сервер.

Например, большой проблемой было бы, если бы без каких-либо мер безопасности вы могли отправить свою вредоносную игровую площадку на сервер для ее сохранения (например, codepen). Таким образом, вы можете вводить код на разных уровнях: серверная структура, база данных (SQL-инъекция). И если кто-то другой сможет открыть вашу вредоносную игровую площадку, опасный скрипт будет запущен на их стороне клиента (XSS и CSRF-атака).

Таким образом, каждый вход потенциально представляет собой угрозу, которую вы должны безопасно обрабатывать на стороне сервера, выполняя очистка ввода и выход экранирование.

Спасибо, это полезно! Не могли бы вы немного расширить? Например, допустим, вы заходите на случайный веб-сайт, редактируете DOM и добавляете поле ввода и кнопку отправки. Как получается, что это все еще не доходит до сервера, но если оно было отправлено с веб-сайта таким образом, оно будет?

Maxime Desrosiers 10.04.2022 00:31

Добавлено более длинное объяснение к исходному ответу. Если вы создаете ту же кнопку, которая будет отправлять запрос, как исходную, она может быть заблокирована политикой безопасности контента, поскольку источник вновь созданной кнопки не является доверенным. developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…

nemmondod 10.04.2022 02:10

Другие вопросы по теме