HTML transient modal window - javascript

We have a legacy web application. At various places it opens a window with the help of Privilege Manager on Firefox to get the needed result.
Some of these windows open a Java applet or a PDF document.
The client machines are updating Firefox and Privilege Manager is gone.
What is the easiest way around it?
The problems are :
There must be only one instance of the pop-up at anyone time. This could be done by selecting appropriate window name on window.open() call.
If the window is opened again (by means of user action), it should not reload but just focus to bring it to the foreground (I have seen I can keep a reference to the window on JavaScript to do that)
It basically really must be transient/modal so that the client cannot leave the current page or reload or any other kind of interaction with the parent window (except opening/refocusing the child window) without closing the child window first. I have no idea how to do that.
Do anyone has an idea how to do that?
The client is only Firefox (it works in a special kiosk configuration) on Linux.
I read somewhere that I could somehow write an extension but I am basically clueless about extensions and its API.
Edit1:
Example of (simplified) legacy code. Not really sure if all the permissions were required, but this is it: This function opens a window that stays over the parent window and prevents any interaction from the user with the parent window.
function fWindowOpen(url, name) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
netscape.security.PrivilegeManager
.enablePrivilege("CapabilityPreferencesAccess");
netscape.security.PrivilegeManager
.enablePrivilege("UniversalPreferencesWrite");
netscape.security.PrivilegeManager
.enablePrivilege("UniversalPreferencesRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalFileRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
window.open(
url,
name,
"screenX=70,dependent=yes,menubar=0,toolbar=0,width=900,height=700,modal=1,dialog=1"
);
}
function fnCapture(){
fWindowOpen("/path/to/document_or_japplet/page","_blank");
}
HTML:
<button value="Capture" property="btnCapture" onclick="javascript:fnCapture();"/>
Edit2: Solution
On a typical extension, on the xul code, define this javascript code:
var dialogExt = {
listener: function(evt) {
// Do work with parameters read through evt.target.getAttribute("attribute_name")
window.openDialog(evt.target.getAttribute("url"), evt.target.getAttribute("name"), evt.target.getAttribute("features"));
}
}
// from examples
document.addEventListener("dialogExtEvent", function(e){ dialogExt.listener(e); }, false, true);
Then, on the web page:
var element = document.createElement("dialogExtElement");
element.setAttribute("url", url);
element.setAttribute("name", name);
element.setAttribute("features", features);
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("dialogExtEvent", true, false);
element.dispatchEvent(evt);
Now, maybe I am missing some security checks to let the code work if it originates from the same host, and how to handle a reference to the document that requested the dialog as means of interaction between the dialog window and it's opener.

The Privilege Manager was deprecated in Firefox 12 and removed in Firefox 17 (briefly restored).
You might want to look into Window.showModalDialog(). However, it is deprecated and is expected to go away within the year, or in 2016 if you go with an extended service release (ESR) of Firefox 38. It may be a temporary solution while you develop an extension.
In order to accomplish the same tasks, you will need to write an extension and ask the user to install it (from Bypassing Security Restrictions and Signing Code, the old information about Privilege Manager):
Sites that require additional permissions should now ask Firefox users to install an extension, which can interact with non-privileged pages if needed.
It is possible to write such an extension using any of the three different extension types:
XUL overlay
Restartless/Bootstrap
Add-on SDK
For the first two types, you would use window.open(). The modal option is in "Features requiring privileges". You will probably also want to look at Window.openDialog().
For the Add-on SDK, you would normally use the open() function in the SDK's window/utils module. Here, again, you will probably want to look at openDialog().
It appears you may be opening content that is supplied from the web in these modal windows. It is unlikely that you will get an extension approved to be hosted on AMO which opens content in such windows which in not included in the add-on release. This does not mean you can not develop the extension and have it installed on your kiosk clients without hosting it on AMO. However, there are additional restrictions in development for Firefox this year which will make this significantly more difficult, see: "Introducing Extension Signing: A Safer Add-on Experience".

You should be able to get similiar window.open behavior, including support for the modal option from the sdk's window/utils module.
You will have to install the onclick listener with a content script, send a message to the addon-main through its port and then open that window from the addon main.

Related

Cannot get reference to one page from another

I am working on a web app that needs to have two parts. The one is a controller and the other is a display. Something like Google Slides in presentation mode. The controller has a button to launch the display:
<script language="JavaScript">
function OpenMain()
{
var MainPage = window.open("TheUltraSignalLite.html");
TimerIMG = MainPage.document.getElementById("TimerIMG");
TimerIMG.src = "TM-Full-Blue.jpg";
}
</Script>
The call to window.open seems to return null. I have tried Chrome, Edge, Firefox, and Opera and they all have the result. These are all local files for now, but I might put in on a web server someday. I have seen some answers that want you to turn off security, but I cannot ask everyone who uses this app to turn off security. How do I get a valid reference to the display window?
Edit 1:
Yes, window.open from the local disk does cause a CORS restriction.
I tried this where both files are in the same AWS S3 Bucket, so the CORS should not be an issue. But I still get a null on the window.open. If I put a breakpoint on the first line, then everything worked. If I split the open and the rest of the code into two functions with two buttons, it works. So it looks like I have to find a way to run the open in an async way.
Edit 2
My solution to keep it simple was to put the window.open in the OnLoad event. This opens the child window and allows it to fully render and the value of MainPage is ready to use. (I changed the MainPage to a global variable.) I still have to run it from some type of web server, rather than loacl file, but that is not a big deal.
If you are not allowed to access the new window content, then the problem you are encountering is a basic security feature of web browsers. Citing mdn:
The returned reference can be used to access properties and methods of the new window as long as it complies with Same-origin policy security requirements
To read more about Same-origin policy
If your new window respects the Same-origin policy, then you can access the content of the new window with for example:
// Open index.html from the current origin
const newWindow = window.open('index.html')
const h1 = newWindow.document.querySelector('h1')
If you want to avoid asking users for pop-up permission, then you should probably use a link instead of a pop-up.

How to check if a Firefox WebExtension is installed or not with page JavaScript?

I have developed a WebExtension for Firefox and my website works with the extension as a prerequisite. I need to check programmatically whether the extension is installed or not and if not ask the user to install it.
I am not able to find a way how to check this operation of whether my extension is already installed in the user's browser.
Editor note: Methods available in Firefox differ from those available in Chrome, so this question is not a duplicate.
Important note to begin with: A page can't query if an extension is installed without explicit help from the extension. This is done to prevent browser fingerprinting and/or preventing sites from denying content if certain extensions are installed.
WebExtensions are largely built upon the same principles as Chrome extensions. As such, this question is relevant: Check whether user has a Chrome extension installed.
However, some of the best methods available in Chrome are currently unavailable in Firefox:
You can't use external messaging from a webpage (through externally_connectable) as it's not available in FF.
You can't use web-accessible resources for checking presence since Firefox intentionally shields them from fingerprinting:
The files will then be available using a URL like:
moz-extension://<random-UUID>/<path/to/resource>
This UUID is randomly generated for every browser instance and is not your extension's ID. This prevents websites from fingerprinting the extensions a user has installed.
As such, what are your options? The page can't talk directly to the extension context (background), and the background can't directly affect the page; you need a Content script to interact with the page content.
How can page code and a content script communicate? They are isolated from each other unless content script does something about it.
First off, generic tricks that work in both FF and Chrome:
You can create or modify a DOM element on the page from a content script and look for those modifications in the page.
// Content script
let beacon = document.createElement("div");
beacon.classname = browser.runtime.id;
document.body.appendChild(beacon);
// Page script
// Make sure this runs after the extension code
if (document.getElementsByClassName("expected-extension-id").length) {
// Installed
} else {
// Not installed
}
You can use postMessage to communicate between contexts, though it's clunky to use as a bidirectional channel.
Here's documentation and sample WebExtension.
// Content script code
window.postMessage({
direction: "from-content-script",
message: "Message from extension"
}, "*");
// Page code
window.addEventListener("message", function(event) {
if (event.source == window &&
event.data.direction &&
event.data.direction == "from-content-script") {
// Assume extension is now installed
}
});
You can use custom DOM events in a similar way.
There are interesting Firefox-specific approaches as well:
You can share code with the page using exportFunction or cloneInto:
// Content script
function usefulFunction() {
/* ... */
}
const extensionInterface = {
usefulFunction
}
window.wrappedJSObject.extensionInterface =
cloneInto(extensionInterface, window, {cloneFunctions: true});
// Page code
if (typeof window.extensionInterface !== "undefined") {
// Installed
window.extensionInterface.usefulFunction();
} else {
// Not installed
}

How to add "open link in app mode" to right-click menu in chrome?

app mode: chrome window without navigation panel(address+tab bars). Run this in terminal
google-chrome --app=http://stackoverflow.com/
I want to open a website in app mode directly from chrome. Is there an extension that adds such option? If not how do I write a small extension that does just that? I never wrote a chrome extension but I have some experience with html and javascript. Thanks
Edit: Main issue is chrome.windows.create has no "app" option for CreateType. I guess we can't do anything about it.
There is a way using chrome.management API.
chrome.management.generateAppForLink("http://stackoverflow.com/", "Stack Overflow", function(info) {
chrome.management.setLaunchType(info.id, "OPEN_AS_WINDOW", function() {
chrome.management.launchApp(info.id);
})
});
Note that the above code requires a user gesture (which is undocumented). For examples, see Invoking activeTab. Activating a context menu should be sufficient as a gesture.
However, this will create an app in the app launcher permanently. On the plus side, it will not create duplicates for the same URL/Title.
You can call chrome.management.uninstall(id), but it will require a confirmation from the user.

gInitialPages is not defined bootstrapped extensions

I am working on Firefox extension that overwrite new tab page and I need to hide my page URL from address bar. I use this code:
if (gInitialPages.indexOf(NEW_TAB_URL)===-1) gInitialPages.push(NEW_TAB_URL);
It works correctly in XUL Overlay code, but I'm getting an error when I try to make my application restartless and move this code to bootstrap.js:
gInitialPages is not defined
So, how can I use gInitialPages (or anything similar) in bootstrapped extensions?
Bootstrapped/restartless extensions do NOT automagically run in the context of (a) window(s).
bootstrap.js runs in an own context, only once per application instance, not in the browser window.
You'll need to:
Manually enumerate all existing browser windows.
Listen for new browser windows as they are opened.
And then manipulate the variable in those windows.
See Mardak's example on how you could do that, in particular watchWindows and unload.

is window.open("", ... impossible with firefox?

In firefox I have opened a locally stored file with the file:// protocol
(file:///c:/temp/foo.html)
foo.html contains Java Script which (among others) is supposed a new
window without URL:
var new_window = window.open("","", "height=100,left=50,width=200");
When this line is reached, Firefox displays this "Firefox prevented this site from opening a pop-up window". I don't understand why Firefox gives this warning, obviously, the file (foo.html) is under my control (since it's stored locally and I have opened it with the file:// protocol, and, additionally, the window to be opened doesn't point to any file that could contain any sensitive data, as the url parameter in the open method is set to "".
But besides all this, it seems I can't even force or allow firefox to open the window anyway. There's this "options" button on the yellow "Firefox prev...." bar which supposedly should allow to create exceptions, yet I can't.
So, the question basically boils down to: how can I allow a local html file to open an empty window with Javascript within Firefox.
Thanks / Rene
This is a Firefox security precaution, see this link:
http://kb.mozillazine.org/Links_to_local_pages_don't_work
However, it looks like this extension will allow you to override it:
https://addons.mozilla.org/en-US/firefox/addon/281
This is the popup blocker, which block popups not opened by an explicit user action like a click.
You cannot force it to open the popup, you need to allow Firefox to open it.
I suggest you to test the new_window variable to see if it is null. In this case, display a message to the user so that he allows the domain to open popup windows.

Categories