Issue with CSS link in version 27.0.0.1

[aujunior]

We are using Oxygen Web version 25.1.0.1 and have started testing our framework on version 27.0.0.1.

We chose to download the All Platforms version since the .war version is no longer available. Additionally, we updated the framework SDK via Maven to version 27.

However, we noticed that the CSS is no longer loading correctly in this new version. We are receiving a MIME type error, even though no code changes were made. The only modifications were updating the SDK and the Web platform version.

I need assistance to restore normal functionality. Could you please help us?

Error:

image.png (75.74 KiB) Viewed 231 times

Created link:

image.png (82.02 KiB) Viewed 231 times

Code:

[aujunior]

Hello,

I noticed that something is unexpectedly altering the MIME type.

Even when sending the <link rel="stylesheet"> element with the attribute type="text/css", the system indicated that the MIME type was set to application/json.

I haven’t been able to identify the cause of this alteration yet, but I noticed that this issue does not occur when using Oxygen Web 25.

[Bogdan Dumitru]

Hello,

There was a security improvement that causes this.
You have to modify the way you load the CSS files, more precisely the "appendHeadCss" function. Instead of <link rel="stylesheet" type="text/css" href="..."> you have to create an "<script>" element and put the CSS inside. It should look somewhat like this:

Code: Select all

function loadCSSFile (fileRef) {
  fetch(fileRef)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.text();
    })
    .then(cssContent => {
      var styleTag = document.createElement('style');
      styleTag.type = 'text/css';
      if (styleTag.styleSheet) {
        styleTag.styleSheet.cssText = cssContent; // For IE
      } else {
        styleTag.appendChild(document.createTextNode(cssContent)); // For other browsers
      }
      document.head.appendChild(styleTag);
    })
    .catch(error => {
      console.error('Error loading CSS file:', error);
    });
};

[Bogdan Dumitru]

By the way, the next version of Web Author 27.1 has another security feature enabled by default, CSP Policy, and this may break loading CSS that way. So keep in mind that in the next version you may have to disable CSP Policy from the Administration page.

[aujunior]

Thank you very much, Bogdan Dumitru, for your responde!

I applied the correction you suggested, and now the CSS is loading properly. I've also noted your recommendation about CSP Policy to avoid opening future tickets.