iOS13 fails to load js file when site is password-protected

Support
1

I’ve had a problem in one of my projects, which forced me to turn off password protection.

The site was password-protected, and the index.html contained this line:

<script src=“js/app.js” type=“module”></script>

Reproduction steps on iPhone:

  • opened the site url, the password prompt was displayed
  • typed my password, pressed enter, the homepage of my project was displayed
  • there’s an error in the console saying the download of the app.js file was “cancelled”
  • on the network tab of the web tools I can see the request for app.js got a 401 response (just headers, no body)

This issue was tested:

  • on a physical iPhone (not sure what version) – fails
  • on browserstack iPhone 11 iOS 13 – fails
  • on browserstack iPhone 11 iOS 14 – works fine

Unfortunately, I can’t set up a demo of this issue right now (and can’t share the project site). Let me know if you need me to set it up.

Is there any workaround for this issue? Has anybody had the same problem?

2

Hey @eloquentmack, can I ask if you’re using custom headers at all on your site?

4

Not at all. The only thing I did was to set a password in the site settings.

5

Hi, @eloquentmack, I believe there are sometimes issues where Safari will cache the 401 page even once the password has been entered.

Would you please test clearing the local browser cache after entering the password?

If that doesn’t resolve the issue, some people have reported a workaround by using the basic auth passwords instead of the site-wide passwords.

Would you be willing to test that as well?

If neither of those options above works and/or if there are other questions, please let us know.

6

Thanks, @luke! I’ll try to test your suggestions over the weekend. Since I use password protection for project previews, I’d like to avoid basic auth – it’s ugly and doesn’t allow to save the password in a password manager – but I’ll check it out anyway.

The strange thing is, this only happens with the JS file. Images and styles are downloaded correctly. I’ll do more testing and see if it wasn’t caused by type=“module” – I’ve seen some posts saying iOS had a problem with them.

Apart from basic auth, could you recommend any other solution that would allow me to password-protect the site? Could Functions help with that?

7

It is the module setting, for sure - just debugged this with another customer today.

You just need to not use that feature - normal links work great. This has a bit more detail (it talks about CORS but it’s a similar “safari does this wrong; everyone else does this right” kinda thing):

As to workarounds, you could use XHR type calls and make sure the cookie is set explicitly when you call them, or use Identity, but that isn’t really a drop-in replacement…