griffincss-ui 0.27.0 → 0.28.0

package/src/griffinjs/widgets/lightbox.js

@@ -9,8 +9,23 @@
  * в один кадр без кнопок. Адрес кадра — data-gr-src, без него — href:
  * у видео это разные адреса — во фрейм встаёт только плеер, страницу ролика
  * хостинги во фрейме не показывают, а ссылка без скрипта ведёт именно на неё.
- * Тип — по адресу кадра (картинка, видео, iframe для плееров YouTube, Vimeo,
- * Rutube и VK Видео) или явно: data-gr-type="iframe".
+ * Тип — по адресу кадра (картинка, видео, iframe для хостов списка кадров)
+ * или явно: data-gr-type="iframe".
+ *
+ * Адрес кадра — http(s), относительный, data: или blob:. Любой другой кадр
+ * не открывает: javascript: во фрейме исполнился бы в origin страницы,
+ * а data-* редакторы и фильтры CMS не проверяют как ссылку. Отвергнутый
+ * кадр из группы выпадает; щелчок по нему остаётся браузеру.
+ *
+ * Фреймом — только адрес из списка GriffinJS.config.frames: иначе в окне
+ * сайта с его адресом в строке встала бы любая страница (форма входа,
+ * data: без сервера). Запись — хост (поддомены входят), хост с началом
+ * пути или 'self' — свой origin. Список по умолчанию ставит модуль, если
+ * сайт не задал свой; push расширяет, присваивание заменяет, читается он
+ * при каждом открытии. Каждый кадр — в песочнице: вкладку не уводит,
+ * allow-same-origin — только хостам списка (без него плееры не
+ * поднимаются), своему origin — никогда: его SVG со <script> получил бы
+ * доступ к странице.
  *
  * База без JS — ссылка на большое изображение или на страницу ролика.
  * Окно строится при открытии и уничтожается при закрытии: так видео
@@ -23,7 +38,13 @@
 
   var ATTR = 'data-gr-lightbox';
   var VIDEO = /\.(mp4|webm|ogv|mov)(\?|#|$)/i;
-  var EMBED = /youtube\.com|youtu\.be|vimeo\.com|rutube\.ru|vkvideo\.ru|vk\.com\/video/i;
+  var SCHEMES = /^(https?|data|blob):$/;
+  // Набор — по замеру настоящих плееров: allow-presentation им не нужен,
+  // а WebKit на него пишет ошибку в консоль.
+  var SANDBOX = 'allow-scripts allow-popups allow-popups-to-escape-sandbox';
+  var config = G.config;
+
+  if (!config.frames) config.frames = ['self', 'youtube.com', 'youtu.be', 'vimeo.com', 'rutube.ru', 'vkvideo.ru', 'vk.com/video'];
 
   var dialog = null;
   var track = null;
@@ -31,14 +52,48 @@
   var events = G.listeners();
   var listen = events.add;
 
+  // Адрес по правилам браузера: регистр, пробелы по краям и табы внутри
+  // схемы разбор снимает. Не адрес — null.
+  function parse(src) {
+    try {
+      return new URL(src, document.baseURI);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  // Адрес в списке кадров: 'self' — свой origin, 'host' — хост списка,
+  // '' — нет. Хост и путь сверяются с началом записи: хостинг — сам хост
+  // или его поддомен, а не подстрока где угодно (…/rutube.ru-logo.png —
+  // не плеер). Свой origin — всегда 'self', даже под записью-хостом.
+  // Страница с диска: origin у неё и у её файлов непрозрачный ('null'),
+  // своё узнаётся по протоколу file:; data: и blob: кадром не бывают.
+  function listed(url) {
+    if (!url || !/^(https?|file):$/.test(url.protocol)) return '';
+
+    var own = url.protocol === 'file:' ? location.protocol === 'file:' : url.origin === location.origin;
+    var where = (url.hostname + url.pathname).toLowerCase();
+    var list = [].concat(config.frames);
+
+    for (var i = 0; i < list.length; i++) {
+      var entry = String(list[i]).toLowerCase();
+      var at = where.indexOf(entry.indexOf('/') < 0 ? entry + '/' : entry);
+
+      if (entry === 'self' ? own : !at || (at > 0 && at < url.hostname.length && where.charAt(at - 1) === '.')) return own ? 'self' : 'host';
+    }
+
+    return '';
+  }
+
+  // Без data-gr-type фреймом угадываются хосты списка, но не свой сайт:
+  // свои адреса — картинки и видео.
   function typeOf(node, src) {
     var explicit = node && node.getAttribute && node.getAttribute('data-gr-type');
 
     if (explicit) return explicit;
     if (VIDEO.test(src)) return 'video';
-    if (EMBED.test(src)) return 'iframe';
 
-    return 'image';
+    return listed(parse(src)) === 'host' ? 'iframe' : 'image';
   }
 
   // Элемент разметки → описание кадра. data-gr-src старше href: у видео
@@ -55,15 +110,19 @@
     };
   }
 
+  // Имя группы сравнивается, а не склеивается в селектор: кавычка в нём
+  // роняла бы querySelectorAll, подобранное — собирала бы чужие ссылки.
   function groupOf(node) {
     var name = node.getAttribute(ATTR);
 
     if (!name) return [node];
 
-    var all = document.querySelectorAll('[' + ATTR + '="' + name + '"]');
+    var all = document.querySelectorAll('[' + ATTR + ']');
     var out = [];
 
-    for (var i = 0; i < all.length; i++) out.push(all[i]);
+    for (var i = 0; i < all.length; i++) {
+      if (all[i].getAttribute(ATTR) === name) out.push(all[i]);
+    }
 
     return out;
   }
@@ -86,7 +145,7 @@
     }
 
     if (item.type === 'iframe') {
-      return element('iframe', null, { src: item.src, allow: 'autoplay; fullscreen; picture-in-picture', allowfullscreen: '', title: item.caption || item.alt || 'Видео' });
+      return element('iframe', null, { sandbox: SANDBOX + (item.same ? ' allow-same-origin' : ''), src: item.src, allow: 'autoplay; fullscreen; picture-in-picture', allowfullscreen: '', title: item.caption || item.alt || 'Видео' });
     }
 
     return element('img', null, { src: item.src, alt: item.alt });
@@ -97,15 +156,43 @@
   // --- Открытие ----------------------------------------------------------------
 
   function open(items, index, opts) {
+    var list = [];
+    var at = index || 0;   // номер открываемого в исходной группе
+
+    // Кадр с отвергнутым адресом выпадает из группы; отвергнут
+    // открываемый — окна нет. Новый номер — число принятых до него.
+    // Адрес приводится к строке один раз: она проверяется, она же
+    // встаёт в кадр — в копию описания, объект вызывающего не меняется.
+    // Фрейм — только по списку кадров.
+    index = 0;
+
+    for (var k = 0; k < items.length; k++) {
+      var src = String(items[k].src);
+      var url = parse(src);
+      // Схема — http(s), data:, blob: или та же, что у страницы: с диска
+      // свои файлы — file:, относительный адрес иначе не открылся бы.
+      var kind = url && (SCHEMES.test(url.protocol) || url.protocol === location.protocol) && (items[k].type === 'iframe' ? listed(url) : 'any');
+
+      if (!kind) {
+        G.warn('lightbox: frame address refused: ' + src + ' (iframe: GriffinJS.config.frames)');
+
+        if (k === at) return null;
+        continue;
+      }
+
+      if (k < at) index++;
+      list.push(Object.assign({}, items[k], { src: src, same: kind === 'host' }));
+    }
+
+    if (!list.length) return null;
+
     close();
 
     opts = opts || {};
-    index = index || 0;
+    items = list;
 
     var n = items.length;
 
-    if (n === 0) return null;
-
     dialog = element('dialog', 'gr-modal gr-lightbox', { 'aria-label': opts.label || 'Просмотр' });
 
     var trackEl = element('div', 'gr-track gr-lightbox-track', { tabindex: '0' });
@@ -169,6 +256,9 @@
 
     document.body.appendChild(dialog);
 
+    if (typeof dialog.showModal === 'function') dialog.showModal();
+    else dialog.setAttribute('open', '');
+
     if (n > 1) {
       track = G.track(trackEl, { loop: true, index: index });
       listen(trackEl, G.track.CHANGE, function (event) {
@@ -176,15 +266,10 @@
       });
     }
 
-    if (typeof dialog.showModal === 'function') dialog.showModal();
-    else dialog.setAttribute('open', '');
-
     return api;
   }
 
   function openFrom(node) {
-    trigger = node;
-
     var group = groupOf(node);
     var items = [];
     var index = 0;
@@ -194,7 +279,11 @@
       items.push(itemOf(group[i]));
     }
 
-    return open(items, index);
+    var opened = open(items, index);
+
+    if (opened) trigger = node;
+
+    return opened;
   }
 
   // --- Закрытие ----------------------------------------------------------------
@@ -241,10 +330,10 @@
 
   function onClick(event, node) {
     // Ctrl/Cmd/средняя кнопка — читатель хочет новую вкладку, а не окно.
-    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button) return false;
+    // Кадр не открылся — ссылка работает как без скрипта.
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button || !openFrom(node)) return false;
 
     if (event.preventDefault) event.preventDefault();
-    openFrom(node);
 
     return true;
   }

package/src/griffinjs/widgets/megamenu.js

@@ -27,7 +27,9 @@
  *     закрывает и возвращает фокус на заголовок;
  *   * закрытие щелчком мимо полосы и уходом фокуса;
  *   * ajax-панели: data-gr-src на пункте грузится при первом открытии,
- *     состояния loading → ready | error пишутся на пункт;
+ *     состояния loading → ready | error пишутся на пункт. Только ответ
+ *     своего origin с типом text/html: чужой адрес, data: и прочие
+ *     схемы — error без запроса;
  *   * закрытие с состоянием (Этап 48d): панель, чей уход тема анимирует,
  *     не пропадает в первом же кадре — на пункт ставится
  *     data-gr-state="closing", open снимается по transitionend/animationend
@@ -98,6 +100,44 @@
     return document.activeElement === node;
   }
 
+  // Фрагмент — только ответ своего origin с типом text/html: разметку
+  // из innerHTML браузер оживляет, и <img onerror> чужого ответа исполнился
+  // бы в origin страницы. Адрес — http(s) своего origin (у data: origin —
+  // строка 'null'); редирект на чужой отклоняет mode: 'same-origin'; тип
+  // ответа отсекает свой JSON или текст, отражающий запрос. Тип — целиком:
+  // text/htmlx — не HTML, а склейку двух заголовков («text/html,
+  // application/json») браузер читает по последнему типу.
+  function fragment(src) {
+    var url = null;
+
+    try { url = new URL(src, document.baseURI); } catch (e) { /* не адрес */ }
+
+    if (!url || !/^https?:$/.test(url.protocol) || url.origin !== location.origin) {
+      return Promise.reject(new Error('foreign origin'));
+    }
+
+    return fetch(url.href, { mode: 'same-origin' }).then(function (response) {
+      if (!response.ok) throw new Error('HTTP ' + response.status);
+      if (!/^text\/html\s*(;[^,]*)?$/i.test(response.headers.get('content-type'))) throw new Error('not text/html');
+
+      return response.text();
+    }).then(function (html) {
+      // Кусок разметки — без meta, base и link: refresh увёл бы страницу
+      // без щелчка, base сменил бы базу адресов всей страницы, а в куске
+      // разметки они — ошибка или подлог. В <template> они не срабатывают
+      // и снимаются до вставки; <script> куска не исполняется и так.
+      var tpl = document.createElement('template');
+
+      tpl.innerHTML = html;
+
+      var bad = tpl.content.querySelectorAll('meta, base, link');
+
+      for (var i = 0; i < bad.length; i++) bad[i].remove();
+
+      return tpl.content;
+    });
+  }
+
   // Длительность --gr-transition у узла, мс: «0.2s ease» → 200, «150ms» → 150,
   // пусто или 0s → 0. Одно чтение вычисленного стиля при закрытии.
   function duration(node) {
@@ -282,22 +322,18 @@
       item.loaded = true;
 
       if (typeof fetch !== 'function') {
-        G.warn('мегаменю: fetch недоступен, панель ' + src + ' не загружена');
+        G.warn('megamenu: fetch is unavailable, panel ' + src + ' not loaded');
         setAttr(item.el, 'data-gr-state', 'error');
         return;
       }
 
       setAttr(item.el, 'data-gr-state', 'loading');
 
-      fetch(src).then(function (response) {
-        if (!response.ok) throw new Error('HTTP ' + response.status);
-
-        return response.text();
-      }).then(function (html) {
-        item.panel.innerHTML = html;
+      fragment(src).then(function (html) {
+        item.panel.replaceChildren(html);
         setAttr(item.el, 'data-gr-state', 'ready');
       }, function (error) {
-        G.warn('мегаменю: панель ' + src + ' не загружена: ' + (error && error.message));
+        G.warn('megamenu: panel ' + src + ' not loaded: ' + (error && error.message));
         setAttr(item.el, 'data-gr-state', 'error');
       });
     }

package/src/griffinjs/widgets/range.js

@@ -74,7 +74,7 @@
     var listeners = G.listeners();
     var fields = [];
 
-    if (!inputs.length) throw new Error('внутри нет ни одного <input type="range">');
+    if (!inputs.length) throw new Error('no <input type="range"> inside');
 
     function doneOf(input) {
       var min = edge(input, 'min', 0);
@@ -168,11 +168,14 @@
 
     if (opts && opts.fields) {
       var selectors = String(opts.fields).split(',');
+      // Поля — <input> своей формы (без формы — документа): селекторы
+      // приходят и из данных.
+      var scope = G.closest(el, 'form') || document;
 
       for (var f = 0; f < inputs.length; f++) {
-        var field = document.querySelector(selectors[f] || '#');
+        var field = scope.querySelector(selectors[f] || '#');
 
-        if (!field) throw new Error('поле «' + selectors[f] + '» не найдено');
+        if (!field || field.tagName !== 'INPUT') throw new Error('field "' + selectors[f] + '" not found');
 
         fields.push(field);
         pull(f);

package/src/griffinjs/widgets/slider.js

@@ -43,7 +43,7 @@
 
     var trackEl = el.querySelector('.gr-track') || el.firstElementChild;
 
-    if (!trackEl) throw new Error('у слайдера нет дорожки');
+    if (!trackEl) throw new Error('the slider has no track');
 
     var track = G.track(trackEl, { loop: o.loop, rewind: o.rewind, step: o.step, engine: o.engine, index: o.index || 0 });
     var attrs = G.recorder();

package/src/griffinjs/widgets/sortable.js

@@ -89,7 +89,7 @@
       return el.querySelector('tbody');
     }
 
-    if (!bodyOf() || !heads.length) throw new Error('нужны tbody и заголовки с aria-sort');
+    if (!bodyOf() || !heads.length) throw new Error('needs tbody and headers with aria-sort');
 
     var attrs = G.recorder();
     var events = G.listeners();

package/src/griffinjs/widgets/tooltip.js

@@ -53,7 +53,7 @@
     var target = el.firstElementChild;
     var tip = el.querySelector('[role="tooltip"]') || el.lastElementChild;
 
-    if (!target || !tip || tip === target) throw new Error('у подсказки нет якоря и текста');
+    if (!target || !tip || tip === target) throw new Error('the tooltip has no anchor and text');
 
     var shown = false;
     var timer = null;