Can't embed images from Omero

Hello. I am trying to embed images from Omero to my website but it seems that the images from the viewer of Omero are failing to be displayed in an iFrame. This is the error in my browser console:

Refused to display <omero-image> in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

It seems that the allow-from option is already obsolete but I am still trying to make it work on Firefox. I have also tried removing the X-Frame-Options header according to this issue CORS white listing. Do I need to set-up CORS first? And are there any other possible solution to this issue?

Hi. Could you please show us your full configuration , for OMERO.web run omero config get?

I was able to make it work in Firefox by setting the omero.web.x_frame_options to ALLOW-FROM uri. However, this option is already obsolete and only works on Firefox.

Here is the output of omero config get:

omero.web.application_server=wsgi-tcp
omero.web.apps=["omero_iviewer"]
omero.web.cors_origin_whitelist=["<website>"]
omero.web.middleware=[{"index": 1, "class": "django.middleware.common.BrokenLinkEmailsMiddleware"}, {"index": 2, "class": "django.middleware.common.CommonMiddleware"}, {"index": 3, "class": "django.contrib.sessions.middleware.SessionMiddleware"}, {"index": 4, "class": "django.middleware.csrf.CsrfViewMiddleware"}, {"index": 5, "class": "django.contrib.messages.middleware.MessageMiddleware"}]
omero.web.open_with=[["Image viewer", "webgateway", {"supported_objects": ["image"], "script_url": "webclient/javascript/ome.openwith_viewer.js"}], ["omero_iviewer", "omero_iviewer_index", {"supported_objects": ["images", "dataset", "well"], "script_url": "omero_iviewer/openwith.js", "label": "OMERO.iviewer"}]]

In my testing I find that removing of the django.middleware.clickjacking.XFrameOptionsMiddleware middleware does allow me to view webclient pages in Firefox, Safari and Chrome. And I don’t see the
X-Frame-Options: SAMEORIGIN in the Header in my developer tools.
This doesn’t require CORS configuration.

Can you restart your omero web server and confirm whether you’re seeing X-Frame-Options: SAMEORIGIN in your header?
e.g. in Chome, without the middleware removed, I see it under the dev-tools Network tab like:

Regards,

Will

so you are using Chrome or other browser? just wondering as i need to find some answers for my own project. thanks

I am using Chrome in that screenshot to show how to check the header for X-Frame-Options: SAMEORIGIN.

But the cross-origin iframe works in Firefox, Safari and Chrome if you remove the django.middleware.clickjacking.XFrameOptionsMiddleware.

# before...
$ omero config get omero.web.middleware
[{"index": 1, "class": "django.middleware.common.BrokenLinkEmailsMiddleware"}, {"index": 2, "class": "django.middleware.common.CommonMiddleware"}, {"index": 3, "class": "django.contrib.sessions.middleware.SessionMiddleware"}, {"index": 4, "class": "django.middleware.csrf.CsrfViewMiddleware"}, {"index": 5, "class": "django.contrib.messages.middleware.MessageMiddleware"}, {"index": 6, "class": "django.middleware.clickjacking.XFrameOptionsMiddleware"}]

# remove...
omero config remove omero.web.middleware '{"index": 6, "class": "django.middleware.clickjacking.XFrameOptionsMiddleware"}'

# after
omero config get omero.web.middleware
[{"index": 1, "class": "django.middleware.common.BrokenLinkEmailsMiddleware"}, {"index": 2, "class": "django.middleware.common.CommonMiddleware"}, {"index": 3, "class": "django.contrib.sessions.middleware.SessionMiddleware"}, {"index": 4, "class": "django.middleware.csrf.CsrfViewMiddleware"}, {"index": 5, "class": "django.contrib.messages.middleware.MessageMiddleware"}]

That allows cross-origin iframe in Safari, Chrome and Firefox. But you should check that you are happy with the security implications of removing that middleware. https://docs.djangoproject.com/en/1.11/ref/clickjacking/

Will.

thanks a lot, i really appreciate it. i’m used to firefox but if you think that Chrome is better i may start getting used to it too. do you use Chrome for some specific reasons? thanks.

I don’t think there’s much to choose between Chrome and Firefox. They both have broadly similar development tools. You can certainly inspect Network requests in a very similar way in Firefox.

Will.