Whitelisting some HTML tags

javascript

(Tsu) #1

I am trying to whitelist some HTML tags and am using launcher’s templates for this. The JS files gets modified properly, but I cannot actually use the tags: the lines with them are stripped of any content and are returned as <br />. Is there anything else I have to modify?


I am sharing the complete file here instead of a minimal example, because it might be of interest to other users:

# templates/assets-whitelist-table.template.yml

hooks:
  before_bundle_exec:
    - exec:
       cmd: echo ":whitelisted:" >> "/var/www/discourse/app/assets/javascripts/discourse/lib/markdown.js"

    - replace:
       filename: "/var/www/discourse/app/assets/javascripts/discourse/lib/markdown.js"
       from: /^:whitelisted:.*$/
       to: |
         Discourse.Markdown.whiteListTag('table', 'class', '*');
         Discourse.Markdown.whiteListTag('table', 'id', '*');
         Discourse.Markdown.whiteListTag('table', 'border', '*');
         Discourse.Markdown.whiteListTag('caption', 'class', '*');
         Discourse.Markdown.whiteListTag('thead', 'class', '*');
         Discourse.Markdown.whiteListTag('tbody', 'class', '*');
         Discourse.Markdown.whiteListTag('tfoot', 'class', '*');

         Discourse.Markdown.whiteListTag('tr', 'class', '*');
         Discourse.Markdown.whiteListTag('tr', 'align', '*');
         Discourse.Markdown.whiteListTag('tr', 'valign', '*');
         Discourse.Markdown.whiteListTag('tr', 'bgcolor', '*');

         Discourse.Markdown.whiteListTag('colgroup', 'class', '*');
         Discourse.Markdown.whiteListTag('col', 'class', '*');
         Discourse.Markdown.whiteListTag('col', 'nowrap', '*');
         Discourse.Markdown.whiteListTag('col', 'align', '*');
         Discourse.Markdown.whiteListTag('col', 'char', '*');
         Discourse.Markdown.whiteListTag('col', 'valign', '*');
         Discourse.Markdown.whiteListTag('col', 'height', '*');
         Discourse.Markdown.whiteListTag('col', 'width', '*');
         Discourse.Markdown.whiteListTag('col', 'bgcolor', '*');

         Discourse.Markdown.whiteListTag('td', 'class', '*');
         Discourse.Markdown.whiteListTag('td', 'nowrap', '*');
         Discourse.Markdown.whiteListTag('td', 'align', '*');
         Discourse.Markdown.whiteListTag('td', 'valign', '*');
         Discourse.Markdown.whiteListTag('td', 'height', '*');
         Discourse.Markdown.whiteListTag('td', 'width', '*');
         Discourse.Markdown.whiteListTag('td', 'bgcolor', '*');

         Discourse.Markdown.whiteListTag('th', 'class', '*');
         Discourse.Markdown.whiteListTag('th', 'nowrap', '*');
         Discourse.Markdown.whiteListTag('th', 'align', '*');
         Discourse.Markdown.whiteListTag('th', 'valign', '*');
         Discourse.Markdown.whiteListTag('th', 'height', '*');
         Discourse.Markdown.whiteListTag('th', 'width', '*');
         Discourse.Markdown.whiteListTag('th', 'bgcolor', '*');

This is what I expect to be passed through unmodified:

<table>
<tr><th>name</th><th>age</th></tr>
<tr><td>someone</td><td>100</td></tr>
</table>

How can I whitelist a class in a theme?
Is it possible for Users to change the font size of text in the topic they create?
Why is Discourse sometimes not loading?
Problem to open modal windows for a post and whitelistTag html
Adding HTML classes in posts doesn't appear to work
Problem to open modal windows for a post and whitelistTag html
What is the best way to get post data for a dashboard using the API?
(Sam Saffron) #2

A plugin is a better fit here instead of replace rules to a file that may be renamed later on.


(Tsu) #3

You’re right. I will consider making this a plugin — when and iff it works. Which it currently does not.

Is there anything else I have to modify?


(Sam Saffron) #4

I would be careful with some blanked whitelisting, people are going to put fa-spin there.

Have a look at the source of a trivial plugin for an example of how to create this: like say: GitHub - discourse/evolve_emoji: Custom Emoji for Evolve Forums


(Kane York) #5

Yes, @tsu, just whitelist the classes you actually need.


(Benjamin Meghnagi Rozenberg (Broz)) #6

Hi,maybe i should start a new topic, but using this kind of whitelisting seem not to be working anymore.
You can check the plugin discourse-grid that heavily relies on this features.


It is not working anymore, and i am wondering if there is a new way of whitelisting html tags.
Expecially i would like to whitelist this one:
<div id="somethinghere"></div>
@sam and @riking do you have any ideas?


(cpradio) #7

There is a new way, which you can see at
https://github.com/discourse/vbulletin-bbcode/blob/master/assets/javascripts/lib/discourse-markdown/vbulletin-bbcode.js.es6

You need to create a file in /lib/discourse-markdown/ that is similar to the one above. The filename needs to match the name you use int he opts.features["..."]


(Benjamin Meghnagi Rozenberg (Broz)) #9

Hi, first of all thank you for the answer, i checked the plugin and it is working but i am unable to replicate it.
Can you help me?

The first file plugin.rb includes the javascript asset:
register_asset "javascripts/vbulletin_bbcode.js", :server_side

The js asset vbulletin_bbcode.js what should include to let me whitelist a single div id?
For example: <div id="thisdiv"></div>
https://github.com/discourse/vbulletin-bbcode/blob/master/assets/javascripts/vbulletin_bbcode.js

The second file located in (assets > javascripts > lib > discourse-markdown) (the es6 one: vbulletin-bbcode.js.es6) what should include to make the whole plugin work?
https://github.com/discourse/vbulletin-bbcode/blob/master/assets/javascripts/lib/discourse-markdown/vbulletin-bbcode.js.es6

I only need to know the code to whitelist only a div id, and after that i think i will be able to make it work for every other tag.

Thank you very much for your support! I really appreciate it.


(cpradio) #10

Okay, so leave your plugin as is, then add the following folder structure, lib/discourse-markdown in assets/javascripts

Now you have a folder path assets/javascripts/lib/discourse-markdown

Place a file named discourse-grid.js.es6 within that folder

Its contents should contain

import { registerOption } from 'pretty-text/pretty-text';

registerOption((siteSettings, opts) => {
  opts.features['discourse-grid'] = !!siteSettings.grid_enabled;
});

export function setup(helper) {
  helper.whiteList([ 'div.grid-row',
                     'div.full',
                     'div.full centered',
                     'div.centered full',
                     'div.half',
                     'div.half centered',
                     'div.centered half',
                     'div.one-third',
                     'div.one-third centered',
                     'div.centered one-third',
                     'div.two-thirds',
                     'div.two-thirds centered',
                     'div.centered two-thirds',
                     'div.one-quarter',
                     'div.one-quarter centered',
                     'div.centered one-quarter',
                     'div.three-quarters',
                     'div.three-quarters half',
                     'div.centered three-quarters',

                     'figure.grid-row',
                     'figure.full',
                     'figure.full centered',
                     'figure.centered full',
                     'figure.half',
                     'figure.half centered',
                     'figure.centered half',
                     'figure.one-third',
                     'figure.one-third centered',
                     'figure.centered one-third',
                     'figure.two-thirds',
                     'figure.two-thirds centered',
                     'figure.centered two-thirds',
                     'figure.one-quarter',
                     'figure.one-quarter centered',
                     'figure.centered one-quarter',
                     'figure.three-quarters',
                     'figure.three-quarters half',
                     'figure.centered three-quarters' ]);
}

@eviltrout, am I right in noticing that the new whiteList process doesn’t permit you to apply a regular expression? As that would have greatly simplified the above into 14 rules instead of the 36 rules that are now necessary.


(Robin Ward) #11

You are right @cpradio the new whitelister no longer supports regular expressions. The 1-2 we were using in the base code were not great examples of the feature so I didn’t think it was necessary anymore.

Your example is better, but you could have always used plain old javascript to create the whitelist array too!


(cpradio) #12

Yeah, but that excess code to generate the array would have likely been just as long. I actually sort of understand not wanting to support regex in the whitelister though, so if this is the most pertinent example to date, I’m okay, with still not supporting it (it was more curiosity about its absence than anything). :slight_smile:


(Benjamin Meghnagi Rozenberg (Broz)) #13

Maybe my question was not clear :frowning: or maybe i am asking too much, if this is the case just tell me because i don’t want to steel your time.
GitHub - BRoz/discourseoptin: OptinMonster for Discourse - UPPA this should be my plugin, i would like to know how to make it work to whitelist only a single div with an id, such as:
<div id="someid"></div>
What files should be created and what should be the content of these files to make the plugin work?
(I can try to make hypotesis but maybe my attempts would make this post only more confusional)
Thank you very much for the answers given, and i really appreciate the time you’ve spent. If you think i am asking too much (because now i am feeling this way while i am writing this post, just let me know that).
@cpradio :slight_smile:


(cpradio) #14

So in my sample, where it covered the discourse-grid to use the new whitelister, you will want to create a similar file, but for its contents instead of having that large array, you would have an entry for div#someid


(Benjamin Meghnagi Rozenberg (Broz)) #15

and for the file whitelist-tags.js that should be in the folder assets > javascripts


What should i write? Should i create it?

I think following your example that this should be the content:

(function () {
  Discourse.Markdown.whiteListTag('div', 'id', 'someid');
})();

(cpradio) #16

No, that would only be useful for older Discourse instances, so unless you need to support an old install, that file is meaningless to you.

Instead you want to focus on:

Name it something other than discourse-grid.js.es6, such as, discourse-opt-in.js.es6 (since that would likely get used by the other plugin).

Then setup its contents

import { registerOption } from 'pretty-text/pretty-text';

registerOption((siteSettings, opts) => {
  opts.features['discourse-opt-in'] = true;
});

export function setup(helper) {
  helper.whiteList([ 'div#someid' ]);
}

(Benjamin Meghnagi Rozenberg (Broz)) #17


I don’t know why but here is what i’ve done following the instructions given and it doesn’t work.
I don’t want to steal you any more time.
I have a blank plugin.rb
A config folder (that is the same folder suggested to use in the tutorial for the creation of plugins)
And the file you told me to create
Still not figuring out why it is not working :disappointed_relieved:


(cpradio) #18

Oh, wait a minute.

Try this instead

export function setup(helper) {
  helper.whiteList([ 'div[id=someid]' ]);
}

(Benjamin Meghnagi Rozenberg (Broz)) #19

Thank you very very much! It finally worked! :heart_eyes:


(Benjamin Meghnagi Rozenberg (Broz)) #20

After long time, this function stopped working, i think an update to discourse caused the issue.
Do you have any solution? What can we do to whitelist an id?


(cpradio) #21

It is indeed. I haven’t a clue why as of right now. Will investigate sometime this week.