Несколько способов и предотвращение внешнего интерфейса ввода могут быть атакованы

Безопасность

предисловие

Недавно я видел статью, в статье говорилось, что поле ввода былоатака путем внедрения кодаОпасность, я сделал небольшой пример и обнаружил, что есть такая ситуация.

Пример

Давайте сначала рассмотрим небольшой пример, простейшую функцию сообщения, введите информацию в поле ввода, а затем вставьте информацию на страницу:

эффект страницы

ключевой код

<body>
	<div id="content"></div>
	<input id='input'>
	<input type="button" id='button' value="提交">
</body>
<script>
	const btn = document.getElementById('button');
	const myInput = document.getElementById('input');
	const content = document.getElementById('content');
	btn.onclick = ()=> {
            content.innerHTML = myInput.value
	};
</script>

Окно ввода кода Несколько способов, которые могут привести к атаке

Внедрение HTML-кода в поле ввода

Введите в поле ввода<h1>哈哈，你的页面结构被我破坏了</h1>, а затем отправить, эффект будет следующим:

<script>Поле ввода этикетки

Введите в поле ввода<script> alert(0); </script>, затем отправьте.
Мы обнаружим, что нет всплывающего окна, здесь нет исполненияJavaScriptПричина проведения процедуры:HTML 5не реализованоinnerHTMLвставлен<script>теги, но вставленные фрагменты видны в структуре кода.

Другие не проходят<script>Выполнение этикеткиJavaScriptКод программы вводится в поле ввода

Потерпеть неудачу<script>Выполнение этикеткиJavaScriptПо-прежнему существует риск подвергнуться атаке, как в примере, приведенном в MDN:<img src='x' onerror='alert(1)'>, мы можем видеть, что программа является исполняемой после ввода:

охранять от

Поскольку поле ввода может быть атаковано, мы должны принять меры предосторожности.VueЗа нас взяли лучшую защиту. если не используетсяVue, есть и подходящие решения.

Принцип предотвращения Vue

VueПри динамической вставке элемента метка<,>и т. д. преобразуются в escape-символы&lt,&gtждать, чтобы избежатьJavaScriptвыполнение программы с использованиемVueПосле вставки кода через поле ввода код вставленной страницы будет экранирован следующим образом:

Без предосторожностей код для вставки страницы выглядит следующим образом:

Собственные средства защиты JavaScript

мы можем использовать иVueТакой же метод предосторожности<,>,&,',"и другие символы заменены escape-символами, чтобы избежать рисков, которые используются здесьzhangxiangliangодноклассники«30 секунд в день ⏱ Все арестованы»Метод, написанный в статье для обработки:

// 将输入框的字符串通过正则，将符号替换成转义字符
const escapeHTML = str =>
    str.replace(/[&<>'"]/g, tag => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
    }[tag] || tag));

Суммировать

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

использованная литература

30 секунд в день ⏱ Арестуем вместе:nuggets.capable/post/684490…
Элемент MDN.innerHTML:developer.Mozilla.org/this-cn/docs/…

Категории