Руководство по включению произвольных атрибутов HTML в белый список?

Поддержка
1

Похоже, здесь, на Meta, раньше была тема, которая помогала разобраться, как внедрять скрипты, но её удалили.

Сначала я не знал, что Markdown удаляет атрибуты id и классы из HTML-разметки в постах, а вскоре выяснил, что скрипты нужно выполнять иначе.

Я пытаюсь заставить этот пример с CodePen работать внутри сайта на Discourse, но не знаю, с чего начать, так как обычный способ копирования и вставки, очевидно, не работает:

Я понимаю, что добавлять скрипты можно только со стороны администратора, что я и сделал, но, полагаю, для того чтобы они работали внутри тем, нужно сделать ещё кое-что.

По сути, эти внешние скрипты срабатывают для внедрения контента в div с определёнными атрибутами data.

Мне придётся переписывать все внешние скрипты на jQuery и Ember, чтобы внедрять div с контентом? Надеюсь, что нет, не хочу изобретать велосипед.

Заранее спасибо,

2

Я не понимаю этот запрос. Вы хотите, чтобы обычные пользователи могли внедрять произвольный JavaScript в ваш Discourse, просто опубликовав его в ответе? Это стало бы кошмаром с точки зрения безопасности.

3

Спасибо за быстрый ответ, Джефф.

Обычный пользователь не будет добавлять внешние скрипты; он только предоставит div-элементы с атрибутами данных, которые будут внесены в белый список для запуска внешних JS-скриптов, заполняющих контент при обнаружении этих div-элементов.

Разве div-элементы с атрибутами (базовый HTML) уже не поддерживаются и не принимаются редакторами для публикации обычными пользователями? Или это возможно только потому, что я администратор, а обычные пользователи не могут этого делать?

Другие крупные сайты, такие как Wowhead и Icy Veins, используют эти скрипты для своих пользователей. Возможно, они тоже находятся в зоне риска?

Еще раз спасибо за вашу помощь.

4

Получается, вам не нужен JS, вам нужно

<div attribute='blah'>

Я отредактирую заголовок вашей темы, чтобы он лучше отражал суть вашего вопроса. Не уверен, разрешено ли у нас произвольное whitelisting отдельных HTML-атрибутов.

Однако вы можете настроить whitelisting доменов для тегов <iframe> в настройках вашего сайта, чтобы добиться похожего результата.

5

Если вы поищете «wowhead» в поиске Meta, вы найдете:

где мы приводим несколько примеров интеграции постов с базами данных игр.

У вас есть конкретный пример того, чего вы хотите добиться?

6

Спасибо, Джефф. Я ранее мог добавлять iframe в белый список, но это не то поведение, которое я ищу.

Привет, Рафаэль,
кажется, я плохо объясняю. Пример есть в этом посте:

Внизу этого поста по ссылке написано «Загрузка». Это div с определёнными атрибутами, который должен запускать внешние скрипты, размещённые мной в секции /body административной темы (туда, где размещают скрипты), и заполнять его содержимым (статистическими графиками) через JavaScript.

В итоге всё должно выглядеть как на CodePen, который я ссылался ранее в начале этой темы, когда данные сгенерированы.

Пользовательские data-атрибуты по умолчанию уже разрешены в Discourse и не удаляются из div, в отличие от id или class.

Моя проблема: как заставить эти внешние скрипты выполняться и генерировать данные внутри этих пустых div на основе атрибутов? На основе этих атрибутов они могут различаться для каждой темы или поста и запускать скрипт для отображения разных данных, которые генерируются этими внешними скриптами.

Краткое резюме того, что я планирую сделать

Внешние скрипты, размещённые в админке > Настроить > Тема «Редактировать CSS/HTML» в секции :

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://bloodmallet.com/js/bloodmallet_chart_import.min.js"></script>

Ввод в редакторе от пользователя или от меня:

<div 
  data-bloodmallet="chart"
  data-wow-class="shaman" 
  data-wow-spec="elemental" 
  data-chart-engine="highcharts"
  data-tooltip-engine="wowhead"
  data-type="trinkets"
  data-azerite-tier="all"
  data-fight-style="patchwerk"
  data-entries="7"
  data-background-color="#343a40" 
  data-font-color="#f8f9fa" 
  data-axis-color="#828282"
  data-language="en"
>Загрузка...</div>

Результат, когда div найден и внешние JavaScript-скрипты (те, что я разместил на стороне админки) выполнены и запущены для генерации контента на основе этих data-атрибутов:

58%20PM
58%20PM1232×409 45 KB

Ясно ли я выразился? Извините, если объясняю не очень хорошо — я двуязычный, и иногда мои формулировки звучат сложнее, чем есть на самом деле.

7

Это именно то, на что @Falco дал вам ссылку. Прочитайте GitHub - xfalcox/discourse-hearthstone · GitHub — там есть всё необходимое.

8

Здравствуйте, Жоффри,

Спасибо. Я попытался прочитать и понять часть кода, посмотрим, насколько далеко смогу продвинуться.

Ещё раз спасибо.

9

Я только что понял, что никогда не писал об этом, но Generic bbcode wrapper for theme components может быть очень полезным для вашего случая.