I have a website that loads a resource from another website. I've been able to determine that:
I'm wondering if there is some kind of header or other directive I can deliver from my website that will have the same effect for my users as if they had disabled third-party cookies, but which doesn't require them to go and monkey around with their settings.
Generally, it has been impossible to prevent your browser from including cookies in your HTTP requests. However, recently, few new ways to fetch resources were added to browsers.
Using the Fetch API: fetch
ignores Set-Cookie
in responses, and does not include Cookie
unless specified.
Using ES6 (ES2015) modules: <script type="module" ...>
without its crossorigin
attribute will not send Cookie
. It doesn't work for non-module scripts, and the server (not yours, the one serving the file) must be configured to serve the file with valid CORS headers. Scripts imported with import * from blah.com/script.js
will also behave in the same way. Follow the link for more info.
crossorigin="anonymous"
: Resource elements such as script
, img
and style
with crossorigin="anonymous"
will not include Cookie
headers in subsequent requests.But these all work by using Cross-Origin Resource Sharing (CORS), and if the resource server is configured to disallow requests without credentials (cookies, and other headers), they won't work. You will likely get 404 or other errors instead.
If you are worried about third-party cookies, it's usually better to serve statics from your own server, or cookie-free servers like most CDNs.
Browsers such as Firefox and Safari disable third party cookies by default, and Chrome is the last modern browser that still allows third party cookies by default as of Jan 2020. But even Chrome is phasing out of third party cookies.
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