Uibrouter.iife.min.js Unable to load Grafana Graph (same IP, different Port)

Dashboard
1

I am trying to display a couple of Grafana graphs in a UIBUILDER webpage. I can load the graphs into a Browser if I put the link into the address bar, but they won't load in the webpage. The error in the browser shows:

Framing '``http://<IP>:3001/``' violates the following Content Security Policy directive: "frame-src 'self' https:". The request has been blocked.

I think I get that as the link points to a different port, the file indicated as causing the error is uibrouter.iife.min.js, but I can't find frame-source in that file, although I can see the word strict.

I reference the uibrouter.iife.min.js file in my index.html header

<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="../uibuilder/utils/uibrouter.iife.min.js"></script>
<script defer src="./js/index.js">

It seems that in my SPA website, I also need this available for my index.js

// ----- Start of Routing ----- //

const router = new UibRouter(routerConfig)

// ---------- Setup: Centralised Message Handling for SPA ---------- //
uibuilder.onChange("msg", handleUibMsg);

The SPA Message Handling is a script @Paul-Reed kindly allowed me to use.

Commenting either of these out does not help! Nothing appears to load except the Navigation Menu text.

I have looked at the Documents and the only references I can find are to Navigation Menus, or at least, that is all I can get from reading them. They do show examples of 'external template', but I don't understand. The drugs don't help!

I think that is all of the information, so the question is... How do I get a 'remote' (same IP, different Port) link/image to appear in a UIBUILDER webpage?

As usual, I am probably missing something very basic, but I don't know how to proceed!

TIA,
Colin J

2

OK, doing some more research using AI and referencing the Docs along with a post, it seems I need to define the contentSecurityPolicy in settings.js. Indeed, an enhancement was made to enable this in V7.6.1 of UIBUILDER.

I now need to find out how to add the contentSecurityPolicysetting for UIBUILDER in settings.js

3

I can't believe this, after working on this all day, I have now managed to get it working! I have achieved more in the last hour or so than the previous seven!

Assembling data from AI, the referenced post, UIBUILDER V7 Docs, and trying a couple of times of editing settings.js, I can now see a couple of Graphs in my webpages.

So, the UIBUILDER 'script' goes into settings.js, just before the last curly bracket. If you put it after, Node-Red won't start!

// nodeDefaults: {
//     "debug": {
//         "complete": true // set the debug node to show complete msg by default
//     }
// }



uibuilder: {
contentSecurityPolicy: {
"default-src": "'self' 'unsafe-inline' data: blob: https:;",
"connect-src": "'self';",
"img-src": "'self' data: blob: https:;",
"font-src": "'self' data: https:;",
"style-src": "'self' 'unsafe-inline' data: blob: https:;",
"script-src": "'self' 'unsafe-inline' 'unsafe-eval' blob: https:;",
"frame-src": "'self' https: http://<MyIP>:3001;"
        }
    }
}

@TotallyInformation can you check this to make sure it is OK. It was suggested by my mate Claude.

Thank you to all who read this!

4

You will know if it’s wrong because something won’t work. :grin: those security settings for browsers are quite sensitive.

5

I feel that we have been here before, but with the drugs I am on, my short term memory is shot. I suppose it could be the advancing years, but who knows!!