safari cookies localhost

Safari cookie is not being set – Here’s a fix self.__wrap_b=(t,n,e)=>{e=e||document.querySelector(`[data-br="${t}"]`);let a=e.parentElement,r=R=>e.style.maxWidth=R+"px";e.style.maxWidth="";let o=a.clientWidth,c=a.clientHeight,i=o/2-.25,l=o+.5,u;if(o){for(;i+1 {self.__wrap_b(0,+e.dataset.brr,e)})).observe(a):process.env.NODE_ENV==="development"&&console.warn("The browser you are using does not support the ResizeObserver API. Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information"))};self.__wrap_b(":Rid9j6:",1)

Workarounds and Solutions

Broader implications.

In today’s digital landscape, where seamless user experiences are paramount, the integrity of web cookies plays a pivotal role in maintaining user sessions and preserving user data. Codedamn, as a platform dedicated to empowering developers with knowledge and practical skills, understands the importance of smooth login workflows. However, a recurring issue has surfaced, particularly for Safari users, disrupting this seamless experience.

Introduction

Cookies, small pieces of data stored in the user’s browser, serve as essential tools for web applications to maintain session state, store user preferences, and facilitate various functionalities. They act as messengers between the client and server, carrying crucial information for the application’s operation.

Understanding Cookies

Cookies operate behind the scenes, enabling websites to remember users’ actions and preferences, thereby enhancing their browsing experience. They are integral to functionalities like persistent logins, shopping carts, and personalized content delivery.

The Secure Attribute of Cookies

One crucial aspect of cookies is the Secure attribute. When set, this attribute ensures that cookies are only transmitted over secure (HTTPS) connections, enhancing the security of sensitive information such as authentication tokens and session identifiers.

The Issue with Safari

Despite the ubiquity and importance of cookies, Safari users have encountered a persistent issue where cookies fail to set properly, disrupting login workflows and hindering access to essential features. Personally, navigating this challenge has shed light on the intricacies of browser behavior and the nuances of web development.

Safari’s Different Handling of Secure Attribute

One notable quirk in Safari’s behavior is its handling of the Secure attribute when working with localhost environments. Unlike other browsers like Chrome and Firefox, Safari imposes stricter policies, restricting the setting of cookies with the Secure attribute in local development environments.

Comparative Analysis with Other Browsers

To gain deeper insights into this issue, it’s crucial to compare Safari’s behavior with that of other popular browsers like Chrome and Firefox.

Browser Version Differences

Chrome and Firefox exhibit more lenient behavior regarding cookie setting on localhost, allowing developers greater flexibility in testing and debugging their applications. This variance in behavior becomes apparent when considering the versions from which Chrome and Firefox implemented their respective cookie handling mechanisms.

Security Implications

Cookies marked as Secure are a cornerstone of web security, instructing browsers to only send the cookie over HTTPS, thus preventing it from being transmitted over unencrypted HTTP. This behavior is critical for protecting user data from man-in-the-middle attacks. However, this security feature also introduces complexities in environments not using HTTPS, such as local development setups. Safari, in particular, enforces this standard strictly, often leading to situations where developers find their cookies are not being set during local testing.

To address the challenge of Safari not setting cookies in a local development environment, a practical solution involves removing the Secure attribute from cookies. This allows cookies to be transmitted over HTTP, facilitating local testing without requiring an HTTPS setup. It’s important to note that this approach should only be used in development environments due to the security risks associated with transmitting cookies over unencrypted connections.

Removing the Secure Attribute on Localhost

When developing locally, configuring your application to omit the Secure attribute from cookies enables Safari to accept and store these cookies. This workaround is particularly useful for local testing and should be coupled with environment-specific configuration to ensure that Secure is enforced in production environments, where HTTPS is used.

While this issue is commonly associated with Safari, it reflects a broader security measure adopted by modern browsers to enhance web security. The strict handling of Secure cookies underscores the increasing emphasis on using HTTPS across the web, even in development environments.

Safari’s Implementation and Web Development

Safari’s stringent cookie handling can be seen as part of Apple’s broader commitment to user privacy and security. This implementation choice prompts developers to adopt best practices early in the development process, including the use of HTTPS in local environments. While this can introduce additional setup complexity, it also prepares applications for the security requirements of the modern web.

Sharing is caring

Did you like what Mehul Mohan wrote? Thank them for their work by sharing it on social media.

No comment s so far

Curious about this topic? Continue your journey with these coding courses:

Ewomazino Akpareva

HTML CSS and SASS Bootcamp

• Latest Articles
• Top Articles
• Posting/Update Guidelines
• Article Help Forum

• View Unanswered Questions
• View All Questions
• View C# questions
• View C++ questions
• View Javascript questions
• View Visual Basic questions
• View Python questions
• CodeProject.AI Server
• All Message Boards...
• Running a Business
• Sales / Marketing
• Collaboration / Beta Testing
• Work Issues
• Design and Architecture
• Artificial Intelligence
• Internet of Things
• ATL / WTL / STL
• Managed C++/CLI
• Objective-C and Swift
• System Admin
• Hosting and Servers
• Linux Programming
• .NET (Core and Framework)
• Visual Basic
• Web Development
• Site Bugs / Suggestions
• Spam and Abuse Watch
• Competitions
• The Insider Newsletter
• The Daily Build Newsletter
• Newsletter archive
• CodeProject Stuff
• Most Valuable Professionals
• The Lounge  
• The CodeProject Blog
• Where I Am: Member Photos
• The Insider News
• The Weird & The Wonderful
• What is 'CodeProject'?
• General FAQ
• Ask a Question
• Bugs and Suggestions

Cross-Domain Embedding: Making Third-Party Cookies Work Again

• Download source code - 16.6 KB

Introduction

Back in February of 2020, Google began rolling out their change to how third-party cookies are handled . This move was to help stop embedded cross-domain sites, often social media sites, from tracking your movement around the web without you knowing. There were two basic changes made:

• The cookie SameSite value now defaults to Lax instead of None
• If a value of None was explicitly set, then Secure must also be set

This caused most cross-domain embedded websites to no longer be able to use cookies, even those which are not malicious, as the browser began to block them.

The good news is it’s still possible to use third-party cookies from an embedded cross-domain website inside of an iframe. The bad news is it’s more difficult now, and Safari / iOS have additional steps using experimental APIs to make this work.

This article will go through the basics of getting this scenario working using an example node.js web host. The technology stack isn’t important though – any web host and language can accomplish the same.

The Old Way

The first thing we’re going to do is create a basic example that has 2 websites on different domains, with one embedded in the other in an iframe. To do this, we’re going to take advantage of the fact that localhost is treated as a different domain from 127.0.0.1 which means we can do all of this testing on our local machine. Hurrah.

To start, install node.js on your machine and some sort of IDE if you don’t already have them. In addition to node.js, we’ll also need express , a quick and easy web host package on top of node.js. It can be installed with npm install express when run from your working project directory.

First, we’ll make app.js which is the entry point for our two websites:

In addition, we’ll create two folders in the same directory, one named www for the top-level application, and another named www2 for the embedded application. In both directories, we’ll create an index.html as follows:

www/index.html

Www2/index.html.

And lastly, we’ll create some JavaScript to try and get the cookie, in this case, put in www2/scripts/index.js :

Finally, we’re ready to run this. It can be run using the command line: node app.js .

Once running, we can browse to http://localhost:3000/ which will show us:

Notice the text that the cookie cannot be found. This means our JavaScript could not find the cookie.

This is because we’re emitting the "old style" cookie with no SameSite and no Secure values. This can be seen if the Developer Tools are opened and the Document request is inspected:

The cookie is highlighted in yellow by the browser as it is being actively rejected. So how do we fix this?

The New Way – SameSite, Secure and HTTPS

In order to make this work, we must modify the cookie we’re sending to include SameSite=None to avoid the new default of Lax :

But this isn’t enough, and if you load the page like this, you’ll see the same problem – Developer Tools will show the SameSite=None , but still reject it:

This is because we also need to set the Secure value as per Google’s second change. The Secure value indicates the cookie should only be accepted over a secure HTTPS connection.

In order to get this to work, we must move the web application to HTTPS. To get HTTPS working locally, we can use self-signed certificates (this is just for development, after all). To do that, I followed this guide which helped immensely.

The first step is to generate self-signed SSL keys, which can be done with the openssl commands:

To make this easier, I’ve included generated self-signed keys already made inside of the project which are valid for one year.

Now we can modify the cookie to include both Secure and SameSite=None :

We’ll also need to modify our app.js file to support HTTPS instead of HTTP. The completed modified file looks like this:

And we’ll need to update the URL on the iframe in www/index.html :

Running this will create two HTTPS websites instead of HTTP ones.

However, if you browse to the outer website, https://localhost:3000/ , it will show a big scary red error with the text NET::ERR_CERT_INVALID because the certificate is not trusted:

To bypass this, both the inner and outer websites ( https://localhost:3000 and https://127.0.0.1:3001 ) must be opened at the top-level (in a tab), and " thisisunsafe " must be typed. After typing this magical phrase, the website will show:

It works! We can now send a cookie from our embedded website on a different domain to the client.

But there’s still a problem with Apple …

Safari on macOS and iOS

If you open this exact same website in Safari on macOS or iOS, you’ll see the following:

That’s right, it’s back to not working. This is because Safari won’t accept third-party cookies at all even with the new SameSite and Secure values set on the cookie. To make matters more frustrating, if you open the Developer Tools and inspect the response, there’s no cookie listed (and no reason for rejection):

Fortunately, this too can be solved using Safari’s experimental storage access API . The process is outlined in this webkit article , and it can be summed up as follows:

• In the embedded site, use the experimental document.hasStorageAccess() to determine if access is available to the cookie.
• If access is not available, have a button that, when pressed, will call document.requestStorageAccess() . This method will only work from a UI event (and will consume it).
• If the request fails, then the user either denied the request or has never opened the embedded website as a first-party website (and we must help them do that).

To implement this, we’re first going to add a button to www2/index.html :

Then we’re going to modify the JavaScript in www2/index.js to use the new experimental API by adding the following:

The process is simple: first check if the experimental API exists at all (it won’t outside of Safari), and if it does check for access, and if access isn’t there, then request it when the user clicks the button by opening a new page called requeststorageaccess.html .

The last step is to create this new page, requeststorageaccess.html :

With the following JavaScript to handle the button click inside requeststorageaccess.js :

We’re going back in the history here since we know we’d be re-directed from our main page. Now if we restart node and render this in Safari, we’ll see the following:

Clicking the ‘ Request ’ button will forward the user to the new page we created on the embedded domain:

Note the URL is our embedded URL, https://127.0.0.1:3001/ . This is important and the user would normally want to know what company exists on this URL. Once they know, they would (ideally) click the button to go back to where they came from, which will once again show the same page as above.

After returning, the user must click one more time on the ‘request’ button where they’ll finally receive a prompt from Safari:

Clicking ‘ Don’t Allow ’ will reject the Promise from requestStorageAccess() and ultimately lead us back to opening a page (because we don’t know why we got a rejection), while clicking ‘ Allow ’ will execute our code to reload the page and finally work:

And the cookie will also finally show up in Safari’s Development Tools:

As a developer note, once you accept the browser prompt to ‘ Allow ’, the only way to undo it is to clear the website data from Safari -> Preferences… -> Privacy -> Manage Website Data…

If you want to re-try this process, remove the data for the embedded URL and start the process again.

While it can be quite a bit of work, it’s still possible to have third-party cookies work in an embedded cross-domain website that’s inside of an iframe.

Even with Safari’s new restrictions, it can still be accomplished through their new experimental API.

The full source to run the completed project is available attached to this article and also in my github repository . The source includes packages.json which means you can run npm install in the directory to get the required packages followed by node app.js to run the application.

• 21 st April, 2022: Initial version

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Comments and Discussions

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Why can't I set cookies on localhost

I'm trying to set cookies on Safari, at localhost:8080 and localhost:80, but neither work.

Both of them work on chrome.

Safari version 16.3.

MacBook Pro 14″, macOS 13.2

Posted on Feb 14, 2023 8:34 AM

Similar questions

• accept cookies 12.1.2 I cannot find the way to accept cookies in safari settings. I'm running on version 12.1.2 216 3
• Cookies are enabled and I still get the error that the site needs cookies Everything says that cookies are enabled, pop ups are enabled, there is no privacy and I still get the message that the site needs cookies to open. It works on other browsers but I want it to work on Safari, as other features of this site works better on safari. It used to work. 196 1
• Having to sign in in Google and accept the cookies everytime I open a new Tab in Safari Everytime I open a new Tab in safari I have to accept the cookies and do a login on google... everytime ..please help 1824 1

Loading page content

Page content loaded

Feb 14, 2023 8:54 AM in response to MrHoffman

Thanks for the reply,

Looked at some of those but not really my case.

In localhost:80 I'm using OctoberCMS (Laravel), and I don't even control the way it sets cookies, but am able to see it can't set any.

In Localhost:8080 I'm using Vue3, and VueCookieNext, and an example for a cookie set is:

Both are docker containers, but neither can set cookies in Safari, only in Chrome.

Feb 14, 2023 9:58 AM in response to MrHoffman

Still the same outcome with a valid hostname.

Kinda strange that it's only on Safari that this happens, that's why I came here and not OctoberCMS and Vue3 support.

Any other ideas?

Thank you in advance.

Feb 14, 2023 8:38 AM in response to guilhermejbranco

Does this help:

https://stackoverflow.com/questions/1134290/cookies-on-localhost-with-explicit-domain#1188145

including the comments to that reply, and the other replies.

Feb 14, 2023 9:06 AM in response to guilhermejbranco

Set a valid domain for the server, and make the whole problem go away.

Alternatively, check with the people supporting OctoberCMS and Vue3 about your particular usages.

Assumptions

The problem, the solution, proxy super powers, localhost cookies are shared, debugging cookies, set cookies on localhost.

Lately, I've had to run a React application inside an IFrame, where the parent application is Angular based and does all the authentication for me.

The Angular application after signing in a user receives a set of cookies used to authenticate the logged-in user. When I've tried to run those applications together locally in order to debug a live dev/stage/prod environment I saw that the cookies were not being saved, meaning I'm effectively "logged out".

This article is part of the series: Debugging Remote APIs Locally.

It is about all the challenges I've faced, and the solutions I've found to make sure you can run your frontend locally against any remote API.

Previous articles:

• Bypass the CORS mechanism by Using a Proxy
• Using HTTPS In Development By Creating Validated SSL Certificates

The information this article relies on is based on the previous articles of the series, where I've used a proxy to bypass CORS, and how I've set my local environment to use HTTPS during development.

This article is highly technical, if you are new to CORS or setting HTTPS, please follow the articles I've mentioned above before you continue.☝️

The following are the conditions that allowed me to set cookies on localhost:

• I have not tested a local frontend and backend that set cookies.
• You will need to send your requests through a local proxy, the code sample will be based on the previous article .
• This header allows cookies to be passed to another origin.
• You can set that using axios , and fetch has a similiar functionality.
• You can use HTTPS for local development, learn to set it up here .

Setting cookies on localhost is hard, it takes a lot of knowledge about different edge cases, and it took me a while to figure it out.

To tackle this issue I've started to search for ways that you can set cookies on your localhost domain, but sometimes Google can fail you, I've found answers ranging from its not possible to partially correct, but there weren't any home runs.

Without any solid information, I've decided to find a way to solve this myself.

As far as my tests go, I've checked that all of my projects are using HTTPS:

• My local React project is using HTTPS (This app is being served using an IFrame).
• My local Angular project is using HTTPS (Deals with authentication and serves the IFrame of the React app)
• My remote API is using HTTPS.

Course by Sagi Liba, Author of this blog

Ok, enough of the prerequisites, let's set our cookie!

I've created a new React project using create-react-app , and I've made sure to run it using HTTPS in development, you need to do the same based on the previous articles I've mentioned.

When the application is mounted I'm sending a request to our local proxy, which we are about to create on port 5050.

Notice how I've made sure to set withCredentials to true, meaning I am knowingly expecting a cookie to be set and allowing it.

Now, I'm creating a proxy that will run on port 5050, and will direct my requests to my remote API.

The code inside is the same as the code in the "Bypass CORS by Using A Proxy" article, I've only used HTTPS this time, and the proxy certificates are the same as the React project (key.pem & cert.pem for localhost).

Now the server must return a cookie, I've used AWS API Gateway to create my remote API, and created an endpoint named getCookie that will return the following cookie header:

To allow the cookies to be passed to a different origin I've set:

• SameSite=None
• Secure, it's a requirement when SameSite is none.

All that is left is to run our projects and see if it works, you need to run:

• React application that runs using HTTPS.
• A proxy that is set to your remote API, using HTTPS.
• Make sure your remote API endpoint is working and being served using HTTPS.

I've ran my React application and entered it through:

Notice the lock sign, indicating a secure connection:

The GET request for /getCookie, is fired and goes to our local proxy at:

The request is forwarded to our remote API on AWS API Gateway, and in return, we have received the cookie I've talked about earlier:

I've then checked to see that the Cookies tab shows the same cookie information again, making sure there are no errors, such as a wrong domain, I'll be talking about it soon:

Finally, I've checked to see if it was set inside our Applications tabs:

The cookie was successfully set and is being sent with subsequent requests.

Because we are using a proxy we can edit the response from the server, and actually edit the cookie headers being sent. This enables us to override any restrictions set by the server as to the Domain of the cookies, Path, SameSite, etc...

Here are a few examples of overriding the cookie's values:

(It's an addition to our proxy code)

Override the cookies as your needs require, do anything you need to make sure it works for your specific use case.

When setting a cookie on localhost it is important to understand that it is set directly on the domain "localhost", without any port specification, meaning if one of your applications has set cookies on localhost, it will also be available on other applications running there as well.

• When multiple projects set cookies on localhost, they might override one another when using the same keys for your cookies.

I've ran into a weird situation when I was trying to set the cookie, I call it "The Case Of The Missing Cookie".

I was trying to figure out if the proxy is even needed, I've done so by sending the request /getCookie to the remote API directly, without using a proxy.

The cookie's value was the same as before:

I can see that it is being sent with subsequent requests:

But the applications tab ( Devtools -> Applications -> Storage -> Cookies ) is showing that there are no cookies:

Let's just say it took me a while to find an explanation for this situation, StackOverflow is full of these kinds of situations with no valid answers, but after a while it struck me, the domain is incorrect.

So why is this happening? As we just saw, the cookie's Domain is set correctly to localhost which makes us believe everything should be working correctly, but when we check the Cookies tab we can see that the domain is different:

The only way to see a cookie in the Applications tab is to be in the correct domain it was set to (and the correct path), meaning we have to access our remote API and only then we will see our missing cookie.

Finally, I've needed to find a way to set the correct cookie domain, the only way I've found that changed this property to "localhost" was to change the frontend request URL I'm sending my cookie to:

And that's why I chose to use a proxy in here as well in order to make sure the cookie is being set to the correct domain.

• Always use the Cookies tab to debug your cookies, it will hold the correct information.
• The domain the cookie is set too is where you will need to go to find your cookies and view them in the applications tab.
• Using a proxy has multiple benefits and in this case it's crucial to set our cookies.

A Final Note:

It is possible to omit the Domain property and let the browser infer the origin by itself, you have to make sure you know how to debug the cookie (as explained above) when it won't work as expected.

This is it, it was hard to solve and hard to write about. This is the final article of the series Debug Remote APIs Locally , I hope you are now able to bypass CORS headers, run your development application using HTTPS, better understand cookies, and be able to set them on your localhost.

Cookie not being set in Safari

New Courses Coming Soon

Join the waiting lists

I was surprised when a login workflow I implemented worked in all browsers except Safari.

Turns out Safari doesn’t allow setting the secure property on a cookie on localhost.

So I had to remove this cookie property, and things worked again.

A cookie with the   Secure   attribute is only sent to the server with an encrypted request over the HTTPS protocol. It’s never sent with unsecured HTTP (except on localhost), which means   man-in-the-middle   attackers can’t access it easily. Insecure sites (with   http:   in the URL) can’t set cookies with the   Secure   attribute.

Also from MDN:

Insecure sites (http:) cannot set cookies with the Secure attribute (since Chrome 52 and Firefox 52). The https: requirements are ignored when the Secure attribute is set by localhost (since Chrome 89 and Firefox 75).

Not sure if this is how things should work and Chrome and Firefox allow this to make our life simpler, or it’s a Safari bug, but that’s how it is.

Here is how can I help you:

• COURSES where I teach everything I know
• CODING BOOTCAMP cohort course - next edition in 2025
• THE VALLEY OF CODE your web development manual
• BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
• Interesting links collection
• Follow me on X

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Using HTTP cookies

A cookie (also known as a web cookie or browser cookie) is a small piece of data a server sends to a user's web browser. The browser may store cookies, create new cookies, modify existing ones, and send them back to the same server with later requests. Cookies enable web applications to store limited amounts of data and remember state information; by default the HTTP protocol is stateless .

In this article we will explore the main uses of cookies, explain best practices for using them, and look at their privacy and security implications.

What cookies are used for

Typically, the server will use the contents of HTTP cookies to determine whether different requests come from the same browser/user and then issue a personalized or generic response as appropriate. The following describes a very simple user sign-in system:

• The user sends sign-in credentials to the server, for example via a form submission.
• If the credentials are correct, the server updates the UI to indicate that the user is signed in, and responds with a cookie containing a session ID that records their sign-in status on the browser.
• At a later time, the user moves to a different page on the same site. The browser sends the cookie containing the session ID along with the corresponding request to indicate that it still thinks the user is signed in.
• The server checks the session ID and, if it is still valid, sends the user a personalized version of the new page. If it is not valid, the session ID is deleted and the user is shown a generic version of the page (or perhaps shown an "access denied" message and asked to sign in again).

Cookies are mainly used for three purposes:

• Session management : User sign-in status, shopping cart contents, game scores, or any other user session-related details that the server needs to remember.
• Personalization : User preferences such as display language and UI theme.
• Tracking : Recording and analyzing user behavior.

Data storage

In the early days of the web when there was no other option, cookies were used for general client-side data storage purposes. Modern storage APIs are now recommended, for example the Web Storage API ( localStorage and sessionStorage ) and IndexedDB .

They are designed with storage in mind, never send data to the server, and don't come with other drawbacks of using cookies for storage:

• Browsers are generally limited to a maximum number of cookies per domain (varies by browser, generally in the hundreds), and a maximum size per cookie (usually 4KB). Storage APIs can store larger amounts of data.
• Cookies are sent with every request, so they can worsen performance (for example on slow mobile data connections), especially if you have a lot of cookies set.

Note: To see stored cookies (and other storage that a web page is using) you can use the Storage Inspector in Firefox Developer Tools, or the Application panel in Chrome Developer Tools.

Creating, removing, and updating cookies

After receiving an HTTP request, a server can send one or more Set-Cookie headers with the response, each one of which will set a separate cookie. A simple cookie is set by specifying a name-value pair like this:

The following HTTP response instructs the receiving browser to store a pair of cookies:

Note: Find out how to use the Set-Cookie header in various server-side languages/frameworks: PHP , Node.JS , Python , Ruby on Rails .

When a new request is made, the browser usually sends previously stored cookies for the current domain back to the server within a Cookie HTTP header:

Removal: defining the lifetime of a cookie

You can specify an expiration date or time period after which the cookie should be deleted and no longer sent. Depending on the attributes set within the Set-Cookie header when the cookies are created, they can be either permanent or session cookies:

Note: Expires has been available for longer than Max-Age , however Max-Age is less error-prone, and takes precedence when both are set. The rationale behind this is that when you set an Expires date and time, they're relative to the client the cookie is being set on. If the server is set to a different time, this could cause errors.

Note: If your site authenticates users, it should regenerate and resend session cookies, even ones that already exist, whenever a user authenticates. This approach helps prevent session fixation attacks , where a third-party can reuse a user's session.

There are some techniques designed to recreate cookies after they're deleted. These are known as "zombie" cookies. These techniques violate the principles of user privacy and control, may violate data privacy regulations , and could expose a website using them to legal liability.

Updating cookie values

To update a cookie via HTTP, the server can send a Set-Cookie header with the existing cookie's name and a new value. For example:

There are several reasons why you might want to do this, for example if a user has updated their preferences and the application wants to reflect the changes in client-side data (you could also do this with a client-side storage mechanism such as Web Storage ).

Updating cookies via JavaScript

In the browser, you can create new cookies via JavaScript using the Document.cookie property, or the asynchronous Cookie Store API . Note that all examples below use Document.cookie , as it is the most widely supported/established option.

You can also access existing cookies and set new values for them, provided the HttpOnly attribute isn't set on them (i.e. in the Set-Cookie header that created it):

Note that, for security purposes, you can't change cookie values by sending an updated Cookie header directly when initiating a request, i.e. via fetch() or XMLHttpRequest . Note that there are also good reasons why you shouldn't allow JavaScript to modify cookies — i.e. set HttpOnly during creation. See the Security section for more details.

When you store information in cookies, by default all cookie values are visible to, and can be changed by, the end user. You really don't want your cookies to be misused — for example accessed/modified by bad actors, or sent to domains where they shouldn't be sent. The potential consequences can range from annoying — apps not working or exhibiting strange behavior — to catastrophic. A criminal could for example steal a session ID and use it to set a cookie that makes it look like they are logged in as someone else, taking control of their bank or e-commerce account in the process.

You can secure your cookies in a variety of ways, which are reviewed in this section.

Block access to your cookies

You can ensure that cookies are sent securely and aren't accessed by unintended parties or scripts in one of two ways: with the Secure attribute and the HttpOnly attribute:

• A cookie with the Secure attribute is only sent to the server with an encrypted request over the HTTPS protocol. It's never sent with unsecured HTTP (except on localhost), which means man-in-the-middle attackers can't access it easily. Insecure sites (with http: in the URL) can't set cookies with the Secure attribute. However, don't assume that Secure prevents all access to sensitive information in cookies. For example, someone with access to the client's hard disk (or JavaScript if the HttpOnly attribute isn't set) can read and modify the information.
• A cookie with the HttpOnly attribute can't be modified by JavaScript, for example using Document.cookie ; it can only be modified when it reaches the server. Cookies that persist user sessions for example should have the HttpOnly attribute set — it would be really insecure to make them available to JavaScript. This precaution helps mitigate cross-site scripting ( XSS ) attacks.

Note: Depending on the application, you may want to use an opaque identifier that the server looks up rather than storing sensitive information directly in cookies, or investigate alternative authentication/confidentiality mechanisms such as JSON Web Tokens .

Define where cookies are sent

The Domain and Path attributes define the scope of a cookie: what URLs the cookies are sent to.

• The Domain attribute specifies which server can receive a cookie. If specified, cookies are available on the specified server and its subdomains. For example, if you set Domain=mozilla.org from mozilla.org , cookies are available on that domain and subdomains like developer.mozilla.org . http Set-Cookie : id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly; Domain=mozilla.org If the Set-Cookie header does not specify a Domain attribute, the cookies are available on the server that sets it but not on its subdomains . Therefore, specifying Domain is less restrictive than omitting it. However, it can be helpful when subdomains need to share information about a user. Note that you can't set a different domain to the one the header is set from, or one of its subdomains; see Invalid domains for more details.
• /docs/Web/HTTP

Controlling third-party cookies with SameSite

The SameSite attribute lets servers specify whether/when cookies are sent with cross-site requests — i.e. third-party cookies . Cross-site requests are requests where the site (the registrable domain) and/or the scheme (http or https) do not match the site the user is currently visiting. This includes requests sent when links are clicked on other sites to navigate to your site, and any request sent by embedded third-party content.

SameSite helps to prevent leakage of information, preserving user privacy and providing some protection against cross-site request forgery attacks. It takes three possible values: Strict , Lax , and None :

Note: Cookies that are used for sensitive information should also have a short lifetime .

• Lax is similar, except the browser also sends the cookie when the user navigates to the cookie's origin site (even if the user is coming from a different site). This is useful for cookies affecting the display of a site — for example you might have partner product information along with an affiliate link on your website. When that link is followed to the partner website, they might want to set a cookie stating that the affiliate link was followed, which displays a reward banner and provides a discount if the product is purchased. http Set-Cookie : affiliate=e4rt45dw; SameSite=Lax
• None specifies that cookies are sent on both originating and cross-site requests. This is useful if you want to send cookies along with requests made from third-party content embedded in other sites, for example, ad-tech or analytics providers. Note that if SameSite=None is set then the Secure attribute must also be set — SameSite=None requires a secure context . http Set-Cookie : widget_session=7yjgj57e4n3d; SameSite=None; Secure; HttpOnly

If no SameSite attribute is set, the cookie is treated as Lax by default.

Cookie prefixes

Because of the design of the cookie mechanism, a server can't confirm that a cookie was set from a secure origin or even tell where a cookie was originally set.

A vulnerable application on a subdomain can set a cookie with the Domain attribute, which gives access to that cookie on all other subdomains. This mechanism can be abused in a session fixation attack. See session fixation for primary mitigation methods.

As a defense-in-depth measure , however, you can use cookie prefixes to assert specific facts about the cookie. Two prefixes are available:

• __Host- : If a cookie name has this prefix, it's accepted in a Set-Cookie header only if it's also marked with the Secure attribute, was sent from a secure origin, does not include a Domain attribute, and has the Path attribute set to / . In other words, the cookie is domain-locked .
• __Secure- : If a cookie name has this prefix, it's accepted in a Set-Cookie header only if it's marked with the Secure attribute and was sent from a secure origin. This is weaker than the __Host- prefix.

The browser will reject cookies with these prefixes that don't comply with their restrictions. This ensures that subdomain-created cookies with prefixes are either confined to a subdomain or ignored completely. As the application server only checks for a specific cookie name when determining if the user is authenticated or a CSRF token is correct, this effectively acts as a defense measure against session fixation.

Note: On the server, the web application must check for the full cookie name including the prefix. User agents do not strip the prefix from the cookie before sending it in a request's Cookie header.

For more information about cookie prefixes and the current state of browser support, see the Prefixes section of the Set-Cookie reference article .

Privacy and tracking

Earlier on we talked about how the SameSite attribute can be used to control when third-party cookies are sent, and that this can help preserve user privacy. Privacy is a very important consideration when building websites which, when done right, can build trust with your users. If done badly, it can completely erode that trust and cause all kinds of other problems.

Third-party cookies can be set by third-party content embedded in sites via <iframe> s. They have many legitimate uses include sharing user profile information, counting ad impressions, or collecting analytics across different related domains.

However, third-party cookies can also be used to create creepy, invasive user experiences. A third-party server can create a profile of a user's browsing history and habits based on cookies sent to it by the same browser when accessing multiple sites. The classic example is when you search for product information on one site and are then chased around the web by adverts for similar products wherever you go.

Browser vendors know that users don't like this behavior, and as a result have all started to block third-party cookies by default, or at least made plans to go in that direction. Third-party cookies (or just tracking cookies) may also be blocked by other browser settings or extensions.

Note: Cookie blocking can cause some third-party components (such as social media widgets) not to function as intended. As browsers impose further restrictions on third-party cookies, developers should start to look at ways to reduce their reliance on them.

See our Third-party cookies article for detailed information on third-party cookies, the issues associated with them, and what alternatives are available. See our Privacy landing page for more information on privacy in general.

Cookie-related regulations

Legislation or regulations that cover the use of cookies include:

• The General Data Privacy Regulation (GDPR) in the European Union
• The ePrivacy Directive in the EU
• The California Consumer Privacy Act

These regulations have global reach. They apply to any site on the World Wide Web that users from these jurisdictions access (the EU and California, with the caveat that California's law applies only to entities with gross revenue over 25 million USD, among things).

These regulations include requirements such as:

• Notifying users that your site uses cookies.
• Allowing users to opt out of receiving some or all cookies.
• Allowing users to use the bulk of your service without receiving cookies.

There may be other regulations that govern the use of cookies in your locality. The burden is on you to know and comply with these regulations. There are companies that offer "cookie banner" code that helps you comply with these regulations.

Note: Companies should disclose the types of cookies they use on their sites for transparency purposes and to comply with regulations. For example, see Google's notice on the types of cookies it uses and Mozilla's Websites, Communications & Cookies Privacy Notice .

• Related HTTP headers: Set-Cookie , Cookie
• Related JavaScript APIs: Document.cookie , Navigator.cookieEnabled , Cookie Store API
• Third-party cookies
• Cookie specification: RFC 6265
• Cookies, the GDPR, and the ePrivacy Directive

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Clear cookies in Safari on Mac

You can see all the websites that have stored cookies and website data on your Mac, and you can remove some or all of it.

Open Safari for me

Click Manage Website Data.

Select one or more websites, then click Remove or Remove All.

Removing the data may reduce tracking, but may also log you out of websites or change website behavior.

Note: Removing cookies and website data in Safari may change or remove them in other apps.

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Safari cannot connect to localhost but can connect to 127.0.0.1

For some reason, all of a sudden my Safari cannot connect to localhost because it cannot establish a secure connection. However, it is able to connect 127.0.0.1. Oddly enough Firefox is able to connect to localhost and 127.0.0.1. I believe it's some sort of certificate issue, but that's just a guess. What can I do so I can connect to localhost on Safari again?

• I feel like you're leaving out a lot of key details. What kind of webserver (or other software package with its own integrated web service) have you been running on your machine? Have you perhaps been experimenting with HSTS or HPKP security on a website you're developing on localhost? –  Spiff Commented Feb 18, 2017 at 19:40
• I'm running MAMP. I recently upgraded from MAMP 3.5.x to the latest version. I did uninstall MAMP Pro which did some edits to the host file. I haven't been experimenting with either of those things. I did install a Docker image of cozy.io last night and removed it promptly. That was the first time I had some secure connection issues though it was able to be bypassed by adding an exception. –  The Kid From Yesterday Commented Feb 18, 2017 at 20:46

2 Answers 2

You probably installed something on your machine that acts as a web server and uses HTTP Strict Transport Security (HSTS) to make sure your browser knows it should always use TLS (HTTPS) when connecting. Then you connected to it by pointing your browser at localhost, and now your browser believes it should only use HTTPS when connecting to localhost.

Apparently Safari stores its list of HSTS websites in ~/Library/Cookies/HSTS.plist , so you should be able to fix it by editing that plist file to remove the entry for localhost, or by deleting that plist altogether if you don't mind resetting the whole list of sites Safari has learned to strictly require TLS for.

• I think this is the solution, but the only problem is that it keeps adding the localhost entry after I start Safari. Even if I delete the plist. –  The Kid From Yesterday Commented Feb 18, 2017 at 23:12
• Deleted this plist and restarted and this worked thank you so much! –  The Kid From Yesterday Commented Feb 18, 2017 at 23:28

Note: This might not solve everyone's problem.

I am a MAMP user and noticed in my hosts settings that 127.0.0.1 localhost was removed somehow. Type sudo nano /etc/hosts , type in your password, and then add these default lines back:

127.0.0.1 localhost ::1 localhost

This worked for me. I hope others find it helpful.

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged mac localhost safari ..

• Featured on Meta
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• We spent a sprint addressing your requests — here’s how it went

Hot Network Questions

• Olympic basketball terms: what does “gutted on the glass and in the paint” mean?
• Can a MicroSD card help speed up my Mini PC?
• Sargent-Welch 1947 atomic model kit, design and use
• Go the Distance
• o y u (or and or)
• Could a Black Market exist in a cashless society (digital currency)?
• Looking for title of old Star Trek TOS book where Spock is captured and gets earring
• What scientifically plausible apocalypse scenario, if any, meets my criteria?
• As a DM, what should I do if a person decides to play a rogue?
• Is it possible to go back to the U.S. after overstaying as a child?
• Mechanism behind a pink human skeleton
• Vietnam war era story about attack on American air force base with a Cessna
• Power pedals on a fully MTB (riding flat roads), later on road/gravel bike
• I am trying to calculate Albumin-Creatinine ratios for research, why is the result so high?
• Where do we go if we gain knowledge of the absolute truth?
• Using register after multiplier in the MACC
• Distorted square wave
• Does the proverb "having your cake and eating it too" imply hypocrisy?
• What enforcement exists for medical informed consent?
• Can IBM Quantum hardware handle any CSWAP at all?
• How to relocate an outlet forward into a new wall?
• A web site allows upload of pdf/svg files, can we say it is vulnerable to Stored XSS?
• Book read in the 80/90s about an alien microbe taking over creatures
• Of "ils" and "elles", which pronoun is, grammatically speaking, used to refer to a group with an overwhelming female majority?

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Collections
• Safe and secure

When to use HTTPS for local development

Using http://localhost for local development is fine most of the time, except in some special cases. This post explains when you need to run your local development site with HTTPS.

Also see: How to use HTTPS for local development .

In this post, statements about localhost are valid for 127.0.0.1 and [::1] as well, since they both describe the local computer address, also called "loopback address". Also, to keep things simple, the port number isn't specified. So when you see http://localhost , read it as http://localhost:{PORT} or http://127.0.0.1:{PORT} .

When developing locally, use http://localhost by default. Service Workers, Web Authentication API, and more will work. However, in the following cases, you'll need HTTPS for local development:

• Setting Secure cookies in a consistent way across browsers
• Debugging mixed-content issues
• Using HTTP/2 and later
• Using third-party libraries or APIs that require HTTPS

Using a custom hostname

✨ This is all you need to know. If you're interested in more details keep reading!

Why your development site should behave securely

To avoid running into unexpected issues, you want your local development site to behave as much as possible like your production website. So, if your production website uses HTTPS, you want your local development site to behave like an HTTPS site .

Use http://localhost by default

Browsers treat http://localhost in a special way: although it's HTTP, it mostly behaves like an HTTPS site .

On http://localhost , Service Workers, Sensor APIs, Authentication APIs, Payments, and other features that require certain security guarantees are supported and behave exactly like on an HTTPS site.

You may encounter special cases where http://localhost doesn't behave like an HTTPS site—or you may simply want to use a custom site name that's not http://localhost .

You need to use HTTPS for local development in the following cases:

You need to set a cookie locally that is Secure , or SameSite:none , or has the __Host prefix. Secure cookies are set only on HTTPS, but not on http://localhost for all browsers. And because SameSite:none and __Host also require the cookie to be Secure , setting such cookies on your local development site requires HTTPS as well.

You need to debug locally an issue that only occurs on an HTTPS website but not on an HTTP site, not even http://localhost , such as a mixed-content issue.

You need to locally test or reproduce a behaviour specific to HTTP/2 or newer. For example, if you need to test loading performance on HTTP/2 or newer. Insecure HTTP/2 or newer is not supported, not even on localhost .

You need to locally test third-party libraries or APIs that require HTTPS (for example OAuth).

In this case, Chrome, Edge, Safari, and Firefox by default do not consider mysite.example to be secure, even though it's a local site. So it won't behave like an HTTPS site.

Other cases! This is not an exhaustive list, but if you encounter a case that's not listed here, you'll know: things will break on http://localhost , or it won't quite behave like your production site. 🙃

In all of these cases, you need to use HTTPS for local development.

How to use HTTPS for local development

If you need to use HTTPS for local development, head over to How to use HTTPS for local development .

Tips if you're using a custom hostname

If you're using a custom hostname, for example, editing your hosts file:

• Don't use a bare hostname like mysite because if there's a top-level domain (TLD) that happens to have the same name ( mysite ), you'll run into issues. And it's not that unlikely: in 2020, there are over 1,500 TLDs, and the list is growing. coffee , museum , travel , and many large company names (maybe even the company you're working at!) are TLDs. See the full list here .
• Only use domains that are yours, or that are reserved for this purpose. If you don't have a domain of your own, you can use either test or localhost ( mysite.localhost ). test doesn't have special treatment in browsers, but localhost does: Chrome and Edge support http://<name>.localhost out of the box, and it will behave securely when localhost does. Try it out: run any site on localhost and access http://<whatever name you like>.localhost:<your port> in Chrome or Edge. This may soon be possible in Firefox and Safari as well. The reason you can do this (have subdomains like mysite.localhost ) is because localhost is not just a hostname: it's also a full TLD, like com .
• Secure contexts
• localhost as a secure context
• localhost as a secure context in Chrome

With many thanks for contributions and feedback to all reviewers—especially Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood and Jake Archibald. 🙌

Hero image by @moses_lee on Unsplash , edited.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2021-01-25 UTC.

• Home New Posts Forum List Trending New Threads New Media Spy
• WikiPost Latest summaries Watched WikiPosts
• Support FAQ and Rules Contact Us

Safari: What is localhost:8080?

• Thread starter iHorseHead
• Start date Saturday at 3:53 PM
• Sort by reaction score

macrumors 68000

• Saturday at 3:53 PM

Mitthrawnuruodo

Moderator emeritus.

• Saturday at 4:06 PM

I'm guessing https://mokrane.me/ has messed up his DNS settings somehow and included his own local machine** when setting up his site, but I'm not sure enough to bother trying a lookup... I get the same suggestion on my Mac, BTW. Same with Serkan Ekens "page". I don't get this one, though, so that might be someone in your local network? ** localhost is just your own machine, and 3000 and 8080 are just ports that may be used to access services on your machine. Both 3000, 8080 and 8888 are normal ports for local web servers, that many web developer's run on their local machine, when they develop web pages. You will not be able to find any of these sites if you go to localhost on your own machine, and unless you run a local server (by enabling Apache, running MAMP, VS Code Live Server, or similar) you won't find anything at https://localhost:8080 or https://localhost:3000  

• Saturday at 4:22 PM

Mitthrawnuruodo said: Same with Serkan Ekens "page". I don't get this one, though, so that might be someone in your local network? Click to expand...

macrumors 603

• Saturday at 11:15 PM

FreakinEurekan

• Sunday at 8:56 AM
• Sunday at 9:02 AM

FreakinEurekan said: The tl;dr version is: It's nothing to worry about. For the longer version, get a degree in computer science Click to expand...

• Sunday at 11:12 AM
• Sunday at 11:16 AM

But where did it get that? What happened here?  

• Sunday at 11:24 AM

Apple indexed that website with that address at some point and the information was not updated since.  

• Sunday at 3:49 PM

In short, it's a bug. Apple should exclude private addresses from its public index, but evidently doesn't.