Froala: Turn off HTML sanitization?


(Ryan Heneise) #1

I’d like to be able to use some basic javascript in my page, but the Froala editor keeps stripping out attributes like “onClick”.

For example, if I paste the following into Froala’s code view:

<a href="#" 
  onclick="Calendly.showPopupWidget('https://calendly.com/mysmallidea/30min');return false;">Start Now
</a>

… it is sanitized to this:

<a href="#">Step 1: Book Your Free Introductory Call Now</a>

Do you know any way of turning off sanitization or adding to a whitelist? I wasn’t able to find anything by searching the Froala documentation.

For now I’ve resorted to using a text field instead of wysiwyg, bit it would be nice to use the editor.


(Ryan Heneise) #2

I came up with a good workaround, which was to set up a ‘click’ event listener in external javascript, and then assign an ID to that <a> element. Still, it would be nice to have a whitelist if you know of any way to do that.


(Aaron Russell) #3

I think Froala will allow you to do this through changing the htmlAllowedAttrs config option.

You’ll need to create a javascript file in your app looking something like this:

$.FroalaEditor.DEFAULTS.htmlAllowedAttrs.push('onclick');

To get a JavaScript from your application loaded in the PushType asset pipeline, add the following to your application.rb:

config.before_initialize do
  PushType.admin_assets.javascripts << 'myjavascriptfile'
end

When doing the above, you’ll need to both restart the server AND clear the assets cache from your tmp folder.

Good luck. Let me know if that works for you.


(Ryan Heneise) #4

That worked, thanks! I was able to add the onclick attribute.

A related issue: I was also trying to whitelist the “form” tag, because it is stripping out form tags from my HTML. I tried adding “form” to htmlAllowedTags, but on closer inspection I see that “form” is already in the list of allowed tags.

$.FroalaEditor.DEFAULTS.htmlAllowedTags[35]
"form"

I thought this was a Froala bug, but pasting my form into the Froala demo does not strip out my form tag.

Any idea what I might be missing?


(Aaron Russell) #5

Unsure about that one. PushType itself doesn’t sanitize any html, so if you’re seeing that I guess it’s Froala that’s doing the sanitizing. I’ve never really tried to use forms in the WYSIWYG editor so it’s not something I’ve seen happen.

I suspect the Froala version in PushType might be a few patch versions behind the demo on their site, so it’s possible it’s a bug that is now fixed. But just guessing here really.