javascript

Отключаем любые элементы из нашего DOM дерева, используя MutationObserver

  • среда, 19 июля 2017 г. в 03:13:40
https://habrahabr.ru/post/333564/
  • JavaScript


Недавно сидя на диване, я решил поиграться с MutationObserver. Это достаточно знатная фича, с помощью которой можно слушать DOM дерево. Сейчас достаточно распространена.

Так же с помощью MutationObserver можно не только лишь слушать, но и по факту предотвращать изменения DOM дерева. Подумав об этом, я сделал библиотечку, которая может блокировать ненужные теги и атрибуты, которыми вы все равно не стали пользоваться.

Выглядит это вот так:

{
    "tagsType": "blacklist",
    "tags": [
        "script"
    ],
    "attributesType": "blacklist",
    "attributes": {
        "*": ["onerror"]
    }
}

кря

С помощью манифеста мы для примера отрезали все теги script, и все атрибуты onerror, которые не должно выйти добавить после запуска strict_dom. Т.е. по сути так можно вырезать многие потенциальные XSS уязвимости на сайте (в данном варианте не особо на самом деле), или отучить себя и свою команду использовать какие-либо устарелые HTML теги и атрибуты.

Манифест может иметь следующие параметры:

  • outdatedUrl — ссылка на которую будет редиректить, если браузер старый (по умолчанию отключено)
  • tagsType — выбираем принцип блеклиста или вайтлиста для удаления тегов
  • tags — список ненужных тегов
  • attributesType — выбираем принцип блеклиста или вайтлиста для удаления атрибутов к тегам
  • attributes — список ненужных атрибутов

Собственно, все это работает через MutationObserver, а код можете подглядеть тут