Guidance whitelisting arbitrary HTML attributes?

Support
1

Apparently there used to be a topic here at meta where it would help guide you how to inject scripts but it has been removed.

At first I did not know that markdown would strip id and classes from posts in html and right after that I found out scripts have to be executed differently.

I am trying to make this codepen example work inside the discourse site but not sure where to begin as it does not work the usual way of copy/paste obviously:
https://codepen.io/luiscestou/pen/bPPzLy

I understand that I can only put the scripts from the admin side, which I did but I believe there is more work to do to make it work inside the topics.

Basically these external scripts get triggered to inject content into a div that has certain data attributes.

Do I have to rewrite the whole external scripts with jquery and ember to inject the divs with content? I am hoping not having to reinvent the wheel.

Thanks in advance,

1 Like
2

I don’t understand this request. You want average users to be able to inject arbitrary Javascript in your Discourse, by simply posting it in a reply? This would be a security nightmare.

6 Likes
3

Thanks for the quick reply Jeff.

The average user will not be adding the external scripts, only providing divs with data attributes that will be whitelisted to trigger the JS external scripts to fill in the content when those divs are found.

Aren’t divs with attributes (basic HTML) already supported and accepted in the editors for the average user to post? Unless because I’m admin I can also do basic HTML, but they can’t?

Other large websites like wowhead and icyveins have been using these scripts for their users, maybe they are at risk?

Thanks again for your help.

4

So you don’t want JS, you want

<div attribute='blah'>

I’ll edit your topic title so it is more reflective of what you’re actually asking. I’m not sure if we allow arbitrary whitelisting of individual HTML attributes.

You could whitelist <iframe> domains in your site settings to achieve something similar though.

1 Like
5

If you search “wowhead” in Meta search you will find:

where we give you a few examples of integrating posts with games databases.

Do you have any concrete example of what you want to achieve ?

4 Likes
6

Thanks Jeff, I have been able to whitelist iframes in the past but is not the behavior that I’m looking for.

Hola Rafael,
I guess I’m bad at explaining. There is an example on this post:

At the bottom of that link on my post it says “Loading”. That is a div with specific attirbutes that is supposed to trigger the external scripts that I have placed in the admin theme /body section (where scripts go) and get generated with content (filled up with statistic bars) via JavaScript.

In the end it should look like the codepen that I linked previously at the top of this topic when the data is generated.

The custom data attributes are already whitelisted by default with discourse and do not get removed from the div like id or class does.

My issue is, how can I make these external scripts execute and generate data inside these empty divs based on attributes? Based on these attributes, they could be different per topic or post and trigger the script to display different data that gets generated by these external scripts.

To summarize what I’m intending to do

External scripts placed on the admin > customize > theme “Edit CSS/HTML” section:

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

Input on the editor by a user or me:

<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"
>Loading...</div>

Output when the div is found and external javascript (the scripts that I placed on the admin side) are executed and triggered to generate content based on those data attributes:

58%20PM
58%20PM1232Ă—409 45 KB

Am I making sense? I apologize if I can’t explain myself well, as I’m bilingual and sometimes I tend to make things sound more complicated.

2 Likes
7

This is exactly what @Falco linked you, read https://github.com/xfalcox/discourse-hearthstone it has everything you need.

5 Likes
8

Hello Joffrey,

Ok thanks. I did tried to read and understand some of the code, will see how far I can get.

Thanks again.

3 Likes
9

I just realised I never wrote about this, but Generic bbcode wrapper for theme components could be very helpful for your use case.

5 Likes