# Guidance whitelisting arbitrary HTML attributes?

**URL:** https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469
**Category:** Support
**Created:** [7월 19, 2019, 9:04오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469 "2019-07-19T21:04:54Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![lcestou](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lcestou/32/148373_2.png) [@lcestou](https://meta.discourse.org/u/lcestou)
#### Post date: [7월 19, 2019, 9:04오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/1 "2019-07-19T21:04:54Z")

</div>

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/embed/preview/bPPzLy?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=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,

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 19, 2019, 9:18오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/2 "2019-07-19T21:18:23Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![lcestou](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lcestou/32/148373_2.png) [@lcestou](https://meta.discourse.org/u/lcestou)
#### Post date: [7월 19, 2019, 10:44오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/3 "2019-07-19T22:44:16Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 19, 2019, 11:06오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/4 "2019-07-19T23:06:53Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [7월 19, 2019, 11:54오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/5 "2019-07-19T23:54:15Z")

</div>

> [@lcestou](#):
>
> wowhead

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

> [@Hover preview and quote of the day](https://meta.discourse.org/t/hover-preview-and-quote-of-the-day/119212/4):
>
> Close, we did it for HearthStone and Artifact as a proofs of concept: [https://github.com/xfalcox/discourse-artifact/](https://github.com/xfalcox/discourse-artifact/)[https://github.com/xfalcox/discourse-hearthstone](https://github.com/xfalcox/discourse-hearthstone) Nowadays with the improvements @j.jaffeux did on the tool tips for Discourse, it should be even easier.

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 ?

---

<div class="post-metadata">

### Author: ![lcestou](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lcestou/32/148373_2.png) [@lcestou](https://meta.discourse.org/u/lcestou)
#### Post date: [7월 20, 2019, 2:43오전 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/6 "2019-07-20T02:43:03Z")

</div>

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:

> **[Blood Mallet Script](https://wowlazymacros.com/t/blood-mallet-script/6953)**
>
> Hello Guys, is there any way to use the blood mallet syntax to import blood mallet sim data? You can see that often on icy veins or wowhead… that would be very nice…

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](https://global.discourse-cdn.com/meta/original/3X/5/4/54962ee4c8886eb3dd7db237b859d1d438eb7459.png)

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.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [7월 20, 2019, 8:51오전 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/7 "2019-07-20T08:51:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![lcestou](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lcestou/32/148373_2.png) [@lcestou](https://meta.discourse.org/u/lcestou)
#### Post date: [7월 20, 2019, 12:06오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/8 "2019-07-20T12:06:27Z")

</div>

Hello Joffrey,

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

Thanks again.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [7월 20, 2019, 12:49오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/9 "2019-07-20T12:49:28Z")

</div>

I just realised I never wrote about this, but [Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516) could be very helpful for your use case.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [1월 12, 2023, 10:39오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/10 "2023-01-12T22:39:56Z")

</div>



---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [1월 12, 2023, 10:47오후 UTC](https://meta.discourse.org/t/guidance-whitelisting-arbitrary-html-attributes/123469/11 "2023-01-12T22:47:01Z")

</div>