2

The situation:

Whenever you visit this URL in Safari https://nvm.samengroen.com/plan/basic/497 and look in the console there are errors regarding XMLHttpRequest and access control checks.

The strange part is, when I have the Developer Tool open and reload the page it works fine.

Can someone clarify why it does work with Developer Tools opened. And what may be causing this issue.

Information:

This project consists of an Angular frontend (nvm.samengroen.com) and an API-Platform Symfony backend (broker-api.samengroen.com). They both are on the same wildcard SSL certificate, which I've found might be the answer, but logging in and viewing other pages which get data from the API works without any problem.

We also tried this in the .env file, without any result:

###> nelmio/cors-bundle ###
CORS_ALLOW_ORIGIN=^https?://.*?$
###< nelmio/cors-bundle ###

My findings so far:

I've been googling around for a solution but can't find a definitive answer.

https://laracasts.com/discuss/channels/laravel/cors-access-control-allow-origin-issues-on-safari-mobile-and-desktop

google tells me this would probably be because of a combination of

  • HTTP/2 capable browsers
  • multiple domain certificate (probably a wildcard cert)
  • at some point apache wants to renegotiate the TLS which is not supported in the client implementation of http/2

Safari 10.1: XMLHttpRequest with query parameters cannot load due to access control checks

Your server needs to reply to the OPTIONS http method. Not only to GET/POST/PUT/DELETE. Safari silently requests this hidden in the background. You can discover this with a MITM-attack on the connection

Edit #1

So after digging around in the server log I found the following:

AH02032: Hostname nvm.samengroen.com provided via SNI and hostname broker-api.samengroen.com provided via HTTP have no compatible SSL setup, referer: https://nvm.samengroen.com/plan/basic/497

Seems like it does have to do with SSL certificate and possibly wildcard.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Sander
  • 51
  • 1
  • 4
  • can't reproduce your error message in logged out state in firefox/chrome. (ff with blocked google tag manager) – Jakumi Jul 08 '20 at 08:23
  • No thats correct, the error only comes up in `safari`. – Sander Jul 08 '20 at 08:35
  • since your regexp for cors_allow_origin isn't restrictive at all, use `*` instead. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin states if you specify anything other than `*`, you may have to add more headers. also have you checked with manually tailored `OPTIONS` requests to see what headers are returned? – Jakumi Jul 08 '20 at 08:47
  • Yeah we had `*` before but that didn't work. I feel stupid to ask, but how can you do a manually `OPTIONS` request? – Sander Jul 08 '20 at 09:43
  • you could use [curl](https://gist.github.com/exAspArk/07bbbafa2a9171b6c260989780cc0955) for that, though the linked script should be modified a lot, some more resources: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests usually the preflight-requests fail (and might not even show up in the network console) – Jakumi Jul 08 '20 at 12:08
  • what are your configurations of nelmio ? – Vipulw Jul 08 '20 at 14:55
  • Edit: In the error log it states it has something to do with the SSL after all. – Sander Jul 10 '20 at 06:26

1 Answers1

0

Please add this configuration in your nelmio_cors.yaml in config.

nelmio_cors:
defaults:
    origin_regex: true
    allow_origin: ['*']
    allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
    allow_headers: ['Content-Type']
    expose_headers: ['Link']
    max_age: 3600
paths:
    '^/api/':
        allow_origin: ['*']
        allow_headers: ['*']
        allow_methods: ['OPTIONS','POST', 'PUT', 'GET', 'DELETE', 'PATCH']
        max_age: 3600

Here we are allowing OPTIONS request as well.

Note: I am assuming you have all your api's at a prefix of /api/ for all routes

Vipulw
  • 1,253
  • 5
  • 12
  • The only difference in our config is the paths allow_headers is set to `['Authorization', 'X-Requested-With', 'Content-Type', 'Accept', 'Origin', 'X-Custom-Auth']` instead of `*`. I can give that a go. – Sander Jul 09 '20 at 07:07