[FAQ] Inline Style-attribute rejected

[bnomei]

Question
With default setup my style attributes are rejected. how to fix this?

Answer 1
Create a custom snippet and allow unsafe inline. Not a very good idea.

Answer 2
Use CSS Object Model (CSSOM) to set style. Do this by storing at adata-attribute and apply with jQuery/Zepto.
https://stackoverflow.com/questions/24713440/banned-inline-style-csp-and-dynamic-positioning-of-html-elements/29089970#29089970

json string in data attr
NOTE: json string needs " so wrap in '.

<div id="special" data-style='{ "backgroundColor": "#8EE", "fontSize": 28 }'>...</div>

jquery/zepto
https://api.jquery.com/css/#css-properties
https://zeptojs.com/#css

var specialStyle = JSON.parse($('#special').attr('data-style'));
elem.css(specialStyle);

$('[data-style]').each(function (idx, ele) {
  let data = $(ele).attr('data-style')
  if (data !== undefined && data.length > 0) {
    let style = JSON.parse(data)
    $(ele).css(style)
  }
})

[bnomei]

or with alpine.js
x-data="{color: 'red'}" x-init="$el.style.color = color"

[Joobs]

This is the JS snippet I used:

document.addEventListener("DOMContentLoaded", () => {

  // For CSP headers we can't use inline styles, so have to do this work around
  // https://github.com/bnomei/kirby3-security-headers/issues/4
  // NOTE: json string needs " so wrap in '.
  // <div id="special" data-style='{ "backgroundColor": "#8EE", "fontSize": 28 }'>...</div>
  
  const elements = document.querySelectorAll("[data-style]");

  // Loop through the selected elements
  elements.forEach((ele) => {
    const data = ele.getAttribute("data-style");

    if (data !== null && data.length > 0) {
      const style = JSON.parse(data);

      // Apply the inline styles to the element
      for (const prop in style) {
        if (Object.hasOwnProperty.call(style, prop)) {
          ele.style[prop] = style[prop];
        }
      }
    }
  });