Develop Reference

How to achieve authorization ? How to prevent a user from directly accessing my html pages by writing URL?

I'm working on a node-red project with uibuilder node.
It's basically [html, css, js(with vue)] pages.
I want to make the login authorization part where each user opens the allowed pages only.
How can I achieve that? by tokens? by permitting direct access to pages using URL?
P.S. I'm new to this part of web and I tried searching but couldn't find what I need.

I searched a lot, all was dead-end until I found this question
Detect if page was redirected or loaded directly(Javascript)
Instead of getting into trouble with tokens, and checking at each page if it is valid or not.
I permitted accessing any page (except the login) by the URL. If you want to access a page, it's only by redirecting.
I achieved that by checking a variable at page loading if the page has history or not. if no history, it is redirected to the login page.
I added this part to my vue-js file:
window.onload = function() {
if(document.referrer == "") window.location.href = "http://localhost:1880/Login/login.html";
}
P.S. If all the Internet said preventing accessing by URL is impossible, Don't be disappointed. Search more, because it's actually possible. 😉 😉

Make tracking codes disappear from URL bar

I'm using tracking codes to know where do the visitors of my website come from.
Example:
Facebook "Use App" button http://www.example.com/?fb_useapp=1
An emailing campaign : http://www.example.com/?mailingjuly2017=1
etc.
But then this is what gets displayed in the browser:
This is not very user-friendly: the users shouldn't see this information. How to get this parameter hidden on browser? (but still present in the server logs, that's where I'll do my analysis!)
Shoud I do it from JS or PHP, or even in an .htaccess RewriteRule?
PS: instead of using parameters ?param=1, I could also use a different approach and have a RewriteRule redirect example.com/mailingjuly2017/ to example.com.

If you just want to remove the appearance of the parameters in the address bar without the need to refresh the page, you can try the following JS:
if (history.pushState && window.location.href.includes('?')) {
history.pushState({}, null, window.location.origin);
}
This will remove the parameters in url address bar and should not affect server-side logs. Note that it will also remove them in the history so if the user clicks the back button and then forward, the page will be loaded without the parameters. See MDN for details and browser compatibility.

Opening a new window that needs to make ajax calls to another domain

Background
We have two web applications hosted on different sub-domains. Application 1 is an internal admin system. Application 2 is a helpdesk system.
We can modify the source code of Application 1 but we have no access to modify Application 2.
The Goal
To display a link against an order in Application 1 that will open a new window, the URL of which is that of a ticket in Application 2.
The idea being that our staff can see that an order has a helpdesk ticket raised against it and simply needs to click a link on the order to view the ticket and reply to it.
The problem
Regardless of how I open the new window (window.open, target="_blank", etc.) the ticket in the new window is unable to make any ajax requests back to the helpdesk system where it is hosted.
The URL of the new window is part of Application 2.
In Google dev tools it tells me "The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match." even when I open it using _blank.
If I go to the exact same URL manually everything works... but this doesn't help when I need it to work from the link.
Is there any way to achieve the above?
If not, is there any way I can open a new window that is "detached" from the window that opened it so that same origin policy no longer applies?
Edit 2014-03-28 10:23
I have no access to App2's code at all. I cannot make any changes to App2. Any answer must take this into account.
I am trying to open a new window from my application (App1) where the target URL of that window is a page in App2. That page inside App2 then needs to be able to use ajax to communicate with other areas of App2. This is where the problem lies. Because App1 opened the window the same origin policy is preventing that window from making it's ajax requests.

I suspect that JavaScript on the second (helpdesk) app is trying to access the first app via window.opener (which could lead to the cross-origin error you're seeing) and subsequent JavaScript (fetching stuff via AJAX) is then not getting executed. You can probably narrow things down by setting appropriate breakpoints in the second app.
If this is the cause and you can't modify the source for the helpdesk app, how about going to a URL in the internal domain that would then redirect to the help desk? The redirect should cause the window.opener property to become null (same as manually typing in the URL).
Assuming https://admin.mydomain.co.uk and http://helpdesk.mydomain.co.uk, clicking on the "Help Ticket" link would go to a URL in the internal app, e.g. https://admin.mydomain.co.uk/getHelp?ticketId, which would respond with a 301 response and an appropriate Location: http://helpdesk.domain.uk/help/ticketId header taking the user to the actual helpdesk URL.

You could use a proxy server or iframe proxying.

Use the following url //app2.mydomain.co.uk without the http or https.

It's not only a cross domain problem but a protocol issue :
You can't embed https into http page without this warning.
Consider using iframe inside your App1 :
<iframe src="https://app2.mydomain.co.uk" ></iframe>
Or maybe you can use CORS to access data between your two domains ( but i think it's not the point, you want the whole App2 page, isn't it ? )
Edit : By re-reading your question, i'm pretty sure of two thing :
You're not looking at the right direction. You say App2 don't use SSL, and that obviously false when Chrome say "Protocols must match"
It's not a "attach" or "detached" problem. If you put a link (blank or not) in a page, it can be load the new page without any problem, nor link with the referal page.
So my guess is : Your are calling App2 without SSL ( no https), BUT inside the App2, there is some https involved ( certainly some ajax query). So here is the problem : When you open the page without https, it's seem to load, but when the first https Ajax fires, it fail.
Try using https when calling your App2 url, and give us the result

My solution is this: in Application 1 you create a method your method that calling Application 2 on the server side, then you can use AJAX calling your method which will return result of Application 2.

Authenticate a facebook user in a Firefox plug-in

I'm trying to write a Firefox plug-in that accesses data from facebook.
Now I'm not sure how to get an access token.
I tried to implement the client side flow for desktop apps (with the fixed redirect uri), but the big problem I encounter there, is that JavaScript doesn't allow me to wait for the redirect to happen.
Any idea how this could be done?
As far as I understood it, because I don't have a webpage, the JavaScript API doesn't help much, right?

I guess that you are opening https://www.facebook.com/dialog/oauth in a browser tab to let the user log in and give you access. You don't need to pass a working redirect URL here, you can rather use something that will definitely not work, like http://my.extension.local/. Then you only need to detect when the tab gets redirected to that URL. If you have a classic extension, you register a progress listener on the <browser> element of that tab and look at onLocationChange() calls - once you see a location starting with http://my.extension.local/ you can cancel the request and close the tab, the necessary data is in the URL. If you use the Add-on SDK you can attach a ready event listener to the tab, something along these lines:
var tabs = require("tabs");
tabs.open({
url: "https://www.facebook.com/dialog/oauth?...",
inBackground: false,
onReady: function(tab)
{
if (tab.url.indexOf("http://my.extension.local/") == 0)
{
...
}
}
});

Checking if a website doesn't permit iframe embed

I am writing a simple lightbox-like plugin for my app, and I need to embed an iframe that is linked to an arbitrary page. The problem is, many web sites (for example, facebook, nytimes, and even stackoverflow) will check to see if is being embedded within a frame and if so, will refresh the page with itself as the parent page. This is a known issue, and I don't think there's anything that can be done about this. However, I would like the ability to know before hand if a site supports embed or not. If it doesn't, I'd like to open the page in a new tab/window instead of using an iframe.
Is there a trick that allows me to check this in javascript?
Maybe there is a server-side script that can check links to see if they permit an iframe embed?
I am developing a browser extension, so there is an opportunity to do something very creative. My extension is loaded on every page, so I'm thinking there's a way to pass a parameter in the iframe url that can be picked up by the extension if it destroys the iframe. Then I can add the domain to a list of sites that don't support iframe embed. This may work since extensions aren't loaded within iframes. I will work on this, but in the meantime....
Clarification:
I am willing to accept that there's no way to "bust" the "frame buster," i.e. I know that I can't display a page in an iframe that doesn't want to be in one. But I'd like for my app to fail gracefully, which means opening the link in a new window if iframe embed is not supported. Ideally, I'd like to check iframe embed support at runtime (javascript), but I can see a potential server-side solution using a proxy like suggested in the comments above. Hopefully, I can build a database of sites that don't allow iframe embed.

Check x-frame-options header by using following code
$url = "http://stackoverflow.com";
$header = get_headers($url, 1);
echo $header["X-Frame-Options"];
If return value DENY, SAMEORIGIN or ALLOW-FROM then you can't use iframe with that url.

Probably pretty late but what you need to do is make a request, likely from your server and look for the x-frame-options header. If it's there at all you can just open a new tab because if it is there is is one of the following: DENY, SAMEORIGIN, ALLOW-FROM. In any of these cases it's likely that you don't have access to open it in an iframe.

This subject has been discussed forever on the web with a particularly interesting (failed) attempt here:
Frame Buster Buster ... buster code needed
The bottom line is that even if you are able to construct a proxy that parses the contents of the page that you want in your iframe and removes the offending code before it is served to the iframe you may still come under "cease and desist" from the site if they get to hear about you doing it.
If you don't want your development to be widely available, you could probably get away with it. If you want your development to become popular, forget about it, and build a less underhand way of dealing with it.
Or develop it for mobile only... ;)
UPDATE: OK following on from your comment here's a bit of taster:
in javascript capture the click on the link
$("a").click(function(e){
preventDefault(e); // make sure the click doesn't happen
// call a server side script using ajax and pass the URL this.href
// return either a true or false; true = iframe breakout
// set the target attribute of the link to "_blank" for new window (if true)
// set the target attribute of the link to "yourframename" for iframe (if false)
// only now load the page in the new window or iframe
});
server side in PHP
$d = file_get_contents($url); // $url is the url your sent from the browser
// now parse $d to find .top .parent etc... in the <head></head> block
// return true or false