Опасность пользовательского ввода в src и url

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

Всё в больших размерах, взаимодействие с веб-сервисами становится более гибким и расширенным. На некоторых проектах доступно редактирование/добавление html элементов на страницу. Такие элементы, как:

<img> <script> <audio> <video>

и другие, могут наследовать аттрибут src, который указывает на адрес файла. Так же и css стили могут наследовать url.

Проблема кроется в том, что пользователи могут добавить невалидный src, либо «обрушить» https:// протокол сайта, указав http:// в аттрибуте src. Так же пользователи могут указать ссылку вовсе не на ожидаемое аудио или картинку, а на свой сервер, который будет логировать ip адреса клиентов сайта. «Анонимность?», — До свидания.

Итак, рассмотрим парочку практических примеров недобросовестного применения src:

• «Обрушение» https:
  Если ресурс работает с протоколом https, то это можно легко нарушить, например, добавив изображение с http протоколом

  <img src="http://foo.com/image.jpg" />

  
  Интересно, даже habr сбросил https и показывает предупредительный значок
  
  
  
  Мелочь, но лучше бы был протокол https без подобных предупреждений.
  
• «Логгинг айпи»:
  Суть в том, что в src указываем адрес на свой сайт, который выводит ip адреса, с которых идут запросы. А запросы идти будут от клиентов сайта, когда мы разместим в src свою ссылку.
  
  Простейшее приложение на Node.js фреймворке — Express
  
  

  const express = require("express");
  const app = express();
  
  app.get("/", (req, res) => {
    console.log(req.headers["x-forwarded-for"]);
    res.send(req.headers["x-forwarded-for"]);
  });
  
  app.listen(80);
  

  
  Стартуем, проксируем через ngrok (для windows ngrok.exe http 80) и ставим ссылку в src. Всё, теперь ip каждого клиента, попавшего на страницу с этим элементом будет «пойман». Я считаю, что это частично деанонимизирует клиентов и такое нужно предотвращать.
• XSS уязвимости:
  Эта тема обсуждалась много где, писать много от себя не вижу смысла, предлагаю почитать статьи, но приведу один простейший пример
  
  

  <img src="javascript:alert('javascript код выполнился');">

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

1. Тщательно фильтровать ввод пользователя
2. Избежать принятия от пользователя ссылок на сторонние источники, а принимать только файлы и данные, а в свою очередь размещать их на своём сервере, либо cdn

HTML src
CSS url
XSS