Question about OHIF and "Cross Origin Isolation Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)" and ReferenceError: SharedArrayBuffer is not defined

I tried integrating OHIF into a Docker Package and ran into an issue when I use an IP or a FQDN rather than localhost for the link to the OHIF viewer. The localhost host setup works fine for a local dev environment, but if I want to deploy it in the cloud with a FQDN that is a problem.

I have Orthanc setup without SSL and it is accessible via my localhost:8042, IP:8042 or the FQDN:8042 using http.

The viewer works with a link like:

http://localhost/ohif/viewer?StudyInstanceUIDs=StudyInstanceUID and it is apparently proxied to:

	location /ohif/ {

		proxy_pass http://ohif:80;
		rewrite /ohif(.*) $1 break;
		proxy_set_header Host $http_host;
		proxy_request_buffering off;
		proxy_max_temp_file_size 0;
		client_max_body_size 0;
	}

but not with a link like:

http://IPorFQDN/ohif/viewer?StudyInstanceUIDs=StudyInstanceUID

and there is a notice in the Viewer that says:

“Cross Origin Isolation
Cross Origin Isolation is not enabled, volume rendering will not work (e.g., MPR)”

and in the console:

“ReferenceError: SharedArrayBuffer is not defined”

The ohif-static.conf is from the repo:

# SPDX-FileCopyrightText: 2022 - 2023 Orthanc Team SRL <info@orthanc.team>
#
# SPDX-License-Identifier: CC0-1.0

# both / and /Viewer/ shall actually open index.html since Viewer/ is handled by the react router
location / {
    alias /usr/share/nginx/html/;
    index index.html;
    try_files $uri $uri/ /index.html;
    # next 3 configs are required to enable SharedArrayBuffer (https://web.dev/coop-coep/)
    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;
    add_header Cross-Origin-Resource-Policy same-origin;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
}

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /ohif-dist;
}

Is there a way to get that to work with a FQDN or IP, with or without SSL ?

1 Like

Hello @sdscotti

I raised this same issue earlier still no response either. However i read a post here.

Kindly check

Thanks. I’ll look at it when I get a chance. In the dev console (FF), network tab, it is funny because when I use localhost without any SSL it shows a ‘lock’, but when I change to the IP or FQDN the lock is broken and I get the error message that I mentioned.

I’ll have to play around with the headers or maybe try Chrome also since I was using FF.

I haven’t really had a need to use a FQDN with OHIF until recently because I usually run that on the localhost.

Hi @sdscotti

We were facing similar issues regarding the SharedArrayBuffer.
If you are running the OHIF viewer, it requires the deployed OHIF & Orthanc to run on HTTPS since the SharedArrayBuffer API is available on localhost and trusted sites only(this is why you get the Cross-Origin Isolation warning) and so, the viewer won’t allow features like MPR on HTTP.

The Nginx proxy configuration for Orthanc you are running in the OHIF seems incomplete from the OHIF’s end. To resolve that we used this configuration from the Osimis’ bitbucket repo. We had to add the CORS-magic headers and it worked.

About the CORS issue, I think we should have an option in Orthanc to allow certain domains since proxying it is an extra step.

I hope this helps!

Regards,
Yash

Thanks. I take it I need to add the CORS Magic Headers and also implement https then ? e.g. long discussion here: CORS

It would be nice if OHIF could be made to work sort of like the Stone Viewer does just out of the box.

It also takes quite awhile to compile OHIF the first build.

/sds

This setup seems to work even without the CORS magic headers but I’ll need to test further:

NGINX default.conf. It listens only on 443, but note that the proxy to ohif is still http within the container. The proxy to Orthanc is https because I configured Orthanc with SSL, which is what I want anyways.

server {

# 	listen 80;
# 	listen [::]:80;
	listen 443 ssl http2;
	listen [::]:443 ssl http2;
    ssl_certificate /sslcerts/cert.pem;
    ssl_certificate_key /sslcerts/privkey.pem;
    server_name default_server;
    location / {
        return 403;
    }
    
	location /orthanc/ {

		proxy_pass https://orthanc:8042;
		rewrite /orthanc(.*) $1 break;
		proxy_set_header Host $http_host;
		proxy_request_buffering off;
		proxy_max_temp_file_size 0;
		client_max_body_size 0;
	}

	location /ohif/ {

		proxy_pass http://ohif;
		rewrite /ohif(.*) $1 break;
		proxy_set_header Host $http_host;
		proxy_request_buffering off;
		proxy_max_temp_file_size 0;
		client_max_body_size 0;
	}

}

ohif-nginx-http.conf:

server {
	listen 80;
	listen [::]:80;
# 	listen 443 ssl http2;
# 	listen [::]:443 ssl http2;
#   ssl_certificate /sslcerts/cert.pem;
#   ssl_certificate_key /sslcerts/privkey.pem;
    server_name default_server;
	include /etc/nginx/enabled-sites/*.conf;
}

ohif-static.conf:

location / {
    alias /usr/share/nginx/html/;
    index index.html;
    try_files $uri $uri/ /index.html;
    # next 3 configs are required to enable SharedArrayBuffer (https://web.dev/coop-coep/)
    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;
    add_header Cross-Origin-Resource-Policy same-origin;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
}

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /ohif-dist;
}

orthanc.json

   // Whether or not SSL is enabled
  "SslEnabled" : true,
  // Path to the SSL certificate used by the HTTP server. The file
  // must be stored in the PEM format, and must contain both the
  // certificate and the private key. This option is only meaningful
  // if "SslEnabled" is true.
  "SslCertificate" : "/sslcerts/combined.pem",

explorer2.json, there is a difference for OHIF2 vs. OHIF3 with the URL’s to open a study directly. I actually ended up changing showStudyList: true in the app-config.js for OHIF to discover that:


            "EnableOpenInOhifViewer": false,
            "EnableOpenInOhifViewer3": true,
            "OhifViewer3PublicRoot" : "https://www.medinformatics.eu/ohif/",    
            "OhifViewerPublicRoot": "https://www.medinformatics.eu/ohif/",

Hello,

The newly released OHIF plugin for Orthanc takes care of automatically adding the HTTP headers that are required for CORS communications between OHIF and Orthanc: https://discourse.orthanc-server.org/t/new-plugin-ohif/

Best Regards,
Sébastien-

There is a dedicated page for this matter on the OHIF docs if you are interested

2 Likes