Setting Content-Security-Policy for

Bugs
1

I ran up again some problems with setting a Content-Security policy for my site with some of the Babylon tools.

if you set content-security to allow scripts from preview.babylon.com, the main babylon javascript is fine. However, there seems to be a problem with inline styles.

Here is my Content-Security Policy:

CSP Default: "default-src 'self'; ",

CSP Font: "font-src 'self' https://fonts.gstatic.com; ",

CSPImage: "img-src 'self' https://images.unsplash.com; ",

CSPScript: "script-src 'self' https://preview.babylonjs.com https://cdnjs.cloudflare.com; ",

CSPStyle: "style-src 'self' 'https: unsafe-inline' https://fonts.googleapis.com https://preview.babylonjs.com https://cdnjs.cloudflare.com; ",

CSPFrame: "frame-src 'self'; ",

CSPConnect: "connect-src 'self' https://immersive-web.github.io/webxr-input-profiles/packages/viewer/dist/profiles/profilesList.json; ",

CSPChild: "child-src 'none'; "

With this policy you get the following errors for these JS files, inline CSS styles.

babylon.inspector.Bundle.js
babylon.nodeEditor.js

babylon.nodeEditor.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’ ‘https: unsafe-inline’ https://fonts.googleapis.com https://preview.babylonjs.com https://cdnjs.cloudflare.com https://me.kis.v2.scr.kaspersky-labs.com wss://me.kis.v2.scr.kaspersky-labs.com”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-LEMQFMag6nAOSGRcnBfcnF923MUY+d8a9Rs4ZIbPe7M=’), or a nonce (‘nonce-…’) is required to enable inline

2

I have no idea how this works :smiley:

inspector and nodeEditor are webpack based and are doing css injection but I don’t know what to do beside that

3

Yes, it’s a reaction to the inline scripts. If you get rid of the ‘https:’ it works.