lato_cms 3.3.4 → 3.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a35de5b4390aeb2fa2124719502e44c93735facfaa0170dc135224597f0360d
-  data.tar.gz: 14130de771f74326f7860890a4e1613435650dc1dbd1c74dd9ba63780b6bcfbc
+  metadata.gz: 063d286f745ed3fb368105241f2b9cc7f753e153620c63bb9020fea5946a7fad
+  data.tar.gz: 8e29ca9e75f3a2e1644facb4e534c21f0fe821c7ddcd72d2bb9bc4a0eb4a8921
 SHA512:
-  metadata.gz: 4d4bf488370c709556ae1ad3b7e5523ae6058574192fb2aee81d34f2e64c68de74f6ac96e662ec851f3bcad0119b233b3876bcca3d2bb218e447b6a9690ad910
-  data.tar.gz: 792918eefe3aa9d8c5019c3db64bc5d2c204efe8637781275193ed27dcfd76624f72f5405cb3324385538355b7f3f9a6f392c9dbd1c248cdd83c1aaf5173e4aa
+  metadata.gz: a94293a1a09313278619701879933a56c2312ac39984a529e5c1b057f3d1bbb3ba0e24e62b23bd4cdd71366c0c25ef305d98c95da57b416b5033fe120773ae7d
+  data.tar.gz: 822724a30d867951066e212a052535899e0f88b9b073667c0b0b8def5f996c86bfccd9c10f28ee6005b1f6747fbd68f713b3bdcc36d2950e4e6ce81563e7f1cb

data/README.md

@@ -3,6 +3,8 @@
 Manage application content on Lato projects.
 
 ## Installation
+
+Requires Rails 8.1.3.1 or newer in the 8.1 series and Lato 3.25.0 or newer. Existing applications must install the new Lato session migration before deployment; previous sessions are invalidated.
 Add required dependencies to your application's Gemfile:
 
 ```ruby
@@ -43,6 +45,12 @@ import "lato_cms/application";
 // ....
 ```
 
+## Content security
+
+Rich text fields preserve common formatting, links, and images. HTML is sanitized on save and when rendered or returned through `parsed_value` and JSON, including existing content and AI translations. Scripts, event handlers, unsafe URL protocols, and unsupported elements or attributes are removed. Applications should consume `parsed_value` rather than render the raw database `value` as HTML.
+
+The read-only JSON API under `/api/pages` is public and requires no login. Its `group_id` parameter selects content; it is not an authorization token. Pages, translations, fields, and attachment URLs returned by this API must be suitable for public access. Applications with private content must restrict access to these endpoints in the host application or reverse proxy.
+
 ## Media URLs
 
 By default a media URL is an Active Storage **redirect** URL: Rails answers 302 with a

data/app/assets/javascripts/lato_cms/controllers/lato_cms_component_form_controller.js

@@ -89,8 +89,9 @@ export default class extends Controller {
 
     this.statusTarget.innerHTML = `
       <span class="d-inline-flex align-items-center gap-1 small ${color} lato-cms-component-form__status">
-        <i class="bi ${icon}"></i>${message}
+        <i class="bi ${icon}"></i>
       </span>`
+    this.statusTarget.firstElementChild.append(document.createTextNode(message))
 
     if (isSuccess) {
       this._statusTimeout = setTimeout(() => {

data/app/assets/javascripts/lato_cms/controllers/lato_cms_component_toggle_controller.js

@@ -77,7 +77,8 @@ export default class extends Controller {
     if (!this.hasStatusTarget) return
 
     const colorClass = type === 'success' ? 'text-success' : (type === 'danger' ? 'text-danger' : 'text-muted')
-    this.statusTarget.innerHTML = `<span class="small ${colorClass}">${message}</span>`
+    this.statusTarget.innerHTML = `<span class="small ${colorClass}"></span>`
+    this.statusTarget.firstElementChild.textContent = message
 
     if (type === 'success') {
       clearTimeout(this._statusTimeout)

data/app/assets/javascripts/lato_cms/controllers/lato_cms_media_field_controller.js

@@ -110,30 +110,46 @@ export default class extends Controller {
     }
 
     wrapper.innerHTML = `
-      ${this.previewMarkup(item)}
       <div class="lato-cms-media-field__overlay">
-        <span class="lato-cms-media-field__name">${item.name}</span>
+        <span class="lato-cms-media-field__name"></span>
       </div>
       <button type="button" class="lato-cms-media-field__remove" data-action="lato-cms-media-field#remove">
         <i class="bi bi-x-lg"></i>
       </button>
-      <input type="hidden" name="${this.hiddenNameValue}" value="${item.id}">`
+      <input type="hidden">`
+    wrapper.prepend(this.previewElement(item))
+    wrapper.querySelector('.lato-cms-media-field__name').textContent = item.name
+    const input = wrapper.querySelector('input')
+    input.name = this.hiddenNameValue
+    input.value = item.id
 
     this.gridTarget.insertBefore(wrapper, this.addTileTarget)
   }
 
-  previewMarkup (item) {
+  previewElement (item) {
     // Mirrors the server-rendered tile: with a poster nothing but that image is
     // fetched until the admin hits play (a freshly uploaded video has none yet,
     // its poster job runs in the background).
     if (this.kindValue === 'video') {
       const poster = item.posterUrl || ''
-      return `<video controls preload="${poster ? 'none' : 'metadata'}" poster="${poster}" class="lato-cms-media-field__player" src="${item.url}"></video>`
+      const video = document.createElement('video')
+      video.controls = true
+      video.preload = poster ? 'none' : 'metadata'
+      video.poster = poster
+      video.className = 'lato-cms-media-field__player'
+      video.src = item.url
+      return video
     }
     if (item.thumbnailUrl || item.url) {
-      return `<img src="${item.thumbnailUrl || item.url}" class="lato-cms-media-field__thumb">`
+      const image = document.createElement('img')
+      image.src = item.thumbnailUrl || item.url
+      image.className = 'lato-cms-media-field__thumb'
+      return image
     }
-    return '<div class="lato-cms-media-field__icon"><i class="bi bi-paperclip"></i></div>'
+    const icon = document.createElement('div')
+    icon.className = 'lato-cms-media-field__icon'
+    icon.innerHTML = '<i class="bi bi-paperclip"></i>'
+    return icon
   }
 
   itemTiles () {

data/app/assets/javascripts/lato_cms/controllers/lato_cms_media_picker_controller.js

@@ -63,11 +63,13 @@ export default class extends Controller {
 
     this.pending.set(item.id, item)
     this.updateSelectionUi()
-    this.uploadNoticeTarget.innerHTML = `<div class="alert alert-success">${item.name}</div>`
+    this.uploadNoticeTarget.innerHTML = '<div class="alert alert-success"></div>'
+    this.uploadNoticeTarget.firstElementChild.textContent = item.name
   }
 
   uploadFailed (event) {
-    this.uploadNoticeTarget.innerHTML = `<div class="alert alert-danger">${event.detail.message}</div>`
+    this.uploadNoticeTarget.innerHTML = '<div class="alert alert-danger"></div>'
+    this.uploadNoticeTarget.firstElementChild.textContent = event.detail.message
   }
 
   buildItemFromElement (element) {

data/app/assets/javascripts/lato_cms/controllers/lato_cms_text_field_controller.js

@@ -2,12 +2,21 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["editor", "source", "input", "toolbar", "sourceBtn"]
+  static values = { tags: String, attributes: String }
 
   #sourceMode = false
 
   connect() {
     this.editorTarget.addEventListener("input", () => this.sync())
     this.sourceTarget.addEventListener("input", () => this.syncFromSource())
+    this.editorTarget.addEventListener("paste", event => {
+      event.preventDefault()
+      const html = event.clipboardData.getData("text/html")
+      document.execCommand(html ? "insertHTML" : "insertText", false,
+        html ? this.sanitize(html) : event.clipboardData.getData("text/plain"))
+      this.sync()
+    })
+    this.editorTarget.addEventListener("drop", event => event.preventDefault())
 
     // Prevent toolbar buttons from stealing focus (preserves text selection)
     this.toolbarTarget.querySelectorAll("button").forEach(btn => {
@@ -24,11 +33,47 @@ export default class extends Controller {
   // ── Sync helpers ────────────────────────────────────────────────────────────
 
   sync() {
+    if (this.#sourceMode) return this.syncFromSource()
     this.inputTarget.value = this.editorTarget.innerHTML
   }
 
   syncFromSource() {
-    this.inputTarget.value = this.sourceTarget.value
+    this.inputTarget.value = this.sanitize(this.sourceTarget.value)
+  }
+
+  sanitize(html) {
+    // Template contents stay inert while source HTML is reduced to the server's allowlist.
+    const template = document.createElement("template")
+    template.innerHTML = html
+    const tags = new Set(this.tagsValue.split(" "))
+    const attributes = new Set(this.attributesValue.split(" "))
+    template.content.querySelectorAll("*").forEach(element => {
+      if (!tags.has(element.localName)) {
+        if (["script", "style", "iframe", "object", "embed", "svg", "math", "template"].includes(element.localName)) {
+          element.remove()
+        } else {
+          element.replaceWith(...element.childNodes)
+        }
+        return
+      }
+      Array.from(element.attributes).forEach(attribute => {
+        if (!attributes.has(attribute.name)) {
+          element.removeAttribute(attribute.name)
+        } else if (["href", "src"].includes(attribute.name)) {
+          try {
+            const url = new URL(attribute.value, document.baseURI)
+            if (!["http:", "https:", "mailto:", "tel:"].includes(url.protocol)) element.removeAttribute(attribute.name)
+          } catch {
+            element.removeAttribute(attribute.name)
+          }
+        } else if (attribute.name === "style") {
+          const alignment = element.style.textAlign
+          element.removeAttribute("style")
+          if (["left", "center", "right", "justify"].includes(alignment)) element.style.textAlign = alignment
+        }
+      })
+    })
+    return template.innerHTML
   }
 
   // ── Toggle source view ──────────────────────────────────────────────────────
@@ -45,7 +90,7 @@ export default class extends Controller {
       this.sourceBtnTarget.classList.replace("btn-outline-secondary", "btn-secondary")
     } else {
       // Apply edited source back to the editor
-      this.editorTarget.innerHTML = this.sourceTarget.value
+      this.editorTarget.innerHTML = this.sanitize(this.sourceTarget.value)
       this.sync()
       this.sourceTarget.classList.add("d-none")
       this.editorTarget.classList.remove("d-none")

data/app/assets/javascripts/lato_cms/controllers/lato_cms_upload_controller.js

@@ -68,7 +68,10 @@ export default class extends Controller {
     this.reset()
     const message = data ? Object.values(data).flat().join(', ') : ''
     this.element.dispatchEvent(new CustomEvent('lato-cms:upload-error', { bubbles: true, detail: { message } }))
-    if (this.hasNoticeTarget) this.noticeTarget.innerHTML = `<div class="alert alert-danger">${message}</div>`
+    if (this.hasNoticeTarget) {
+      this.noticeTarget.innerHTML = '<div class="alert alert-danger"></div>'
+      this.noticeTarget.firstElementChild.textContent = message
+    }
   }
 
   reset () {

data/app/models/lato_cms/page.rb

@@ -97,13 +97,13 @@ module LatoCms
       translated = self.class.parse_translated_field_values(content, targets.size)
       raise "The LLM response couldn't be parsed into #{targets.size} translated value(s)" if translated.blank?
 
-      targets.each_with_index { |field, index| field.update_column(:value, translated[index]) if translated[index].present? }
+      targets.each_with_index { |field, index| field.update!(value: translated[index]) if translated[index].present? }
     end
 
     def self.translate_fields_prompt(fields, target_locale)
       "Translate each string in this JSON array into #{target_locale} (language code). Preserve any HTML " \
       "tags exactly as-is, translate only the visible text. Respond with a JSON array of the same length " \
-      "and in the same order, translated strings only, no markdown, no explanation.\n\n#{fields.map(&:value).to_json}"
+      "and in the same order, translated strings only, no markdown, no explanation.\n\n#{fields.map(&:parsed_value).to_json}"
     end
 
     def self.parse_translated_field_values(content, expected_count)

data/app/models/lato_cms/page_field.rb

@@ -6,6 +6,8 @@ module LatoCms
     has_many :media, through: :page_field_media, class_name: 'LatoCms::Media'
 
     ATTACHMENT_FIELD_TYPES = %w[file image video gallery].freeze
+    RICH_TEXT_TAGS = %w[a b blockquote br code div em h1 h2 h3 h4 h5 h6 hr i img li ol p pre s span strike strong u ul].freeze
+    RICH_TEXT_ATTRIBUTES = %w[href title style src alt width height].freeze
 
     # Field types that hold free-form text, used to decide what a
     # "clone & translate" (see PagesController#clone_component_fields) sends
@@ -29,6 +31,8 @@ module LatoCms
       return nil if value.blank?
 
       case field_type
+      when 'text'
+        self.class.sanitize_rich_text(value)
       when 'number'
         value.include?('.') ? value.to_f : value.to_i
       when 'boolean'
@@ -46,6 +50,10 @@ module LatoCms
       end
     end
 
+    def self.sanitize_rich_text(value)
+      String.new(ActionController::Base.helpers.sanitize(value, tags: RICH_TEXT_TAGS, attributes: RICH_TEXT_ATTRIBUTES).to_s)
+    end
+
     def field_config
       return nil if repeater_order?
 
@@ -173,6 +181,8 @@ module LatoCms
       return if value.blank?
 
       case field_type
+      when 'text'
+        self.value = self.class.sanitize_rich_text(value)
       when 'json'
         begin
           parsed = JSON.parse(value)

data/app/views/lato_cms/pages/fields/_text.html.erb

@@ -1,6 +1,6 @@
 <% label = field_config['name'] || field_id.humanize %>
 <% required = field_config['required'] == true %>
-<% current_value = page_field&.value || '' %>
+<% current_value = LatoCms::PageField.sanitize_rich_text(page_field&.value || '') %>
 <% input_name = lato_cms_field_input_name(field_id, input_name_prefix: local_assigns[:input_name_prefix]) %>
 <% input_id = lato_cms_field_dom_id(field_id, dom_id_prefix: local_assigns[:dom_id_prefix]) %>
 
@@ -8,7 +8,9 @@
   <%= label %><%= ' *' if required %>
 </label>
 
-<div data-controller="lato-cms-text-field">
+<div data-controller="lato-cms-text-field"
+     data-lato-cms-text-field-tags-value="<%= LatoCms::PageField::RICH_TEXT_TAGS.join(' ') %>"
+     data-lato-cms-text-field-attributes-value="<%= LatoCms::PageField::RICH_TEXT_ATTRIBUTES.join(' ') %>">
 
   <%# ── Toolbar ──────────────────────────────────────────────────────────── %>
   <div class="lato-cms-wysiwyg-toolbar border border-bottom-0 rounded-top bg-light px-2 py-1 d-flex flex-wrap gap-1 align-items-center"
@@ -78,5 +80,5 @@
           name="<%= input_name %>"
           id="<%= input_id %>"
          data-lato-cms-text-field-target="input"
-         value="<%= CGI.escapeHTML(current_value) %>">
+         value="<%= current_value %>">
 </div>

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.3.4"
+  VERSION = "3.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.3.4
+  version: 3.4.0
 platform: ruby
 authors:
 - Gregorio Galante
@@ -15,42 +15,48 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 7.1.1
+        version: 8.1.3.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '8.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 7.1.1
+        version: 8.1.3.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '8.2'
 - !ruby/object:Gem::Dependency
   name: lato
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.25.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.25.0
 - !ruby/object:Gem::Dependency
   name: lato_spaces
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.2.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 3.2.0
 - !ruby/object:Gem::Dependency
   name: jbuilder
   requirement: !ruby/object:Gem::Requirement