iframe to 3rd party web server

[bkautzman]

Hello,

I am attempting to display information from a 3rd party webserver via an iframe in my WebIQ project(2.15.7). I believe I need to set some HTTP headers to allow for the connection to the external web server. WebIQ feature 3476 from the 2.13.0 release states the CORS headers can now be configured for the WebIQ server. How do I configure these?

[webiq-sk · Accepted solution]

This is actually not a question about WebIQ, but about web technology in general, because WebIQ doesn't embed any websites, it just tells the browser where to load a document from through the URL - the browser then loads the URL. Opening the browser's developer tools usually by pressing F12 will also tell you exactly where the problem is:

Also, you are confusing source and target here: the feature you mention is about allowing embedding of a WebIQ HMI into another website, not vice versa. 

For security reasons the website to be embedded has to allow the embedding, because that's the way to secure the internet (as such you can configure this for WebIQ if you want to embed a WebIQ HMI in another website). You cannot embed facebook.com in an iFrame on any website, but you can embed example.com - which is because example.com allows that whereas facebook.com doesn't allow it.

Please see here for more information:

• https://www.holisticseo.digital/technical-seo/web-accessibility/http-header/x-frame-options
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options?retiredLocale=de
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src

You will find a lot of answers on this online, because it's a general web security feature affecting every website.

[bkautzman]

Hello @webiq-sk,

Thank you for the information.

You are correct, I was mixing up the target and source. However, I am working on both cases right now: embedding a WebIQ visualization inside another website and embedding another website inside WebIQ. How do I configure the feature in WebIQ that allows it to be embedded elsewhere?

[webiq-sk · Accepted solution]

You can set this per HMI in .db/project.json: 

 "http": {
        "additionalHeaders": {},
        "contentSecurityPolicy": {},
        "cors": {
            "allowHeaders": [],
            "allowPrivateNetworkAccess": false,
            "origins": []
        },
        "hideServerTokens": true,
        "preventMimeSniffing": true,
        "spoofServerTokens": null,
        "xFrameOptions": null
    },

Here is an example - this has of course to be adapted to what you want to allow - the attributes are named according to the web standard:

{
    "http": {
        "cors": {
            "origins": [
                "http://127.0.0.1:10123",
                "http://127.0.0.1:10124"
            ],
            "allowHeaders": [
            ],
            "allowPrivateNetworkAccess": false
        },
        "contentSecurityPolicy": {
            "default-src": [
                "self"
            ]
        },
        "additionalHeaders": {
        }
    },
    "version": 1
}

[webiq-sk]

xFrameOptions: according to https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

e.g. "DENY" or "SAMEORIGIN"

[bkautzman]

Do I need to manually create the '.db' directory and 'project.json' file in the project root directory? I haven't found either of these when searching the project directory.

[webiq-sk]

Every WebIQ project always contains the .db directory and a project.json, otherwise it would not work at all.

Please check the visibility setting in File Explorer. 

[bkautzman]

I was looking in my WebIQ Designer folder. I exported the project and unzipped, now I see the relevant file and directory.

Thank you for the help.