DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Ryan Doyle
Ryan Doyle

Posted on • Updated on

Make a Secure Browser?

Ok, so I’ve been working on a learning platform for making teacher created playlist of content. One of the next steps is to create some type of quiz situation.

As a teacher, I’ve used β€œlocked browsers” before, where once a student begins a quiz their browser locks and they cannot navigate away or open new tabs until they either finish the quiz or exit/end it.

My question is...is there any way to do this from a web dev perspective, or are people just straight up making their own browsers? I can’t seem to find any way to do this from my searching online.

Top comments (10)

Collapse
 
stereoplegic profile image
Mike Bybee • Edited on

As @patarapolw says, you're going to need something like Electron. At a minimum you'll need it in kiosk mode. Beyond that, you'll need native modules (C++ with electron-gyp, to access OS-level features), native utilities launched as child processes via the Node API, or both.

I did this for a large certification provider (relying on the "both" mentioned above, as we needed to detect things like use within a virtual machine), but it's been a while and several Electron versions since then.

Collapse
 
rsa profile image
Ranieri Althoff

See, a web page being able to even know if they are looking or not is a violation of privacy.

The best you can do is adding a listener to the beforeunload event, which will trigger before the user tries to close the tab, and one to the mouseout event for the document, which will trigger when the mouse leaves the viewport. However, both of those can be disabled/blocked by the user.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

Cannot navigate is just window.beforeunload.

Cannot open new tabs is just impossible. You will need Electron or similar platforms.

Collapse
 
gwutama profile image
Galuh Utama

Well, people don’t just straight up making their own browsers. Instead, the most ideal solution is to extend/use existing frameworks that provides web browser functionalities: Qt, GTK, CEF (chromium embedded framework), .net to name a few. Some of them have bindings for different languages.

Collapse
 
corentinbettiol profile image
Corentin Bettiol • Edited on

I think you can use a PWA for this, which will launch the browser without the url or tab available :)

(Or as Mike said, use a browser in kiosk mode)

Collapse
 
stereoplegic profile image
Mike Bybee • Edited on

Unfortunately, it's not that simple. A PWA can still be opened in a tab in a normal browser window (at least I'm not aware of controls to prevent this), and browser kiosk mode still allows other tabs to be open (and at least with hot corners and virtual desktops in MacOS or Linux, you can navigate to other app windows). I was referring to Electron's kiosk mode, which can be restricted a little more IIRC (but it's still not enough to prevent all attempts to navigate away from it, or at least wasn't when I worked on such an app in v6 or v7 IIRC).

Collapse
 
doylecodes profile image
Ryan Doyle Author

Looks like I’ll have to look more into using electron. In the meantime maybe a PWA and kiosk mode could sold some use cases.

Collapse
 
jwp profile image
John Peters • Edited on

I've created specific browsers before. Here's how it's done

  • Find an embeddable browser (Chrome has one)
  • Put that into a desktop application; can be native or Electron. If you use Electron it already has an embedded browser.
  • Learn the browser interface and the application can control what it does.
  • For example you can create an array of allowed sites or pages and block anything else.
  • Make your application show all the links in the exam.
Collapse
 
pentacular profile image
pentacular

Why do you care if they navigate away?

What is the actual problem that you're trying to solve here? :)

Collapse
 
doylecodes profile image
Ryan Doyle Author

The point isn’t navigating away so much as leaving the testing environment. (Cheat) the point us to have the same screen/tab until they choose to end a test, either by finishing it or ending it themselves. That way they can’t go off looking things up.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›