ruby-on-rails-6rails-activestoragetrixactiontext

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


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.

enter image description here

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

enter image description here

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?


Solution

  • 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)