I'm working on a website that utilizes information from an external website and presents it in a neat chart.
The issue is that the user will have to login to that website in order to see the information (i.e. like logging into facebook).
I'm trying to develop something like embedding the login page of that external website into my website and then have the user login that way (see below)
<object data=http://www.website.com width="600" height="400"> <embed id="test" src=http://www.website.com width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>
My question is how are you able to know if the user has logged in? In the embedded window, I can log in and see the page but my website doesn't know that I have logged in. Is there a way to actively check the URL of the embedded page to see if has changed (i.e. you have logged in)?
I've tried just refreshing the page but the source link for the embed object is the same.
Thanks
For security/technical reasons, you can't directly retrieve whether or not the user is logged in to some other page unless there's an API, which most social media sites have. If you own the page, you can also build one.
Otherwise, if you have enough traffic available, you can also request the login data via a form that gets submitted to your server and then do some stuff to have the server login to that other website and retrieve the information you wanted. However, that's not feasible in a high-load environment (many users), because of multiple reasons:
The server would have to logout and login very often, which will take up a lot of performance
That would also cause a lot of traffic, as I don't see how you'd retrieve the info once logged in other than requesting some web page and parsing it
Finally, because of all those requests from the same IP in a short window of time, the server of whatever website you're looking at will end up denying you access because you've been spamming it with requests.
Of course, you could use an iframe that hides once the user has logged in (you can detect when it reloads and the hide it via display:none), then parsing its contents, but I doubt that'll work as the access to iframe contents is restricted for security reasons.
Related
Is there a way to implement an iframe of google calendar inside a react app without needing to manually handle events myself?
Like the webapp would show the iframe where they can login to google calendar then it will just show it inside the specific box.
I can only find solutions using a calendar library but not the approach that I'm thinking about.
Google has set the "X-Frame-Options" response header for requests to https://calendar.google.com/calendar/r (the default calendar homepage) to sameorigin, which means that this will not work:
<h2>Your Calendar:</h2>
<iframe src="https://calendar.google.com/calendar/r"></iframe>
If you try that, you will get a Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.. Essentially, the only domain that would be allowed to embed the default calendar pages would be Google's own domain.
That being said, there is some interesting options available. If you know the users gmail address, even if their calendar is private, as long as they are logged in, they can see an iframe with a source equal to 'https://calendar.google.com/calendar/embed?src=' + encodeURI(email);.
Demo: JSfiddle link (the built in embed tool is giving me grief).
However, if they are not logged in, detecting that and showing the Google Login page, like you are asking for, is difficult. If they are not logged in, an iframe with a GCal embed URL will automatically redirect to the login page, but because the login page has x-frame-options set to sameorigin, it will get blocked loading into the iframe. To see this in action, try the demo above in a logged-out incognito window and enter your gmail email.
Furthermore, as far as I can tell, you can't detect whether the loading of an iframe was blocked by x-frame-options with Javascript, so there is no easy way to redirect the user to login to Google if the calendar does not load.
I have a feeling the most reliable way to check logged in status is going to be through the Google Sign-in button. In addition, Google has a full API just for their Calendar product, including endpoints that would tell you which calendars a user has.
I'm currently working on a content generator and I have objects which allow users to add custom scripts to the page.
I'm concerned about the preview of my plugin. Pages cannot be saved in the preview, but can the user mess with my preview page permanently if I allow him to use dynamically added javascript?
I'd also like to mention, the javascript is sent via AJAX to a php file, then appended to the body.
Pages cannot be saved in the preview, but can the user mess with my preview page permanently if I allow him to use dynamically added javascript?
Not permanently, no. He can only mess up his own current page.
If the custom scripts and pages don't leave the client's computer, or you can make sure they will not be served to other people (which implies they're not stored on the server) then you're safe from XSS attacks.
However, notice that as soon as your plugin leaves "preview" and you allow saving pages that are shown to other visitors, you will have that problem.
Yes, this is a big attack vector known as Cross Site Scripting (XSS). You should never run JavaScript provided by your users on arbitrary pages, unless you absolutely must.
For instance, I could add:
document.body.style.display = 'none';
and that would hide the entire page.
Although your script only displays to the current user, your page may be vulnerable to a Cross Site Scripting attack. The way to handle it in this case (as you are allowing scripts) is to use a similar mechanism to a Cross Site Request Forgery prevention (although CSRF and XSS are completely different).
e.g. if your page https://www.example.com/preview displays all content (HTML and script) POSTed to it (for thie example assume the POSt parameter is called content), an attacker may include the following code on their page and then entice the victim to visit it whilst logged into your website.
On www.evil.com:-
<form method="post" action="https://www.example.com/preview">
<input type="hidden" name="content" value="<script>alert('foo');</script>" />
</form>
and this form could be submitted automatically via JavaScript (document.forms[0].submit()).
This will cause the script in content to be executed in the context of your site, possibly passing cookie values of the user's session to www.evil.com rather than my benign example of an alert box.
However, as your are POSTing the content value to your own site using AJAX, you can prevent this attack by checking that the X-Requested-With request header is set to XMLHttpRequest. This header cannot be POSTed cross domain (without your server agreeing to this using CORS).
Also, if your page is for a preview - what is the preview for if your preview cannot be saved? If this is related to your full save functionality, then it is possible to allow a user to save scripts safely by running the entered content within a sandbox.
There's some website (not mine, it's third party) that has a form on it. In order to spare the user from having to fill out this form, I want to somehow prefill it with data I have stored in my database.
Let's say it looks like this:
<form id='form1'>
<input type='text' id='input1' />
<input type='submit' />
</form>
I though a solution would be to create my webpage, and on it create an iframe with the form I want to fill.
<iframe id='myFrame' src='http://www.someSite.html'>
I have followed some suggestions here about how to access content in an iframe: Getting Contents of Iframe with Pure JavaScript, How to get the body's content of an iframe in Javascript?, but the problem is, when I follow them, it says that the content of the page is null.
I found out that it's because the page with the form is on a different domain, so web browsers don't allow it. It's possible to turn this off in the browser, but I need it to work independently of browser settings.
You can't do what you're asking in a simple web page. The security restrictions exist for a reason; imagine if a malicious user wanted to load, say, your banking site in an iframe and have you login. The malicious script on the hosting page would then have access to the form where you enter your credentials, account information, etc, etc.
As #mplungjan stated, you have to work around this by either making requests from your server and proxying them, so that the remote content actually goes through your site first, or by getting the user to modify their browser environment with a plugin or a bookmarklet.
I was wondering if there was a way to prevent a user from saving/downloading a web page? Specifically, I mean not letting them have access to the data displayed through my web application on their own machine?
I've heard that this is not possible since the browser must have access to the source code/data, but at the same time, I've noticed that if I to my gmail account, open an email, save the page, but when I try to open that page on my computer, it doesn't work. Furthermore, if I click "view source", I can see that even the source does not display the entire email message, even though the email is opened in my browser.
How it's possible for gmail to prevent me from seeing that email data?
Thats what called rendering pages using dynamic data without refreshing page (AJAX). The entire page source code is not downloaded in one go and components within the page request data asynchronously to display content. Try googling it and you will find more information.
In View source you can only see the HTML, CSS, JavaScript codes. No one can copy any dynamic code (PHP) from view source.
You can't stop anyone to see your html,css code in browser, as we are having view source option.
Maximum what you can do is disable right click on your page. Thant can be done through JavaScript.
I am working on a rails application. I have implemented facebook integration in my application. User can invite his friends to my application. Invitation system is working fine but problem is when any friend of user clicks on request it gets redirected to my facebook applications canvas page. I want that the user be redirected to my web applications landing page instead of in the application's canvas page. I tried to do so by including javascript in page which opens in canvas on facebook.
<script>
window.location.href = "http://www.google.com";
</script>
But it is giving me error as following.
Refused to display document because display forbidden by X-Frame-Options.
How to redirect user to my applications landing page as soon as it land son my canvas page? I want to achieve something similar to pinterest does.
Any help is highly appreciated.Thank you
Your frame doesn't have access to the window object, as that'd let you access Facebook's pages and do nasty stuff to them. You need to do top.location.href instead of window.location.href.
Your facebook application is probably sending the X-Frame headers, preventing Facebook to include your application iside the iFrame in the first place.
Some applications include that to prevent clickjacking, see here for an explanation of how it works:
http://blog.mozilla.com/security/2010/09/08/x-frame-options/
You might want to disable that header and then try again.