Using JS to create a "link" to a password protected site - javascript

Quite a few of the sites that the schools I work in use have user accounts to protect the content from people who haven't paid for it which means that the users (aged 5+) have to type in some pretty weird usernames/passwords before they can do their work.
I was wondering if it possible to use Javascript to create a page that would let me do something along the lines of:
Fetch the Login Page
Fill out the form
Submit It
Redirect the user to the site
1-3 would happen in the background without the user seeing it.
In most cases these accounts are shared and the details are on displays etc... in the classrooms so there is no issue with the details being publicly accessible.
I have used Mechanize in ruby before and would imagine a solution like it but running client side.
I know that some inspection of the target site will be needed but once I have an in-principle example I should be able to tailor it to each site later.

If you have a standardized browser, you should consider building a plugin for that browser, that's the easiest way to interact with the web pages. Otherwise you'll get into issues with anti-CSRF protections and cross-domain-policies.
As for the language, Chrome extensions are written in javascript and are pretty easy to build. For the other browsers I don't know.

Related

Is there a way sending email using "mailto" with a code that checks if the user has a gmail or outlook (or other) account?

I want users on my website to contact me via email, and I want to make that easy and super user friendly for them.
Is there a way to identify with that email they are using? Because the default setting to this is Outlook. The other option is when a user changed his browsers settings/has an extension that navigates to Gmail (for example) instead of Outlook (http://blog.hubspot.com/marketing/set-gmail-as-browser-default-email-client-ht).
But for users who don't, is there an other way to do that?
It's a Wordpress website (PHP) and I usually code with PHP and JS (jQuery).
I've run mailto links on many computers, for testing (for another project), and generally, the mailto link does open their default email program, without any plugins or anything. It may be different on Windows, but on Linux, Chrome OS, and Mac OS X, this is true. The possible reason that it is different on Windows is that all of the Microsoft products that come with windows are very tightly integrated into the system, and you can't truly change the default email program on Windows. But AFAIK the mailto link works the way you want it to on most operating systems.
This is maybe not the answer you want, but have you considered setting up a contact form on your website? like this.
This woud probably be the most easy way to let someone contact you without fiddling with external programms. You also woud have more controll about selectable topics and email-format.
Well, you can most definitely detect the provider they're using with simple regex. However, this will not work with people using, say, Google Apps. If you just want to recognise the domain used, you can always do something like:
$matches = array();
preg_match("/#(.*)/", "test#example.com", $matches);
return $matches[1];
However, this will only recognise the provider, not allow you to force another service. As already mentioned, I would suggest using a contact form instead of mailto.

Securely Embeddable code in Websites

I am making a website which allows users to create ads, apps, etc. Think of it like Adsense for ads and Facebook apps for apps.
So, I am allowing the users to create ads or apps the way they want using either tools provided or through their own HTML code which will then be rendered as ads and apps in the website for other users to see.
My Problem:
1) When I allow users to add their own code which is to be embedded in the website, am I exposing my website to security risks? (I am not sure but I think they will be able to add some malicious code in javascript)
2) If I think of isolating the embedded code from rest of the website using Iframes, will that be a problem or is there any better way to do this?
What I want to achieve:
Some sort of element to render user generated custom HTML, CSS code in a website without affecting security.
Depending on the types of ads or apps they are allowed to make and what languages they can use you can be at risk in a few ways especially if other users can see it.
Let's assume they can use html and they add this code
<img src='fake.jpg' onerror='alert("xss");'>
In this scenario all of your users who can see this are exposed to an xss attack. If this is the case, see this post -> How can I allow my user to insert HTML code, without risks?
I would not recommend server side languages and while iframes may inherently be more secure, the same thing applies, especially if your domain hosts the iframe. If the iframe src is on the same domain as where the iframe is displayed you can toss out any security iframes may pretend to offer.
The best solution is to offer your own wysiwyg editor where your special codes are turned into html code. Allowing JS is going to be something you want to consider doing in a safe way, this could be done through creating your own wrapper (even wrapping a series of jquery functions in a wrapper) and including them in your wysiwyg cleverly.

Getting camera and geolocation permission ahead of time

I'm building a web-app that uses the device's camera and location services. The browser (I'm sticking to Chrome for now) asks the user for permission to do so on the page where the service is used.
I want the interface to be able to ask for permission at an early stage in the workflow so the pop-up dialogs don't come up during the use of the app. I know they would go away after the first visit to a page, but I want to avoid it the first time too.
Javascript is pretty much the only tool I know how to use, and I know each page has a separate Javascript execution context, so I can't get references to the objects on one page and hand them over to another.
So is there a way that will work? Maybe I need to learn some other technology?
If you need to do it in the browser, then I would suggest creating a sort of initialization page before going to the actual app page.
In the ini page you can call all permissions and download+cache all needed app scripts and also validate which permissions were accepted and not. Kinda something like when using GMail you go through their ini page first before getting to the actual GMail ui.
Once the ini page has completely loaded simply redirect to the actual app.
If you want to do it outside the browser and still use the same web technologies, take a look at Electron or NW.js.
Both tools above lets you build cross platform desktop apps with web technologies. Things like asking for camera and geolocation can be done without user permission (as I recall. not sure)

Can I change the 'window.location' property inside a Bookmarklet and then continue doing things on the new document?

I want know if you can guide to users for a series of steps that imply visit different web pages using actions inside a Bookmarklet. What I want is a kind of Wizard or automated actions cross web pages.
Afraid not. What you're describing would actually be very dangerous. If there were any malicious code in the bookmarklet, it would have access to every site you are logged into, email, amazon etc. Some pseudocode for an attack could look like this:
window.location = "www.gmail.com";
ajax.post("www.gmail.com/deleteAllMail");
window.location = "www.amazon.com";
ajax.post("www.amazon.com/buyReallyExpensiveStuff");
You partially can, if you open the new pages inside an iframe. However, you won't be able to modifying the content of the webpages anymore, but just modifying the url of the iframe, and going through different websites (like a kind of slideshow).
Notice that if you're the owner of the pages, you can use postMessage to interact with them, even if they're in different domains.
Or, you could do a "tunneling" on server side, and inject each team you got the page back with the JS you need.
But probably the cleanest approach if you're not the owner of the pages is just create a simple restartless add-on for the browsers you want to support.

How to check the authenticity of a Chrome extension?

The Context:
You have a web server which has to provide an exclusive content only if your client has your specific Chrome extension installed.
You have two possibilities to provide the Chrome extension package:
From the Chrome Web Store
From your own server
The problem:
There is a plethora of solutions allowing to know that a Chrome extension is installed:
Inserting an element when a web page is loaded by using Content Scripts.
Sending specific headers to the server by using Web Requests.
Etc.
But there seems to be no solution to check if the Chrome extension which is interacting with your web page is genuine.
Indeed, as the source code of the Chrome extension can be viewed and copied by anyone who want to, there seems to be no way to know if the current Chrome extension interacting with your web page is the one you have published or a cloned version (and maybe somewhat altered) by another person.
It seems that you are only able to know that some Chrome extension is interacting with your web page in an "expected way" but you cannot verify its authenticity.
The solution?
One solution may consist in using information contained in the Chrome extension package and which cannot be altered or copied by anyone else:
Sending the Chrome extension's ID to the server? But how?
The ID has to be sent by you and your JavaScript code and there seems to be no way to do it with an "internal" Chrome function.
So if someone else just send the same ID to your server (some kind of Chrome extension's ID spoofing) then your server will consider his Chrome extension as a genuine one!
Using the private key which served when you packaged the application? But how?
There seems to be no way to access or use in any way this key programmatically!
One other solution my consist in using NPAPI Plugins and embed authentication methods like GPG, etc. But this solution is not desirable mostly because of the big "Warning" section of its API's doc.
Is there any other solution?
Notes
This question attempts to raise a real security problem in the Chrome extension's API: How to check the authenticity of your Chrome extension when it comes to interact with your services.
If there are any missing possibilities, or any misunderstandings please feel free to ask me in comments.
I'm sorry to say but this problem as posed by you is in essence unsolvable because of one simple problem: You can't trust the client. And since the client can see the code then you can't solve the problem.
Any information coming from the client side can be replicated by other means. It is essentially the same problem as trying to prove that when a user logs into their account it is actually the user not somebody else who found out or was given their username and password.
The internet security models are built around 2 parties trying to communicate without a third party being able to imitate one, modify or listen the conversation. Without hiding the source code of the extension the client becomes indistinguishable from the third party (A file among copies - no way to determine which is which).
If the source code is hidden it becomes a whole other story. Now the user or malicious party doesn't have access to the secrets the real client knows and all the regular security models apply. However it is doubtful that Chrome will allow hidden source code in extensions, because it would produce other security issues.
Some source code can be hidden using NPAPI Plugins as you stated, but it comes with a price as you already know.
Coming back to the current state of things:
Now it becomes a question of what is meant by interaction.
If interaction means that while the user is on the page you want to know if it is your extension or some other then the closest you can get is to list your page in the extensions manifest under app section as documented here
This will allow you to ask on the page if the app is installed by using
chrome.app.isInstalled
This will return boolean showing wether your app is installed or not. The command is documented here
However this does not really solve the problem, since the extension may be installed, but not enabled and there is another extension mocking the communication with your site.
Furthermore the validation is on the client side so any function that uses that validation can be overwritten to ignore the result of this variable.
If however the interaction means making XMLHttpRequests then you are out of luck. Can't be done using current methods because of the visibility of source code as discussed above.
However if it is limiting your sites usability to authorized entities I suggest using regular means of authentication: having the user log in will allow you to create a session. This session will be propagated to all requests made by the extension so you are down to regular client log in trust issues like account sharing etc. These can of course be managed by making the user log in say via their Google account, which most are reluctant to share and further mitigated by blocking accounts that seem to be misused.
I would suggest to do something similar to what Git utilises(have a look at http://git-scm.com/book/en/Git-Internals-Git-Objects to understand how git implements it), i.e.
Creating SHA1 values of the content of every file in your
chrome-extension and then re-create another SHA1 value of the
concatenated SHA1 values obtained earlier.
In this way, you can share the SHA1 value with your server and authenticate your extension, as the SHA1 value will change just in case any person, changes any of your file.
Explaining it in more detail with some pseudo code:
function get_authentication_key(){
var files = get_all_files_in_extension,
concatenated_sha_values = '',
authentication_key;
for(file in files){
concatenated_sha_values += Digest::SHA1.hexdigest(get_file_content(file));
}
$.ajax({
url: 'http://example.com/getauthkey',
type: 'post'
async: false,
success:function(data){
authentication_key = data;
}
})
//You may return either SHA value of concatenated values or return the concatenated SHA values
return authentication_key;
}
// Server side code
get('/getauthkey') do
// One can apply several type of encryption algos on the string passed, to make it unbreakable
authentication_key = Digest::<encryption>.hexdigest($_GET['string']);
return authentication_key;
end
This method allows you to check if any kind of file has been changed maybe an image file or a video file or any other file. Would be glad to know if this thing can be broken as well.

Categories

Resources