CSP: Allow embedding any source

[florian-h05]

Regression from #2714.

This updates Main UI‘s CSP to allow embedding any source.

Fixes issues reported on the community, see
https://community.openhab.org/t/openhab-4-3-milestone-discussion/158139/6 and https://community.openhab.org/t/openhab-4-3-milestone-discussion/158139/7.

[relativeci]

#2231 Bundle Size — 10.83MiB (~+0.01%).

f1100f4(current) vs ee27cec main#2229(baseline)

Warning

Bundle contains 2 duplicate packages – View duplicate packages

Bundle metrics   1 change

	Current #2231	Baseline #2229
Initial JS	1.89MiB	1.89MiB
Initial CSS	576.5KiB	576.5KiB
Cache Invalidation	0.01%	0%
Chunks	226	226
Assets	249	249
Modules	2914	2914
Duplicate Modules	149	149
Duplicate Code	1.8%	1.8%
Packages	96	96
Duplicate Packages	2	2

Bundle size by type   1 change 1 regression

	Current #2231	Baseline #2229
JS	9.05MiB	9.05MiB
CSS	862.92KiB	862.92KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.36KiB (+0.94%)	1.35KiB
Other	871B	871B

Bundle analysis report Branch csp-frame-src Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[florian-h05]

@ghys FYI. I don‘t see a problem with embedding any source, so I will merge this to fix that CSP regression.

[webster1501]

Hi Florian, I'm running on 4.3.1 and I realize that this commit has made it to this latest milestone release.

However, unfortunately with no effect, at least on my side

I'm still faced with this error message (although the same URL works as an embedded iframe in other html-sides):
Refused to frame '' because it violates the following Content Security Policy directive: "frame-src ". Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'typeerror:' must be added explicitly.

Thx so much !

[digitaldan]

The scheme 'typeerror:' must be added explicitly.

That sounds like the URL is not being processed correctly, likely an issue with your MainUI configuration. Would be helpful to post the yaml of the widget/page you are trying to configure.

[webster1501]

The scheme 'typeerror:' must be added explicitly.

Thx so much for the swift reply.

I'm using the standard 'Grafana chart with time ranges' widget from Bob Miles.
The Grafana instance has the correct settings for allowing to embed dashboards.

Not sure where to add the typeerror scheme ?

YAML:

uid: Grafana_chart_with_timeranges
tags: []
props:
  parameters:
    - description: Title of the chart
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Footer of the chart
      label: Footer
      name: footer
      required: false
      type: TEXT
    - description: URL to show in the frame
      label: Source URL
      name: URL
      required: true
      type: TEXT
    - description: Comma-separated list of options. Use value=label format (e.g. 1d=1
        day) to provide a label different than the option. Minimum 1 entry
        required. The first entry is the default timerange.
      label: Time range options
      name: timerange
      required: true
      type: TEXT
    - description: Height of the Frame (empty = default)
      label: Height
      name: height
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 3, 2025, 8:25:43 PM
component: f7-card-content
config:
  URL: http://192.168.188.80:3002/d/ae8k46bpco54wb/heizung-rt?orgId=1&from=2024-12-31T11:08:55.132Z&to=2024-12-31T11:08:55.133Z&timezone=browser&refresh=5s
  timerange: from=now-6h&to=now;6h,from=now-12h&to=now;12h,from=now-1d&to=now;24h,from=now/d&to=now/d;Tag,from=now-1d/d&to=now-1d/d;Tag-1,from=now-2d/d&to=now-2d/d;Tag-2
  style:
    --f7-card-margin-horizontal: 0px
    --f7-card-margin-vertical: 3px
    --f7-card-content-padding-horizontal: 10px
    --f7-card-content-padding-vertical: 10px
slots:
  default:
    - component: oh-webframe-card
      config:
        title: =props.title
        borders: false
        noBorder: false
        outline: true
        height: =props.height
        src: =props.URL.replace('{period}', vars.selectedPeriod ||
          [props.timerange.split(',')[0].split('=')[0]])
        footer: =props.footer
        class:
          - display-block
    - component: f7-segmented
      config:
        round: false
        outline: false
        style:
          --f7-button-bg-color: rgba(255, 255, 255, 0.05)
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: range
              for: size
              fragment: true
            slots:
              default:
                - component: oh-repeater
                  config:
                    fragment: true
                    for: period
                    in: =[props.timerange.split(",")[loop.size].split("=")[1]]
                  slots:
                    default:
                      - component: oh-button
                        config:
                          text: =loop.period
                          fill: "=(([props.timerange.split(',')[loop.size].split('=')[0]] ==
                            vars.selectedPeriod) ||
                            (props.timerange.split(',')[0].split('=')[1] ===
                            loop.period) && !vars.selectedPeriod) ? true :
                            false"
                          round: false
                          outline: true
                          style:
                            --f7-button-font-size: 14px
                            --f7-button-font-weight: 300
                            --f7-button-text-transform: none
                            --f7-button-border-width: 1px
                            --f7-button-text-color: white
                            --f7-button-border-color: rgba(255,255,255,.15)
                            --f7-button-padding-vertical: 0px
                            --f7-button-padding-horizontal: 0px
                            --f7-button-fill-hover-bg-color: rgba(var(--f7-theme-color-rgb), 1)
                          action: variable
                          actionVariable: selectedPeriod
                          actionVariableValue: =props.timerange.split(",")[loop.size].split("=")[0]

[digitaldan]

I added code fences to your yaml ( ``` code ```) to make it easier to read.

Its likely this is throwing an error:

src: =props.URL.replace('{period}', vars.selectedPeriod ||
          [props.timerange.split(',')[0].split('=')[0]])

Not sure where to add the typeerror scheme ?

Thats not a scheme to add, thats part of the error string being returned likely from that replace logic ☝️ , a scheme is the first part of a URL , like http or wss , what that error is saying is the string begins with typeerror:.... which is an error message thrown by javascript, not an actual URL, and it of course does not know how to handle that.

[webster1501]

Got it, Dan! Very helpful hint on where the typeerror comes from.
I'll try to fix the logic, and post an update here once I succeeded.

Once again: Thx!!