Action text trix does not render image and other html tag inside the blob partial

Question

I am migrating an app to rails 6.1.4.4 with action text and Trix rich editor. In the backend, Trix save uploaded file to active storage blob and show in the editor perfectly fine.

however when I tried to display in the front end without Trix, the uploaded image did not show as expected.

Below is my blob view

<!-- active_storage/blobs/_blob.html.erb -->
<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
    <% blog_url = blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 600, 400 ] : [ 400, 400 ]).processed.service_url %>
    <%= lazy_image(src: blog_url, alt: '', width: '400', height: '400') %>
  <% end %>

  <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
      <%= caption %>
    <% else %>
      <span class="attachment__name"><%= blob.filename %></span>
      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
    <% end %>
  </figcaption>
</figure>

I also try a few other html tags, it seems some html tags are stripped out, keeping only the tag content instead of the full semantic tags.

Do my blob rendering contents get santinized? Am I missing any configuration to get the display working without trix editor?

Answer 1

I've solved this by adding the following code in config/application.rb

    # Sanitize image in blob
    tags = ['img', 'iframe']
    config.action_view.sanitized_allowed_tags = tags

    lazy_image_attrs = ['src', 'alt', 'data-src', 'data-srcset', 'width', 'height', 'class']
    config.action_view.sanitized_allowed_attributes.push(*lazy_image_attrs)