401 Error in Safari iFrame

I have an iFrame in Wordpress to show a device's location from my Ubuntu/Apache2 Traccar server. I have followed all of the instructions here and in the documentation for creating a secure site using SSL. As a result, the iFrame works on all browsers (e.g., Chrome, Firefox, Edge) EXCEPT Safari. When opening the page on Safari I get a 401 error. The detailed error in the Console is:

[Error] Invalid 'X-Frame-Options' header encountered when loading '[page on Traccar server]': 'ALLOW-FROM https://[mysite]' is not a recognized directive. The header will be ignored.

I am frustrated after many hours of troubleshooting this error. Can anyone help? Thanks!

It's a pretty common issue. There are too many restrictions on iframes.

By the way, the following is already in my VirtualHost:

            Header add Access-Control-Allow-Origin "*"
            Header edit Set-Cookie ^(.*)$ $1;HttpOnly;Secure;SameSite=None

If it helps further, here is the entire file:

<VirtualHost *:80>
    ServerName mysite.com
      Redirect / https://mysite.com/
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =mysite.com
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
    Header add Access-Control-Allow-Origin "*"
    Header edit Set-Cookie ^(.*)$ $1;HttpOnly;Secure;SameSite=None

</VirtualHost>
<IfModule mod_ssl.c>
        <VirtualHost _default_:443>

                ServerName mysite.com
                ServerAdmin webmaster@localhost

                DocumentRoot /var/www/html

                ProxyPass /api/socket ws://localhost:8082/api/socket
                ProxyPassReverse /api/socket ws://localhost:8082/api/socket

                ProxyPass / http://localhost:8082/
                ProxyPassReverse / http://localhost:8082/

                Header add Access-Control-Allow-Origin "*"
                Header edit Set-Cookie ^(.*)$ $1;HttpOnly;Secure;SameSite=None


                SSLEngine on

                SSLCertificateFile /etc/letsencrypt/live/whereisaldenty.com/fullchain.pem
                SSLCertificateKeyFile /etc/letsencrypt/live/whereisaldenty.com/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
        </VirtualHost>
</IfModule>

@anton Thanks for your fast reply! Do you know of a solution or workaround since this is only in Safari?

Not really. Is there a reason you need iframe? Usually my recommendation is to avoid it.

@anton The reason I want this is for good UX. By using an iFrame I can display the map and location within the WordPress page without having to create a popup modal window or without opening the map in a separate tab or window. I am hopeful that someone here has had this issue before and can provide their solution. In the meantime, I will have to use one of the less elegant options of modal popup or new tab.

Hi @Al Denty, did you find any workaround?

@Adriano Miranda - Nope. Never found a workaround so I put a button on the site that takes people to a separate page where they can see the location. I hate the UI/UX, but I didn’t have the time or the inclination to hassle with it any further. I really hope someone finds a way to make this work.