Rendering html combined with unsafe data with Phoenix.HTML

For this particular example, the best would be:

content_tag(:p, content_tag(:i, unsafe_data))

Alternatively you can put it in a list marking the safe parts:

content_tag(:p, [{:safe, "<i>"}, "<omg>", {:safe, "</i>"}])

You can also just use the sigil too:

content_tag(:p, ~E"<i><%= unsafe_data %></i>

Or all of it:

~E"<p><i><%= unsafe_data %></i></p>"

LiveView 0.17.5 – trying to render some unsafe data

unsafe_data = "<p><h2>This is the first post in child marriage.&nbsp;</h2><p>&nbsp;</p><ol><li>Say whatever you want here.&nbsp;</li></ol></p>"

Body: <%= unsafe_data %>

renders as

I wish it would render properly. Proper Render should be like following

image529×145 3.53 KB

None of the above approaches, works for me.

I am trying to guess your intention here. Maybe you want to sanitize the html then render it raw?

Sanitisation - that might be the first step

but importantly, seeing the html being ‘interpreted’ by the browser and not being printed in raw form as it is in above post.

Phoenix defaults to escape the html to prevent XSS attacks (what if someone embed javascript in the unsafe data?) If you have sanitize it or you have reason to believe that it is clean, just raw/1 it. See the 2 links I cited above.

I can raw/1. That must be my first step. But that does not render it properly.

Current render after raw/1 is —

Proper render is – https://forum.elixirforum.com/uploads/default/original/3X/f/a/fa61819915cc5477f65f3e4a5d70a5b49033ddf7.png

How do I render it properly after raw/1?

Without seeing your code I cannot guess what went wrong.

show.html.heex

<h1>Show Post</h1>

<%= if @live_action in [:edit] do %>
  <%= live_modal Lms01Web.PostLive.FormComponent,
    id: @post.id,
    title: @page_title,
    action: @live_action,
    post: @post,
    return_to: Routes.post_show_path(@socket, :show, @post) %>
<% end %>

<ul>
  <li>
    <strong>Title:</strong>
    <%= @post.title %>
  </li>
 

 <%# THIS LINE IS THE PROBLEM %>
 
  <li phx-hook="PostList" data-post={"postbody-#{@post.id}"}>
    <strong>Body:</strong>
    <%= @post.body %>
  </li>

  <li>
    <strong>Published:</strong>
    <%= @post.published %>
  </li>

  <li>
    <strong>Author:</strong>
    <%= @post.author %>
  </li>

  <li>
    <strong>Keywords:</strong>
    <%= @post.keywords %>
  </li>

</ul>

<span><%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @post), class: "button" %></span> |
<span><%= live_redirect "Back", to: Routes.post_index_path(@socket, :index) %></span>

@post.body renders the html raw.

How do I get liveview to interpret html and make headings as they should be.

this is how body looks.

image820×396 23.5 KB

Body: is not rendered properly.

<%= raw(@post.body) %>