How to inject html content inside the Elm 0.19 app

[aribao]

Hello,

we have a dashboard built in elm 0.19 (about 64k loc) and now we need to preview some html content (like email previews) and show them in the Dashboard.

We need to inject html somehow in the dashboard, but I think is not possible to alter the DOM adding external HTML code is it?

We can only think on implementing this in the backend and create links to be opened in new tabs to show the content, but it will hurt us a lot in terms of UX.

Do you know a better way to do this? Is it possible at all?

Thank you!

[Juan_Gabriel_Fraire]

The main issue with this idea is the XSS attacks. You can read more here https://github.com/elm/html/issues/172.

Also there is a gist with a proposal to workaround the feature if you still want.

[aribao]

Thanks! I’ll have a look

[pdamoc]

@aribao

Do you know a better way to do this? Is it possible at all?

The safe way to do it is to send the HTML as a string and parse that into elm/html structure using something like html-parser.

Another way to do it is using a web component like this.

[aribao]

Thanks @pdamoc, I didn’t know html-parser was available for elm 0.19.

We will evaluate the possible solutions, thanks a lot!

[jreusch]

If you are feeling brave enough, you can work around the checks in the Elm runtime by adding a react-style dangerouslySetInnerHTML attribute by monkey patching the HTMLElement class:

Print unescaped HTML

So, the official answer here is to use Web Components. Please take everything of the following with a grain of salt, since it technically breaks guarantees and security features of Elm. It might even stop working at the next patch release of elm/virtual-dom. There is a really simple but hackish way to avoid Web Components (and their polyfills and dependencies), if all you want to do is render a static HTML string from your Elm app. Elm specifically checks for the property name innerHTML to p…