The issue:
I have used github project of Ofir Dagan: Storing cross domain local storage.
It implements html5 local storage:
https://github.com/ofirdagan/cross-domain-local-storage
The problem:
Safari doesn't allow third party cookies by default (other browsers allow it).
Safari privacy preferences are:
The default is: "Allow from websites I visit".
I read about these settings:
Always Block - Block all first-party cookies and block all third-party cookies.
Allow from Current Website Only - Allow all first-party cookies and block all third-party cookies.
Allow from Websites I Visit - Allow all first-party cookies and block all third-party cookies unless that third party was a first party at one time (based on current cookies and browsing history).
Always Allow - Allow all first-party cookies and allow all third-party cookies.
Solution I have tried:
Local Storage with an iframe (pixel) - I think it's no longer works on Safari - Is there any workaround to set third party cookie in Iframe for safari?
I think that there is a way to share local storage between first party and third party sites on Safari. (Facebook.com and Booking.com share data between different domains).
I succeeded to achieve it by removing the API and writing it by myself, But I don't want to remove the API and implement it by myself (hope that there is a small fix in order to support Safari):
Iframe.html:
window.addEventListener('cors_event', function(event) {
if(event.event_id === 'my_cors_message'){
if (event.data.options.funcName == "SetItem") {
localStorage.setItem(event.data.options.key, event.data.options.value);
}
else if (event.data.options.funcName == "GetItem") {
return localStorage.getItem(event.data.options.key);
}
}
});
MainPage:
<iframe id="target" src="iframe.html" frameborder="1"></iframe>
<script>
var target = document .getElementById('target');
target.onload = function(){
target.contentWindow.postMessage('set', '*')
}
</script>
So does someone know how can I achieve it by changing some API logic to support Safari?
Any help appreciated!
As noted by the Cross-Storage library documentation:
Notes on Safari 7+ (OSX, iOS)
All cross-domain local storage access is disabled by default with Safari 7+. This is a result of the "Block cookies and other website data" privacy setting being set to "From third parties and advertisers". Any cross-storage client code will not crash, however, it will only have access to a sandboxed, isolated local storage instance. As such, none of the data previously set by other origins will be accessible. If an option, one could fall back to using root cookies for those user agents, or requesting the data from a server-side store.
It seems that the recent updates to the Safari browser (Prevent cross-site tracking) blocks any cookies from being generated when the Matomo domain doesn't match the website it's being loaded from.
This breaks the use of iFrames for Matomo that require cookies to be set (For example the logme feature)
There doesn't seem to be any way to fix this with headers (Eg using CSP or CORS configurations).
current workarounds exist that I've found:
Disable the "Prevent cross-site tracking" setting in the Privacy settings
Redirect the visitor to the page outside of an iFrame to set the cookie - after this the iFrame can load as long as the CORS configuration is correct and the browser isn't completely blocking the iFrame from loading.
I'm not sure how many users are using iFrames that would require cookies to be set, but they would be impacted if any of their users use Safari.
You may try Store.JS. As per the docs:
store.js exposes a simple API for cross browser local storage
Related
React app. I want to block specific browser (Kiwi Mobile) from my site. But i can't use User-Agent header, because people, who using site also using chrome extension, which change User-Agent in requests. So, is there any other ways to get browser info?
I tried to detect extension, but it works like a VPN extension: intercepts requests and then send changed data to my servers. I blocked an extension IP in Cloudflare, but it works only for a week, then they start using proxy servers, and detect all proxy servers is nearly impossible.
I need to block using this browser by React app (just not load the page if it is a kiwi browser). Or maybe, block it by cloudflare, if it's possible
Short:
I need help in SSO in Safari, I'm using iFrame and postMessage logic which is working fine in Chrome and Firefox (PC, Mac, Android and iOS) but the catch is in Safari. I tried Storage Access APIs and placed those in iFrame's onLoading event to check access. But the localStorage which I was used to store JWT is not persistent in the iFrame. I'm using Angular 11.
Scenario:
I'm developing few applications which uses same auth site for sso, which was working as expected as I said in short description. But when it comes to Intelligent Tracking Prevention enabled browsers as of now Safari, It blocks the iFrame by considering it as 3rd Party Trackers which is very insane since the iFrame's origin (Domain) is same with Sub-domain used in service sites.
I tried to check the access by using storage access API i.e hasStorageAccess() in window onLoad method in the iFrame's script. If has no access, I called requestStorageAccess(). I'm here not using user gesture and using button click from service site because I'm using angular for frontend framework but in order to request using button in iFrame.(Since, The policy specifies to get access works only after user interaction which is another headache for devs)
I need help to overcome this issue and fix the SSO with ITP. Any guidance is useful and I'll keep updated.
Google is working fine with their sso and services such as YouTube and Mail doesn't need login on every visit. Any idea on how they achieved.
The reason could be that Safari has the option "Prevent cross-site tracking" enabled by default and that can interfere with the SSO login and display of an embedded iframe (because it blocks some cookies).
Solution
Disable (uncheck) the option for "Prevent cross-site tracking" in the Safari configuration menu.
Tip: To achieve a better user experience, using Javascript you can detect when a user is using Safari and show him an HTML message explaining that he needs to disable that option in order to continue or use another browser like Chrome or Firefox.
I'm currently working on a web application which sits inside an iframe for security purposes (protecting user data) and is hosted on other websites. To keep session state for insecure data, we write some data to local storage for user functionality i.e., remembering the user's background colour we save "backgroundColour" as "red".
However I have run into the following two issues on iOS Safari which currently work on MacOS Safari and Chrome and internet Explorer 11.
Issue 1: local storage is not retained when I force quit iOS
The user navigates to the host website, www.host.com, which loads my iframe content from a different domain, www.example.com
The user then interacts with the iframe and saves their background colour preferences which I save to local storage.
The user then force quits Safari or navigates away and then force quits Safari.
Navigate back to the host website
Expected behaviour: The localStorage contains the backgroundColour property
Actual behaviour: The local storage is empty
Issue 2: using the iframe content on different sites doesn't utilise local storage
The user navigates to the host website, www.host.com, which loads my iframe content from a different domain, www.example.com
The user then interacts with the iframe and saves their background colour preferences which I save to local storage.
The user navigates to www.awesomesite.com which also has my iframe content from the domain in step 1, www.example.com
Expected behaviour: The local storage is retained between the different sites because the storage is against DNS of the iframe
Actual behaviour: The local storage is empty
Has anyone experienced this before? Are there any workarounds that people have found? Is this a bug in iOS Safari? Have I done something wrong?
Cheers
Issue 1 is Safari behavior and cannot be changed externally with code. Please open a feature request or bug report with Apple:
https://www.apple.com/feedback/safari.html
Issue 2: Unfortunately, the technique you are using "3rd party local storage" is a technique employed by tracking technologies. The recent privacy push has led all browsers to make more strict rules for 3rd party cookies, and other local storage. You will find that privacy settings will make your user experience inconsistent. You cannot expect your local storage to be reliable when you are a 3rd party.
SEE:
Is there any workaround to set third party cookie in Iframe for safari?
AND
https://medium.com/#bluepnume/safaris-new-tracking-rules-and-enabling-cross-domain-data-storage-85241eea7483
AND
https://groups.google.com/forum/#!topic/mozilla.dev.platform/vm81cSx4teo
I'm trying to store a value on another domain using an iframe (actually, I'm using the xauth library at http://xauth.org/info/). However, when I try to store anything using Chrome, it comes back with "QUOTA_EXCEEDED_ERR: DOM Exception 22", which I've come to recognize as an access error. I've mocked up a couple of very simple pages below to duplicate the effect:
File 1.html:
<html>
<head/>
<iframe src='http://127.0.0.1/2.html' />
</html>
File 2.html:
<html>
<head/>
<script>
console.log(localStorage);
localStorage.setItem('test', '123');
</script>
</html>
If I place both of these on my local server and access localhost/1.html it embeds a frame from 127.0.0.1 (which Chrome considers a separate domain), and I get the same access error as above. At a guess, it looks like even though I'm embedding an iframe from another domain, and the script inside that iframe references the localStorage for that domain properly (as I can see with the console.log(localStorage) line), the permissions for writing to localStorage are coming from the top page's domain.
In short, it looks like no iframe can write to localStorage in Chrome. Does anybody know if there's a way around this particular security "feature"? Or am I doing something wrong?
The problem only occurs when third-party cookies are disabled. Newer versions of Firefox and Opera are also blocking it. In IE and Edge it is still possible although third-party cookies are disabled. If the localStorage would not be blocked in the iframe, a web tracker could simply include a iframe, read the cookie, send it to the parent script, and then send it to the server.
The reason why this is not blocked in IE and Edge is that these browser allow websites to send third-party cookies, which were previously set as first-party cookies, to the server although third-party cookies are blocked. For example, if a user visits facebook on a regular basis, he gets first-party cookies from facebook. When he then visits other websites with facebook's share button, facebook can track him although third-party cookies are disabled. I really do not know why IE and Edge do not block third-party cookie sending, but I would not use these browsers anyway.
The errors the browsers show when third-party cookies are disabled:
Chrome and Opera: Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
Firefox: SecurityError: The operation is insecure.
IE and Edge: No error, access to localStorage in iframe is possible although third-party cookies are disabled.
So in conclusion, it is not possible to bypass this security feature (in Chrome, Firefox, Opera) and this is good in order to ensure users' privacy.
This is an old post, but if someone else see it- you can use postMessage
https://stackoverflow.com/a/40469196/4836581
Well, localStorage is domain-based and there is no reason for your example code to fail. What it actually does is to set the test item to 123 for 127.0.0.1 whereas it will leave the localhost localStorage empty.
This might not be the answer to your initial problem of QUOTA_EXCEEDED_ERR, but just try to switch to private browsing on Chrome (Ctrl+Shift+N) to see if you still have the error. Without further information on what you were initially doing, I can't tell much but I believe that quota exceeded means what it means...
And I think Chrome's quota is 2.5mb unlike FF which has 5mb of localStorage quota.
I am able to see session cookies in Firefox 3.6 by going to
Tools->Options->Privacy->Remove Individual Cookies
How do I see those same session cookies in IE (6/7/8)?
Tools->Internet Options->Browsing
history Settings->View files
only contains persistent cookies
Also how do I access them programmatically? In Firefox I use the nsICookieManager interface to read the session cookies, does IE contain an equivalent interface?
Cookies set with the HTTPOnly attribute will not be visible to Javascript (e.g. via the document.cookie accessor). In IE8, 9, and 10, hit F12 to open the Developer Tools. Click Cache > View Cookie Information to see persistent and session cookies that apply to the current domain.
This feature is not present in the IE11 version of the tools, which would mean that your choices are 1> Watch outbound Cookie headers in Fiddler or on the Network tab, or 2> Write a plugin that calls the InternetGetCookieEx API with the appropriate flag to include HTTPOnly cookies.
Type into adress-bar:
javascript:alert(document.cookie)
to see the cookies that are currently readable by javascript.
Regarding to the read/write of session-cookies:
Why do you need to do it using javascript? usually session-cookies are needed to have an relation to serverside stored data, so you need to manage the cookies from serverside, no matter what browser there may be.
F12-> Network Tab -> Enable Network Capture Traffic Capturing - > Details Tab -> Request Header Tab.