My webserver requires that an authentication cookie be present before serving any file, including .js files.
Since updating one of my sites to offer es2015 modules in a <script type="module">
tag, the authentication cookie is not sent with the request for that file by Safari. It works as expected in Chrome.
Is there a behavior in Safari that is blocking cookies on js module requests? I can rollback to not supporting modules to restore service but then loose the module benefits for browsers which support them.
<script src="module.js" type="module"></script>
<script src="legacy.js" nomodule></script>
---
<script src="legacy.js"></script>
First party cookies are set in the headers of the server's response for the page requesting the js files. When the first two script tags are present, Safari requests module.js not legacy.js, as expected, but does not include any cookies with that request. If the third script tag is used instead, Safari requests legacy.js, including the cookies with that request.
Is there a way to get Safari to send cookies with the module request? Is there risk that other browsers will adopt Safari's behavior? Does the ECMAScript 6 specification prescribe the behavior here one way or another?
You can change options in Safari preferences so that Safari always accepts or always blocks cookies and website data. In the Safari app on your Mac, choose Safari > Preferences, click Privacy, then do any of the following: Prevent trackers from using cookies and website data to track you: Select “Prevent cross-site tracking.”
Always block cookies: Select “Block all cookies.” Websites, third parties, and advertisers can’t store cookies and other data on your Mac. This may prevent some websites from working properly. Always allow cookies: Deselect “Block all cookies.”
Your macOS system files (i.e. caches) may have become corrupted. So, boot into Safe Mode for 30 seconds, then try this once more. Safe Mode fixes many corrupt files. Boot Up: into Safe Mode [hold down: shift key upon boot. Looking around this safari forum, lots of people having similar issue here. Guessing it is a bug.
Module scripts and their dependencies are fetched with CORS. This means that any cross-origin module scripts must be served with the proper headers, such as Access-Control-Allow-Origin: *. Of course, this is not true for classic scripts.
An option that seems to work for the time being is to add the type module attribute on your script
<script src="[...].js" type="module" crossorigin="use-credentials"></script>
By default (that is, when the attribute is not specified), CORS is not used at all. The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication, unless it is in the same origin.
The use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin. https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With