Hi all,
We have built a low-code app, and one specific page contains some additional information. That information is pasted as custom HTML content into a web component.
In order to make streamline look & feel, we'd like to use the same CSS file as DataMiner is using across all low-code apps. Is there a way to refer to the DataMiner CSS file?
We tried making a ref from the custom HTML, but unsure if that file is actually easily accessible from within the custom HTML. Next, we did also take the content of the CSS file and added that into the custom HTML. That seems to work fine when just showing the HTML stand-alone in a browser, but when adding that into the web component of a low-code app, the layout seems to be broken.
Any thoughts?
Thanks!
The input of the Web component does indeed get sanitized, however, internal css through <style> tags is not considered unsafe. It does get stripped though when the first element of the html is the style tag. I would consider this an issue.
You can workaround this issue for now by placing your <style>...</style> anywhere else but the first element in the html.
Next to the internal css, inline css will also work, and might be less prone to surprises: The entire <style> tag will get stripped if it contains one potential risk (eg a background-image), so you lose the style of everything in that case. When using inline css, you'll lose only the style on one specific element when it would contain styles that are considered unsafe.
But I would not advise against the use of internal css, as it's way more easy to maintain/adjust.
Hi Leander,
Have you tried adding inline CSS, if you cannot use a reference to a file?
Kind Regards,
Jarno
Hey Jarno, good tip indeed. Adding a file references or hard-coded layout into the tags seems to get sanitized, but inline css is working fine. So, ended up assigning the css through the style attribute.
Hi Leander,
The content of web components is sanitized to prevent the injection of dangerous javascript (cross site scripting). Inline CSS will be sanitized as well because this can potentially be malicous as well. So, some parts of the inline CSS will be removed which is probably the reason the layout seems to be broken.
I quickly tested if it is possible to reference the CSS file, but it seems like the 'link' tag get sanitized away as well, to prevent from potential malicious CSS.
Kind regards,
Hey Gilles, thanks for the update. That does make sense. Security is kept high in all cases by removing any potential malicious information, but internal css can indeed be used. Just not (yet) when it is the first element. Thanks!