iFrame Not Displaying Content

JMacIV · February 4, 2018, 9:20pm

Hey all,

I am trying to set up HABPanel and would love to load an external webpages on my panel in addition to my OpenHAB. I know that there is the “frame” widget, which should display a webpage in an iframe. This should be perfect. However, whenever I test this with any website, it does not load anything. For example, some sites I tried - https://apple.com/ , https://w3schools.com/ and https://google.com/ - and it will not load anything. It is just the standard looking widget box.

Am I missing something? I feel it should be fairly straight forward? However, it is not functioning for me.

I am running openHAB 2.3.0 Build #1204 and have tested this in Chrome (Win10) and Safari (iOS).

Thanks,
JMac

ysc · February 5, 2018, 10:38am

It depends on the site, a lot of them will set an option to tell the browser they refuse to be displayed in an iframe.
You can open the developer tools console and see the message:

Refused to display 'https://www.apple.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

There isn’t much you can do about that.

JMacIV · February 5, 2018, 11:19pm

Oh wow. Didn’t realize that was what was going on. Gotcha.

I will definitely be more cognizant of that in the future. I feel like that note is something that could be added to the “frame” section of the HABPanel configuration doc page for others in the future, so they can avoid this same post. Here: https://docs.openhab.org/configuration/habpanel.html

I was going to have it display some content from a google apps script page on HABPanel and use it as a sort of dashboard + home control. However, guess I will attempt to go about it differently if I want to still pull that off. HABPanel frame would not load that page, so that is when I went to try a more common page like stated earlier. I just tried my google apps script page and it showed the ‘sameorigin’ as well.

Appreciate your explanation, ysc!

Toneus · February 8, 2018, 4:40am

Were there some changes to iframes in the latest Nighty or two? My Waze Live Map iframe is not loading today.

I do get the Waze Blue Frame, just no map.

Invalid 'X-Frame-Options' header encountered when loading 'https://embed.waze.com/en/iframe?zoom=13&lat=33.97169&lon=-84.25432': 'ALLOW ALL' is not a recognized directive. The header will be ignored.
language_selector.js:6 Uncaught TypeError: Cannot read property 'querySelector' of null
    at new e.default (https://web-assets.waze.com/website/assets/packs/new_application-5b97c402b1142337aeb9.js:1:6357)
    at Object.<anonymous> (https://web-assets.waze.com/website/assets/packs/new_application-5b97c402b1142337aeb9.js:1:6995)
    at l (https://web-assets.waze.com/website/assets/vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2:18422)
    at Object.fireWith [as resolveWith] (https://web-assets.waze.com/website/assets/vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2:19186)
    at Object.r.(anonymous function) [as resolve] (https://web-assets.waze.com/website/assets/vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2:20175)
    at Object.<anonymous> (https://web-assets.waze.com/website/assets/application-0a66be5dfc2e35dd442009ebba2135923e2a6802868cd80d185a71c4d2fefd87.js:6:10248)
    at l (https://web-assets.waze.com/website/assets/vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2:18422)
    at Object.fireWith [as resolveWith] (https://web-assets.waze.com/website/assets/vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2:19186)
    at i (https://web-assets.waze.com/website/assets/vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:3:30061)
    at XMLHttpRequest.n (https://web-assets.waze.com/website/assets/vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4:3599)
e.default @ language_selector.js:6
(anonymous) @ new_application.js:10
l @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
fireWith @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
r.(anonymous function) @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
(anonymous) @ application-0a66be5dfc2e35dd442009ebba2135923e2a6802868cd80d185a71c4d2fefd87.js:6
l @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
fireWith @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
i @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:3
n @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
XMLHttpRequest.send (async)
send @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
ajax @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:3
ft.(anonymous function) @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
W.Location.getFromIP @ application-0a66be5dfc2e35dd442009ebba2135923e2a6802868cd80d185a71c4d2fefd87.js:6
W.Location.getCurrent @ application-0a66be5dfc2e35dd442009ebba2135923e2a6802868cd80d185a71c4d2fefd87.js:6
(anonymous) @ new_application.js:7
n @ bootstrap 50c9b9916521db7dab50:19
(anonymous) @ bootstrap 50c9b9916521db7dab50:62
(anonymous) @ bootstrap 50c9b9916521db7dab50:62
3index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6 Uncaught TypeError: Cannot read property 'getNorthEast' of null
    at I.n.getBBOX (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6)
    at I.n.update (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6)
    at h (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4)
    at Object.trigger (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4)
    at I.n.triggerUpdate (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35)
    at i (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:1)
getBBOX @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6
update @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6
h @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
trigger @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
triggerUpdate @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35
i @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:1
setInterval (async)
startTimer @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35
initialize @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35
t.Model @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
I.n @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:5
initialize @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6
t.Collection @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:5
I.n @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:5
o.initialize @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:34
t.Model @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
o @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:34
o @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:34
e._createMapModel @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:38
e @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:38
(anonymous) @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:38
l @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
fireWith @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
ready @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
a @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:1
openhab.service.js:177 Updating Waze_TravelTime_SAAS state from 16.8 to 17.466666666666665
index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6 Uncaught TypeError: Cannot read property 'getNorthEast' of null
    at I.n.getBBOX (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6)
    at I.n.update (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6)
    at h (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4)
    at Object.trigger (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4)
    at I.n.triggerUpdate (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35)
    at i (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:1)
getBBOX @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6
update @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6
h @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
trigger @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
triggerUpdate @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35
i @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:1
setInterval (async)
startTimer @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35
initialize @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35
t.Model @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
I.n @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:5
initialize @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6
t.Collection @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:5
I.n @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:5
o.initialize @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:34
t.Model @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4
o @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:34
o @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:34
e._createMapModel @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:38
e @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:38
(anonymous) @ index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:38
l @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
fireWith @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
ready @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:2
a @ vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:1
openhab.service.js:177 Updating Waze_TravelTime_SJA state from 10.266666666666667 to 10.45
2index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6 Uncaught TypeError: Cannot read property 'getNorthEast' of null
    at I.n.getBBOX (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6)
    at I.n.update (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:6)
    at h (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4)
    at Object.trigger (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:4)
    at I.n.triggerUpdate (index-5918f8098df71d36136965a5d3805625106dbe2e04d0bfbc434c57f9d29b1ef6.js:35)
    at i (vendor.legacy-0b81e6853319b840a6f229997f1b41593d46a32d22b8f4d76c36b32ee0a79c47.js:1)

Toneus · February 8, 2018, 12:30pm

I updated last night, still didn’t display. This morning the Live Map is displaying fine. Must of been a Waze Service issue.

Cheers!