Iframe and blocking 3 parties cookies - javascript

I have an IFrame on my webapp which host a website.
The hosted website needs access to local storage (cookies) to get the auth token.
On Chrome all is working fine, but going into incognito mode gives me an error, because 3 parties are blocked.
Disabling this option in settings is not an option for me - I just can't force a users to do that.
Is there anything I can do to go around this problem?
The hosted website is the website I trust and I know the URL. I was thinking maybe I can add something to the header to allow access only from that URL, something Like CORS?
Thanks for help.

Related

Safari 13.1 is blocking third party cookies

I have an iframe that is embedded on external websites.
That iframe performs some actions that require to record some cookies, one of them is login the user on the iframe source website.
I basically followed this: https://webkit.org/blog/8124/introducing-storage-access-api/
It worked but only when you use Safari on an incognito window when I try to do the same using a common tab the cookies are not stored.
UPDATE:
We found a workaround is not the best in the world but something is something.
We added a CNAME on the external website CNAME: example.externalwebsite.com -> example.com
We changed the iframe src=example.externalwebsite.com
In this scenario, the subdomain example.externalwebsite.com is able to set the cookie as usual.
GOOD PART: we found a way to make it work.
BAD PART: we had to ask any client to add the CNAME and update their websites to change the iframe sources but as I said something is something.

Is it possible to mask a URL in either Javascript or PHP?

I have a website hosted with a domain (www.example1.com).
When viewers access this website, I want everything to remain exactly as is however, I want to change the URL in the browser to appear as www.example2.com.
Is this possible?
"When viewers access this website, I want everything to remain exactly as is however, I want to change the URL in the browser to appear as www.example2.com."
No, you can't do this with Chrome, Edge, IE, Firefox, etc. because they don't want to let you impersonate apple.com or microsoft.com etc.
You can only do the reverse: have your example1.com URL be visible while you display content from example2. This could be done with tricks like an iframe or fetching the content server-side with cURL.
If you want to hide the URL for example1.com you'll need to make your own browser using a chromium widget, the IE web control, webkit. If it's your own browser you can display anything you want in the address bar or show no address bar at all.
You can try the following:
You should own both of the domains example1.com and example2.com.
The domain example2.com should point to the IP of the server hosting your web app In your name server configuration.
The domain example1.com should be configured to forward to example2.com (also from the name server).
So, visitors to example1.com will be redirected to example2.com and see the content of the web app while the address bar remains pointing to example1.com.
Another solution:
Both domains should point to the IP of the server hosting your web app.
In the web server, you can configure to redirect to example2.com only if the request was for example1.com.
Here is an answer about doing so in Apache web server.
Using PHP
You can see this answer about checking the host domain name and then you can redirect if the domain is example1.com

X-Frame ORIGINS in IFRAME

A while ago I created an application whereby clients connect to a server using WebRTC protocols.
The clients screen is made up of two halves. One half is linked to the server and receieves things like messages, and has the web page which has the WebRTC javascript in it. The other is an IFRAME. When the client connects to the server, the server sends the client a web address which is loaded in the IFRAME.
I know that some web pages cannot be loaded in an iframe, examples typically having password screens. Google forms does not appear to have this restriction, which is great.
So now imagine I launch a server and ask 20 people to connect to it. All 20 students connect to the server properly, I know because it comes up with all their details on my computer. Typically, from my testing, 15/20 will be fine. The other 5 will get a white screen. When I investigate in the console it is an XFRAMES ORIGIN problem, its saying the webpage being loaded will not allow itself to be loaded in an iframe. However everybody else (who are using the same browser [chrome], and some the same browser version) are fine.
Now I have one solution which works for some students, there is a setting in chrome which is called:
block third party cookies and site data
If this is enabled it doesn't work, if its not enabled it does work.
Now I have 4 students left who still just see a white screen whom I have no solution for. Chrome and Firefox both support the software but both produce the same issue.
The building setup is that students connect to the internet through a server. They must connect via this server as my nameserver is not local and indeed my website is not local either.
I dont think it is a coding issue as it only happens on a few select computers and everything else works just hunky dory. Thus I think it might be an issue with something else: firewall, security settings, config button etc. If anybody has any suggestions for what i can do to remedy this then I would be very grateful for your help.
I have tried to supply all info I believe to be relevant (hense the length) but anything I have missed please ask.
Thank you.
Alex
If the main site's URL is different than the iframe's URL, you'll get an xframes origin problem. This includes the protocol (http vs. https) and full domain (example.com vs www.example.com). In other words, if a user goes to example.com and the iframe uses www.example.com it could cause an xframes origin error. Or if they go to http://www.example.com and the iframe uses https://www.example.com you might get this error.
OK so for people who encounter this issue in the future I am going to create an update this post here. Basically it is for people who want an answer to the issue of iframes just displaying a whitepage.
With these three solutions I have eliminated all my issues, but as I come up with new ones I will post them here. Hopefully its useful to somebody :)
SOLUTION 1
If your iframe is aiming somewhere that requires the user to log in, it is unlikely to work. Password pages are rarely cross origin for obvious and good reasons. The solution is to ensure before they use your iframe page they log in fully to what they are doing, or provide an error message that gives them this information if it happens. See this post for details: Catch error if iframe src fails to load . Error :-"Refused to display 'http://www.google.co.in/' in a frame.."
Where I am we had dual login, so they sign into google and then into the organisation. Both these login areas will cause your page load to fail.
SOLUTION 2 (Chrome ONLY)
Some services react badly to QUIC mode, and some of my users have had issues due to this.
To fix:
1. chrome://flags
2. change QUIC mode to 'Disabled'
SOLUTION 3
If you are working via a proxy server that requires cookies, users may have issues if they have the 'Block third-party cookies and site data' button enabled. Disabling this had a positive effect on how well the iframes were working.
In chrome:
Settings
Search for cookies
Click 'content settings'

Cross Domain AJAX (Philips Hue Lights)

I am building a web application that uses voice recognition & text-to-speech that performs actions/displays a wide variety of data through an HTML page (built with JS (jQuery for AJAX)/HTML/CSS.) This web application is being hosted on HTTPS server that is not on my local network.
I have set up and configured some smart lights called "Philips HUE Lights" that are equipped with a RESTful API that can only be controlled through the local network (not visible outside of the local network.)
I am able to send commands to the device by visiting the CLIP debugger/API tool (local ip) "http:////debug/clip.html" that is included with their product. I am able to send HTTP commands to the "Philip HUE Bridge" which is the device that issues the commands to the lights. All of the commands work when I use their API tool (GET, "PUT, POST, DELETE) visiting the locally hosted url shown above.
However when I try using a jQuery AJAX request "GET"/"PUT" from my web application that is hosted on my HTTPS server, the command fails. I have tried setting the AJAX function header property with "Access-Control-Allow-Origin: *". I have also tried setting the "crossDomain" property to true in the AJAX function. I also have tried setting the "dataType" property to both "json" and "jsonp" and it still won't work.
I am visiting my HTTPS web application through a computer that is connected to the local network that the "HUE Bridge" is connected to. Given that I am using a computer on the same network, I thought this might work...
I have read a lot of other posts/information on the internet but can't seem to find a definitive answer. I wanted to ask some of you more seasoned people:
Is what I am trying accomplish even possible given the scenario I described above? Or will I have to achieve this in a different manner?
Any help/suggestions are much appreciated. Thanks.
You are running into "Mixed Content" security issues.
Basically when you are hosting a page on a secure URL (https) you cannot access unsecure (http) resources without getting a mixed content error.
This error is visible in the console of your browser (usually accessed by F12), when something is not working during webdevelopment always check the console for errors.
To hack around this you can temporarily disable the security and allow the unsecure request. For example Chrome shows a shield in the addressbar which you can click to temporarily disable the warning. Firefox shows a clickable warning overlay on the lock icon in the addressbar.
This might be a temporary workaround for development, but you cannot expect your users to disable security.
A solution should be to send a Content-Security-Policy header. Based on documentation from http://content-security-policy.com/ the following header should allow XMLHttpRequests to any resource:
Content-Security-Policy: connect-src *
However since I do not have enough control to modify the headers on the webserver where my files are hosted I could not test this.
Before using this method make sure you understand the security implications when you send this header.

Setting cookies within an iFrame

I know this is a very talked about subject but just wanted to check something with you knowledgeable people.
I've got a domain, say domain-A, that is out of my control, housing an application from domain-B, developed by me, in an iFrame. The application within the iFrame uses cookies a lot. Should this work?
I'm not trying to read cookies between domain-A and domain-B, I purely want to set cookies in domain-B and read them in domain-B.
All seems fine in Chrome but IE doesn't want to play the game.
Can anybody give me some guidance please?
Thanks,
Andy.
From the server point of view, this should work fine. Your domain B will receive cookies from the IFRAME, as if it were just another web-page.
From the client side: sending the cookie could depend on policies set by the browser, of even by the user. Fiddle with the security level of your domain and the cookie settings in IE to get a hint of what is going on.

Categories