Consent manager violates Content Security Policy (CSP) for inline style attributes

[falric]

HTML Code of Page

• Utbildningswebben | KTH (page in Swedish)

Steps to reproduce

1. Go to Utbildningswebben | KTH (page in Swedish).
2. Click on ”Hantera valbara tjänster” in the consent popup, and then the button labelled ”Tillåt bara nödvändiga tjänster”.
3. The console will show two Content Security Policy related errors because they violate the directive "style-src 'unsafe-inline'.

Current behavior

// src/consent-manager.js:276 – 278

for(const attribute of element.attributes){
  newElement.setAttribute(attribute.name, attribute.value)
}

This violates Inline Styles are Blocked by Default with Content Security Policy when it’s a style attribute.

// Example from console

core-696adb97340d2fb5a6694a8f825d2e46.js:124 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' 'sha256-4emHrfwqihD0j8b5dJ1zZa2HpMdUC3+q8A4HCqbwrnA=' 'sha256-Sp4EUSFRvhs0b9IYe4K/fqvcIIe8HIHmGYlCJ5ezlEA=' 'sha256-GXGKPVBqgmz+7KIoHziIsUyoHjU8dEKl9E1pUnZLHJw=' 'sha256-G1e3GasPFUwqb22BZZoi8rlReu+VYa1aafJwnMiYwqw=' https://app.kth.se 'sha256-gQlkMpqJ+ArS6o/w5Jj5NSLwbMv9oaLAVqzj8UkhS40=' 'sha256-n4AZlZl5L880PjHav2GfDzVRNB37PsTt7LMgt9K3fwc=' 'sha256-tnqatmH1wphllOc6438sCE/RJt+kpE1rL7+HEcnevyU=' 'sha256-kxYno7Bi4XZBMxV7o8cneA7a4X/qK4f/nP9mb5AeduI=' 'sha256-VopYp0i6l2mkyy4EjYL2JLKJzlUY2fQddYw1mYrobC8=' 'sha256-oXCNmiLxgtmdJ7Iik/oWGQlqwBKgFCGSM3KfqUVW9TM='". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

Expected behavior

No violation of Content Security Policy directive.

Suggested solution

// src/consent-manager.js

for(const attribute of element.attributes){
  if (attribute.name === 'style') {
    const [styleProperty, styleValue] = attribute.value.split(':')
    newElement.style[styleProperty.trim()] = styleValue.trim()
  } else {
    newElement.setAttribute(attribute.name, attribute.value)
  }
}