I'm just building an experimental personal site where I could log myself into gmail with the press of a button.
Everithing goes fine, when I manually go to the gmail site and type the javascript command into the url line like this and press enter:
javascript: document.getElementsByName('Email').item(0).value='name'; document.getElementsByName('Passwd').item(0).value='password'; document.getElementsByName('signIn').item(0).click(); void(0);
But when I try to do the same from a page, nothing happens... Can someone please help me out?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script>
var name = 'name';
function login(url1) {
win = window.open(url1, nome);
win.document.getElementsByName('Email').item(0).value='name';
win.document.getElementsByName('Passwd').item(0).value='password';
win.document.getElementsByName('signIn').item(0).click(); void(0);
}
</script>
</head>
<body>
<button id="buton1" onclick="login('https://accounts.google.com')">GMAIL LOGIN</button>
</body>
</html>
I've checked a lot of forums and answers, and it seemed that this method should work, but it doesn't.
Now imagine that your code was followed by similar code that would send lots of spam to people using your GMail account.
Cross domain DOM manipulation is forbidden by browsers as it would be a huge security hole.
The exception is postMessage, but that requires the cooperation of both sites.
You need a browser extension for this sort of thing.
Related
Google is mandating an upgrade to their authentication/authorization mechanism, deprecating their existing mechanism.
The entire "GoogleAuth" object and all methods is deprecated.
The migration guidelines provide old->new guidance and examples (many of which don't work as described, but that's another story).
The old GoogleAuth object had one particularly necessary method .getUserInfo().
The docs do not provide a migration path for most methods on this object, and not for this one. (The migration doc merely says "remove" with regard to this method.) None of the sample code in migration offer guidance for this.
There is a companion set of docs that describe a different code path, that seems not-entirely-compatible with the new Google Identity Service, and which suggests the user data is embedded in a JWT, but offers no guidance on how to decrypt that JWT.
My code for authenticating, authorizing, and accessing google's api's is more or less functional (still pops a dialog on every new page load, still working on that), but getting the user info has defeated me after scrutinizing every migration doc, code sample, and considerable searching.
Has anyone cracked this nut?
I am terribly afraid that the answer is so simple that I have spent a full day banging my head on my own stupidity.
I'm even more afraid it's not possible!
Yes, it is possible. I understand your frustration but your "question" is more about expressing your frustration instead of explaining what you've done so far so we can help you. However, let me try to provide as much help as possible.
As you already find out, the "Google Identity Services" is separating "Authorization" and "Authentication" into two different things. (In my personal opinion, this makes it harder for us developers, although they[google] claim is more secure but I don't see that).
I presume that you need the "Authentication" part since you need the user information. In that case, you have to follow the guide documented here.
If you will be using the "Sign In With Google" button or the "One Tap" prompt, is up to you. I decided to go with the "One Tap" prompt. Once you get back the credentials response, you have to decode the JWT that comes in the response. There are many JWT libraries you can use, for the purpose of this example, I am using this one: https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/8.0.20/jsrsasign-all-min.js, however is your responsibility to find a secure library that allows you to do that, hence Google is not recommending any.
Here is an example of the code I'm using:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/8.0.20/jsrsasign-all-min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<div id="signinBox"></div>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function () {
google.accounts.id.initialize({
client_id: 'blablabla.apps.googleusercontent.com',
callback: handleCredentialResponse,
ux_mode: "redirect",
prompt_parent_id: "signinBox",
context: "signin",
cancel_on_tap_outside: false,
auto_select: true
});
google.accounts.id.prompt((notification) => {
if(notification.isNotDisplayed() || notification.isSkippedMoment()) {
console.log("Prompt cancelled by user");
}
});
};
const handleCredentialResponse = (credsResponse)=>{
console.log(credsResponse);
var headerObj = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(credsResponse.credential.split(".")[0]));
var payloadObj = KJUR.jws.JWS.readSafeJSONString(b64utoutf8(credsResponse.credential.split(".")[1]));
console.log(headerObj);
console.log(payloadObj);
};
After running the above example, you will see the user information in the "payloadObj". It should have all the information as explained here.
I am trying to display content from json online on my HTML. It works fine on my laptop but on my phone browser (chrome) and my friends (opera) it doesn't work. I've checked the compatibility with it and it should be fine?
Heres my HTML that I'm using:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="15" >
<title>Alton Towers Predicted Queue Times</title>
</head>
<body>
<script>
fetch("https://queue-times.com/parks/1/queue_times.json")
.then(response => response.json())
.then(data => {document.querySelector("#name").innerText = data.lands[0].rides[0].name});
</script>
<h3><span id="name"></span></h3>
</body>
</html>
Any idea why this works on my laptop but not my phone?
Apparently the problem is a CORS issue. Since this is a third-party site that you do not have access to, you will need to implement a small server-side code that will receive a request, send its equivalent to the actual target, receive the target's response and send that back to the browser. For your small server-side code, that will act as a proxy you can easily set the appropriate CORS headers so you will be able to perform the requests.
This question already has answers here:
Google Apps Script does not load when embedded into iFrame
(1 answer)
How do I embed a standalone Google Apps Script web app that requires authorization into the new Google Sites?
(1 answer)
Closed 1 year ago.
I want to add web app in my website I try with frame tag
I deploy web app as
Execute as: User accessing the web app
Who has access: Anyone with Google account
so it required authentication before stating the app
so I get error in website like
Refused to display 'https://accounts.google.com/' in a frame because it set 'X-Frame-Options' to 'deny'.
so how can I solve this problem?
Error in website
Deploy Setting in Apps Script
App Script Code
1. code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getEmailID() {
return Session.getUser().getEmail();
}
2. index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Your Email ID is : <?= getEmailID() ?></h1>
</body>
</html>
Website on other domain Code on githiub
1. index.html
<!DOCTYPE html>
<html>
<head>
<title>Project 10</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style="margin:0;height: 100vh;width: 100vw;">
<iframe src="https://script.google.com/macros/s/AKfycby4yxHaRJW_CmoTiFgOEXQ0zeD36JPwU4dwzmmMTuJmzONEOto_aItCdD6vBQ3i57Ji/exec" height="100%" width="100%" frameborder="0" noresize="noresize"></iframe>
</body>
</html>
URL of Project
Website on other domain
Website on github domain = https://properson2020.github.io/project-10/
Website Code in github = https://github.com/properson2020/project-10
App Script
App script Web app = https://script.google.com/macros/s/AKfycby4yxHaRJW_CmoTiFgOEXQ0zeD36JPwU4dwzmmMTuJmzONEOto_aItCdD6vBQ3i57Ji/exec
Apps script code = https://script.google.com/d/1_o3_GmywWdyFRwjn6RtKdtBDujBhRtGyWW5FiWmnsELk7P-y7XhO064B/edit?usp=sharing
The getUser() method is deprecated.
Therefore, if you want to retrieve the active user's email address you will have to use either:
getActiveUser()
getEffectiveUser()
It is also important to keep in mind the following:
[getActiveUser()] Gets information about the current user. If security policies do not allow access to the user's identity, User.getEmail() returns a blank string.
Therefore, as long as the web app has been authorized by the user who runs it and the user has no security policies applied, you should be able to retrieve successfully the email address using getActiveUser().
Reference
Apps Script Session Class.
I'm trying to set up a SoundCloud SDK for a web application.
I've managed to get a pop up asking for authorisation with the following code, on clicking connect however it doesn't respond.
Can anyone see any problems with this?
Here is the Javascript.
SC.initialize({
client_id: 'mygeneratedid',
redirect_uri: 'file:///Users/simonmellows/Documents/Music%20Tech%20(Year%203)/Individual%20Project/Work/GUI%20Design.html'
});
// initiate auth popup
SC.connect().then(function() {
return SC.get('/me');
}).then(function(me) {
alert('Hello, ' + me.username);
});
Here is my callback.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
</body>
</html>
I'm running the file on my computer, it's not being hosted anywhere else. Does it need to be locally hosted? Or even on a remote server in order to work?
Any advice would be much appreciated. The above code is just what I've found from the documentation.
Thanks!
To start with the value you specify as the "redirect_uri" MUST match the value you enter as the Redirect URI for Authentication on your registered Apps page on soundcloud.com (this it the same place you can view you client id & client secret).
The redirect URI must be an address that soundcloud can resolve and access.
So I have a variable in my iframe like so:
<script>
var zipphone = "<?= $phone ?>";
</script>
Now I want to pass that variable to the parent frame after the iframe is loaded. What is the simplest way to do that?
If the pages are both on the same domain, you could call a function of the parent window:
window.parent.zipPhoneCallback(zipphone);
In the parent window, you could define a function like this:
function zipPhoneCallback(zipphone) {
((console&&console.log)||alert)("zipphone = " + zipphone);
}
Beware there seems to be a Chrome browser issue with addressing variables from webpages to or from IFRAMES. This issue appears in offline testing.
That aside, assuming your browser actually implements basic functions of Javascript, you address your variable from your main webpage using window.myiframename.zipphone
<IFRAME NAME="myiframename" SRC="myzipphoneiframefile.htm" ....
<script type="text/javascript">
<!--
// then whatever you do with your variable
// read it
var z = window.myiframename.zipphone;
// write to it
window.myiframename.zipphone = "....";
and so on.
Example.
DOC1.HTM contents -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOC1.HTM</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor=pink>
<h1>DOC1.HTM</h1>
<iframe name="iframename" src="doc2.htm"></iframe>
<p>
<br />
check variable
</p>
</body>
</html>
DOC2.HTM contents -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOC2.HTM</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor=red>
<script type="text/javascript">
var test_var="testing, testing . . .";
</script>
<h1>DOC2.HTM</h1>
</body>
</html>
That works beautifully even with older versions of Internet Explorer but try it when offline testing with Chrome and window.iframename.test_var appears to be undefined because of the Chrome issue.
Anyway, look out for future versions of Chrome fixing this because it is a lot of egg on Google's face while they haven't.
I have a work-around for this issue in Chrome offline testing.
Thanks to Lucy24 on WebmasterWorld for helping. http://www.webmasterworld.com/google_chrome/4689258.htm#msg4689342
This issue with Chrome arose when my javascript was being tested off line and files doc1.htm and doc2.htm are in the same folder on my PC.
Moving the doc1.htm & doc2.htm files to a folder where I test my server side php programs, which runs using Windows Internet Services Manager means I can address the files using h t t p : / / l o c a l h o s t addresses and bingo, Chrome behaves as it should have behaved in offline mode.
It is not "legitimate" in my opinion for Chrome's javascript not to be able to directly address files in the same offline folder.
There's absolutely no security issue when you are running your own javascript files on your own PC. Or if Chrome wanted to offer a security setting that allowed or disallowed offline IFRAME variable scoping then OK, that would be fine.
The error message is not at all clear I submit and Lucy24 did well to figure out what it meant.
If Internet Explorer and Firefox etc allow you to test your javascript offline then why not Chrome?
So well done Lucy24. Not so well done Chrome.