CSP errors with inline styling

Questions
1

Hi

I am using UIElements like TextBlock and Button imported from “@babylonjs/gui” for building an info panel inside the babylon scene. I have added ‘fontSize’ as a percentage and set ‘resizeToFit’ to true to make the TextBlock responsive to page resizing.

Everything works fine when run locally but I am seeing CSP errors when running the deployed version.

I am trying to remove inline styling and move all the style definitions to a .scss file. After importing the scss file how can I apply it to the babylon components. I see a ‘getClassName’ but there is no way to set the className.

var statusMessageLbl = new TextBlock("StatusMessageLabel");
statusMessageLbl.color = "white";
statusMessageLbl.fontSize = "20%";
statusMessageLbl.resizeToFit = true;
statusMessageLbl.text = "Status message goes here";
statusMessageLbl.textWrapping = true;
alertMessagePanel.addControl(statusMessageLbl);

Thanks

2

The babylon GUI is not HTML, so CSS will not help you at all. it’s a simplified (or “DOMified” ) way of creating gui using known css definitions. Not sure the CSP is because of that. What error do you actually get?

3

I am getting a CSP error with this code

fix for this bug inadvertently causes the CSP error, reverting to the original fixes the CSP
BUG with Control._GetFontOffset when using font size as !important · Issue #9863 · BabylonJS/Babylon.js · GitHub

Please let us know how to properly set font for TextBlock without throwing CSP errors.

Thanks

4
5

I did try creating styles similar to your example

var statusMessageStyle = advancedTexture.createStyle();
statusMessageStyle.fontSize = “18%”;
statusMessageLbl.style = statusMessageStyle;

but still got CSP errors

-------------------code snippet from engine.js-----------------------
getFontOffset(font) {
const text = document.createElement(“span”);
text.innerHTML = “Hg”;
text.setAttribute(“style”, font: ${font} !important);

the setAttribute line of code in @babylonjs → core → Engines → engine.js will always fail with CSP errors.

6

@nuguru let s keep the conversation in this thread as there are duplicates making it hard to track.

7

@nuguru can you provide a repro ? as it does not look like to happen in the playground ?

8

Sounds like it could be related to this javascript - How to let script to use setAttribute 'style' without breaking CSP - Stack Overflow @nuguru could you try on your side ?

2 Likes
9

Have you checked the example I provided?
The Babylon GUI is not HTML. Hence it is styled a little differently. You can set the font type, the font style, the font size and so on. Check the example and follow the code there

Sorry - as @sebavan said - a reproduction would be great. If it is used in an external project (which I assume it is) - would you be able to share the project and the way you build it?

10

I use on a private project and I never have seen this error.
Therefore we still have to migrate to the newer version, we are still using the latest 4 version.