Develop Reference

Vanilla JS Single Sign-On attempt with MSAL.js leading to pop-up window showing a copy of the same page

I've copied the example app at this repository to try to implement single sign-on: https://github.com/Azure-Samples/ms-identity-javascript-v2. I've changed the config values match those of the Azure configuration. I'm using the public version of the authority: "https://login.microsoftonline.com/[APP VALUE HERE]" in this configuration as well.
For additional background - I had previously not had the redirectURL correctly matching, and the popup window from running the example showed my user account name before failing with an error. From this I take it to mean that the sign-on itself was successful in recognizing me, and that any problems are happening after that point.
The problem I'm running into now is that the SSO popup just loads an exact copy of the page that I used to launch the request in the first place - exact same display and everything. My logging shows that the request to myMSALObj.loginPopup({scopes: ["User.Read"]}) never completes, it simply hangs until I close the popup window, at which point it fails into the catch block for that request with the following error: "BrowserAuthError: user_cancelled: User cancelled the flow."
So it seems like the process is waiting for some step that never occurs, presumably coming as part of the call within the popup window. Has anyone else encountered this issue before? Does anyone have any recommendation for how to fix it or how to dig deeper into what's occurring?

This usually happens if the page you use as your redirectUri is either clearing the url hash on load or redirecting to another page on load. We usually recommend people use a blank page that doesn't implement any logic as their redirectUri to avoid issues like this. If that's not possible try to see what might be causing the server response to be removed from the popup.

When moving to new URL with Chrome console, is there a way to keep variables alive?

I'm totally new to JavaScript either Chrome console.
My search of the literature was not enough to answer the question.
But I found it is hard to find any previous questions which tell me "How to prevent variable flushing(?) when you move to new URL in Chrome console".
For example, Let's say right now I'm in Google Starting Page ("https://www.google.com/")
Then I open Chrome console, make integer variable and function like this...
a = 10
function myFunc(){
console.log("Hello")
}
After that, I move to Yahoo homepage with this code
this.document.location = "https://www.yahoo.com/"
Then, as you can expect, my previously defined variable and function are GONE.
When I try to call my previous variable a in Yahoo,
Uncaught ReferenceError: a is not defined
at <anonymous>:1:1
Until now I'm stuck on this problem.
I wonder how to tell browser to keep variables and functions alive whenever moving to new URL?

All you do in the console, you do in the context of the current page (its window global object and local scope). If you change the page, this context is gone.
But you can quickly re-initialize the state if you use a scratchpad script in the "Sources" tab (and "Snippets" subtab) of the developer tools. Just create a new script and press Ctrl+S. Then you can select "Run" in the context menu of this script each time the page is changed and the state will be re-created:

No you can't, however If you wanna "save" some values you can send them to your server (as ajax request with json) or put them as your link parameter e.g. https://your.server.com/save?a=valueOfA (of course that server must support this parameter and return response which will set proper values to proper variables)

you can use localStorge() to save data on client browser it wont work for function tho just wanted to mention it

Cross-origin security error when moving an application to a subdomain (2018)

Background information: We have a platform which runs on https://system.example.com. This platform consists of 10 separate web applications (all written in PHP and JS). Each application has historically been in a sub-directory within the same subdomain:
https://system.example.com/app1/
https://system.example.com/app2/
...
https://system.example.com/app10/
We are in the process of rebuilding one of the applications, app2, and have decided to host this on a new separate subdomain, https://app2.example.com.
Part of the app2 application uses JavaScript to open a pop-up window for app10. Most functionality inside this popup works as expected. However, when attempting to use a "Save" button inside the popup my browser console was showing:
Uncaught DOMException: Blocked a frame with origin "https://app2.example.com" from accessing a cross-origin frame.
at https://system.example.com/app10/manage.php:1:334
I have read both SecurityError: Blocked a frame with origin from accessing a cross-origin frame and https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage but still unclear as to how to fix this.
The code and process I have is as follows:
The popup is opened from https://app2.example.com by a button which has an onclick event handler:
<button onclick="postToPopUp('https://system.example.com/app10/manage.php', 'fileManage', 'width=800px,height=600px', ['f_id', '123'], 'app2', 'filesCallbackManage')">Open app10</button>
The postToPopup() function is used to pass POST data from app2 into https://system.example.com/app10/manage.php based on Javascript window.open pass values using POST - this works fine.
The problem occurs when I click a "Save" button inside the popup which renders the following markup within the popup window:
<!doctype HTML><html><head><title>upload</title>
<script type="text/javascript" language="javascript" charset="utf-8">
var fileObject = {"files":{"0":{"f_id":"1784","f_title":"test07.pdf"},"f_id":123}};
window.opener.filesCallbackManage(fileObject);
window.close();
</script><body></body></html>
What this did originally - when everything was under the same subdomain - was called a js function filesCallbackManage() which resided in the code for https://system.example.com/app2. The function itself was passed an object, fileObject, which updated various parts of the UI inside app2. The popup was closed after clicking the Save button due to window.close();
Although I've read about using postMessage I don't understand how this fits in or whether this is even the correct solution to my problem? The data is being posted from the subdomain https://app2.example.com to https://system.example.com/app10 correctly. The problem is that filesCallbackManage() won't fire because of the cross origin restriction. Inside my code for https://app2.example.com I have a simple statement to see if it's firing:
function filesCallbackManage(data)
{
console.log('filesCallbackManage has fired');
}
This never fires because of the problem I have. I get the console error mentioned previously and a blank popup window (technically this is correct since there is nothing in the <body> tag in the above markup) but the window doesn't close and the callback isn't fired.
The example given on the Mozilla website isn't extensive enough to understand how it can be adapted to this type of scenario. Please can someone elaborate? Furthermore, the linked Stack Overflow post is four years old so I want to be sure anything I put on this is secure and up-to-date.

The postToPopup() function is used to pass POST data
Submitting a form across origins is fine. So you can do this.
The problem occurs when I click a "Save" button inside the popup
You're trying to access the DOM of the window across origins. This is forbidden.
Although I've read about using postMessage I don't understand how this fits in or whether this is even the correct solution to my problem?
postMessage is as close as you can get to accessing the DOM of a window across origins.
You can't do this.
var fileObject = {"files":{"0":{"f_id":"1784","f_title":"test07.pdf"},"f_id":123}};
window.opener.filesCallbackManage(fileObject);
Instead you have to send a message:
window.opener.postMessage(fileObject, "https://system.example.com");
And have code which listens for it:
addEventListener("message", receiveMessage);
function receiveMessage(event) {
if (event.origin !== "http://app2.example.com") { return false; }
filesCallbackManage(event.data);
}

Execute command on another tab

I'm new at JavaScript, so can someone help me? How can I execute a command on another tab? For example, I have opened new tab from my main tab and opened translate.com (just for textbox) on it, and the problem is I don't know how to put text in search textbox?
I open the page with this command:
var page = window.open('https://www.translate.com/');
On the page, I can enter text with this code:
$string1 = $("#source_text");
$string1.val("text");
I have tried this, but this code doesn't work the way I want it to.
var page = window.open('https://www.translate.com/');
setTimeout(function(){page.f1()},20000);
setTimeout(function(){page.close()},30000);
function f1() {
$string1 = $("#source_text");
$string1.val("ka tu");
}

I find the function that you are trying to run very abnormal. So, let's start with small steps.
The page.close() function is perfect you can do that and it works. The other part won't work first of all because the page object created by window.open has no function called f1 on it.
Furthermore it is very important from where you are trying to run the script on the other window you always must take into consideration the cross-origin limitations. Easily explained if you try to run a function from a google.com tab on a separate window yahoo.com it won't work this is a security issue.
In order to run function f1 in that window it is important that f1 function is declared globally and ussualy you try and do this the following way page.window.f1() - and there you have it. So for example your code would be
page.window.$("#source_text").val('something');
refactoring your code would be like this:
var page = window.open('https://www.translate.com/');
setTimeout(function(){ page.window.$("#source_text").val('something');},20000);
setTimeout(function(){page.close()},30000);
open translate.com in a tab open dev tools in chrome and paste the above code in the console tab and see the results, it will work.
I recommend that before running code in another window you should check that that window is loaded first of all (in your case works) because of the long timeout.
A better solution would be using HTML5's postMessage API: check this link here for a good tutorial: https://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/ - also this meens of course that the window you are opening is listening for some sort of postMessages.
In general you do this things with hosts that you manage and not other hosts because it might not work always. Also it will always work if you are on a host and open the same host in another window otherwise you end up with this security error: VM88:2 Uncaught SecurityError: Blocked a frame with origin "https://some_other_host" from accessing a frame with origin "https://www.translate.com". Protocols, domains, and ports must match.
Hope this helps, and you understand the way it works now.
Cheers

Capturing JS errors in Chrome

I'm capturing js errors in the application with window.onerror, but the thing is - in Chrome if dev tools isn't opened - then the url parameter passed to onerror handler always equals to the opened url.
While if dev tools is opened - then the url points to the exact .js file the caused the js error.
How do you deal with it? Are there any workarounds?
And to be more clear - here are 2 results:
Uncaught ReferenceError: a is not defined index:122 - this was received after fetching a page
Uncaught ReferenceError: a is not defined List.js:122 - this was received after fetching the same page with dev tools opened. This is an expected result - I've put a(); call to the List.js file for testing.
UPD: this is done for functional testing (using selenium webdriver) - I want to capture js errors for further investigations.

Let's pose the following architecture:
window.addEventListener("error", handleException, false);
function handleException(I_sMsg) {
if (I_sMsg.stack) {
sMsg = I_sMsg.stack.replaceAll(getBaseURL(), "");
alert(sMsg);
} else if (I_sMsg.message) {
alert(I_sMsg.message);
}
return cancelEvent(I_sMsg);
}
Now any throw new Error("description"); will go through the first part of the if statement and have a nice stack for you to parse with the urls.
It also works for unexpected exceptions, having as a result the following message (in this case after calling the unexisting bibi() function)
After further investigation, my framework is using some kind of home made job management (as shown in the stack actually) where every single action belongs to a job.
The job execution method is the following (simplified)
try {
oTask.func.apply(oTask.obj, oTask.prms);
} catch(ex) {
handleException(ex);
return false;
}
So it means every single execution is encapsulated within this single try catch block. As you see, the exception is caught, and passed to the handler. Not the error.
I though it was working in the other file but it was because the call was encapsulated, while within the api.js file directly it was a free call not managed by the framework.

More of a something to try answer really but it might help.
Chrome recently added chrome://inspect/ to the list of handy URLs (see chrome://chrome-urls/ for the complete list). I cannot find the tweet or blog post I read about this unfortunately but I think it was within the last month. The URL works on Chrome 28 for sure.
chrome://inspect/ lists all open tabs with an inspect link which redirects back to the existing open page but also opens DevTools.
I'm thinking that the selenium test could open the site under test in one tab and in a second tab open the inspect page, follow the inspect link back to the test page but this time with DevTools open, allowing window.onerror to capture better errors.
Something like:
document.getElementsByClassName('row')[n].getElementsByTagName('a')[0].click()