I am trying to create a javascript that will automatically press a submit button on a third party website. Basically, if I wanted to automatically log in to a site with a cookie filling in my username and password, for example a google account, the javascript would automatically press the submit button without me having to do it.
I guess what you're looking for is the .click() method that all buttons have. A more detailed explanation is below...
You can use a frameset with your JavaScript code in one frame and the third party page in another. For example:
<!-- Main page -->
<HTML><frameset rows="0,*">
<!-- You see your script page. To see the actual login page, swap the * and the 0. -->
<frame src="http://third.party.website.com/login/page.htm" name="theirframe" />
<frame src="myscript.html" name="myframe" />
</frameset></HTML>
And if the page you want to login to is like this (cleaned up from Gmail's login page, they have a lot of oddly-placed newlines and spaces!):
<!-- Third-party page -->
<div class="email-div">
<label for="Email"><strong class="email-label">Username</strong></label>
<input type="email" spellcheck="false" name="Email" id="Email" value="">
</div>
<div class="passwd-div">
<label for="Passwd"><strong class="passwd-label">Password</strong></label>
<input type="password" name="Passwd" id="Passwd">
</div>
<input type="submit" class="g-button g-button-submit" name="signIn" id="signIn" value="Sign in">
Then your script would probably be something like this:
<!-- Your script page (myscript.html) -->
<HTML><body>
<!-- Insert custom message here... -->
Logging you in......
<script>
//parent.theirframe.document.getElementById("Email").value = getemail();
//parent.theirframe.document.getElementById("Passwd").value = getpass();
parent.theirframe.document.getElementById("signIn").click();
</script>
<body></HTML>
If your browser is telling you that "The element with ID "Email" doesn't exist" or something, the your browser probably loaded your script page before the login page. In that case, you'll have to put the login page in a named iframe within your custom page and place your script after the iframe in the body of the page. If you do end up doing that, this page will help you out with accessing the iframe's content.
Hope this helps out.
Related
I am new to Brightspace and been fiddling with the remote plugins sample (logo). I can load the sample logo project, but cannot get it to insert into the page. I have uploaded the file but get a 404 error on submit. Can someone `
$( document ).ready(function() {
$('#submitFormButton').click( function() {
$.ajax({
url: "/getisfdetails",
data: {
image: $("input[name='image']:checked").val()
},
success: function(response){
$("input[name='lti_message_type']").val(response.lti_message_type);
$("input[name='lti_version']").val(response.lti_version);
$("input[name='content_items']").val(response.content_items);
$("input[name='oauth_version']").val(response.oauth_version);
$("input[name='oauth_nonce']").val(response.oauth_nonce);
$("input[name='oauth_timestamp']").val(response.oauth_timestamp);
$("input[name='oauth_consumer_key']").val(response.oauth_consumer_key);
$("input[name='oauth_callback']").val(response.oauth_callback);
$("input[name='oauth_signature_method']").val(response.oauth_signature_method);
$("input[name='oauth_signature']").val(response.oauth_signature);
$("#isfForm").prop('action', response.lti_return_url);
$("#isfForm").submit();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<body>
<h3>Select an logo:</h3>
<input type="radio" name="image" value="brightspace-logo.png"> <img src="../content/isf/brightspace-logo.png" alt="Brightspace Logo"><br />
<input type="radio" name="image" value="d2l-logo.png"> <img src="../content/isf/d2l-logo.png" alt="D2L Logo"><br />
<div hidden>
<form id="isfForm" method="POST">
<input type="hidden" name="lti_message_type" />
<input type="hidden" name="lti_version" />
<input type="hidden" name="content_items" />
<input type="hidden" name="oauth_version" />
<input type="hidden" name="oauth_nonce" />
<input type="hidden" name="oauth_timestamp" />
<input type="hidden" name="oauth_consumer_key" />
<input type="hidden" name="oauth_callback" />
<input type="hidden" name="oauth_signature_method" />
<input type="hidden" name="oauth_signature" />
</form>
</div>
<br />
<button id="submitFormButton">Submit</button>
</body>
` how do you set this cookie in the javascript? I believe a cookie needs to be set??? and I do not see how to set it? or maybe I am missing something else that is not noted in the documentation.
I would highly recommend you consider using LTI Advantage/1.3 instead of Remote Plugins. LTI provides a standards-based integration approach & a better developer experience.
https://community.brightspace.com/s/article/LTI-Integration-Guide
If you are working with a partner of D2L please get in touch with the partner team and technical assistance is available. Your information here is appreciated but we are glad to examine the full context and use case as these errors are not hugely uncommon during dev. Otherwise, I echo Paul's suggestion, but I understand if it is not immediately possible.
partners#d2l.com or talk with your team that knows D2L!
Depending on which browser you are in you might be seeing the recent effects of the third-party cookie blocking that the browsers are adopting. Because LTIs (both 1.1 and 1.3/Advantage) typically launch into iframe any access to those cookies are regarded as third party. This effectively means two things
You need to be aware of the cookie access routines where a user action must be taken to request access to the browser storage API using document.requestStorageAccess()
You need to be marking your cookies appropriately with the new SameSite cookie directives
Without these the browser will mark your cookie request as a 'Tracking cookie' and refuse to serve it along with the request or make it accessible via javascript.
An alternative is also to detect that the LTI launch is happening inside the an iframe and to bust that iframe out to a new window, or alternatively configure the launch inside Brightspace to not use a iframe at all.
I have a web app that allows users to upload photos to an S3 bucket via HTML form. It works exactly as expected on all desktop browsers, which is to do nothing after a successful upload. However in iOS safari and iOS chrome, it redirects to the bucket. If I "Handoff" the page over to safari on my mac it is an xml response of the entire bucket, it appears.
Does anyone know why this would happen and how to fix it? Normally I can find something via google and the forums but I'm finding nothing!
We are not specifying "success action redirect" or "success action status" on our form.
Also, it works as expected in chrome on an android device.
We do not want any sort of redirect to occurs, we handle things on the client after clicking the submit/post button.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id ="mainContent">
<form action="https://s3.amazonaws.com/{!awsKeySet.Name}" method="post" enctype="multipart/form-data" id="uploadForm">
<input type="hidden" name="key" id="key" />
<input type="hidden" name="AWSAccessKeyId" value="{!awsKeySet.AWS_AccessKey_Id__c}" />
<input type="hidden" name="policy" value="{!policy}" />
<input type="hidden" name="signature" value="{!signedPolicy}" />
<input type="hidden" name="acl" value="{!acessType}" />
<input type="hidden" name="Content-Type" value="{!Content_Type}" />
<!--input type="hidden" name="success_action_status" value="201" /-->
<!--input type="hidden" name="success_action_redirect" value="{!ForRedirect}" /-->
<h4 class="fileToUpload">Select a File to Upload in AWS</h4><br />
<div class="row">
<input type="file" size="50" name="file" id="file" />
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="submit" value="Upload" id="btn_submit" />
</div>
<div id="progressNumber"></div>
</form>
</div>
<script>
$(document).ready(function () {
var _requestBucket;
$("#btn_submit").click(function(event){
//alert(1);
event.preventDefault();
var _file;
_file = $("#file").val().replace(/.+[\\\/]/, "");
console.log('_file '+ _file);
$("#key").val(_file);
$("#uploadForm").submit();
});
});
</script>
Thank you!
I wish someone could have shed more light on this but sadly, this is a bug in iOS webkit browsers. It appears to have been fixed in Android and Desktop. So, if anyone stumbles on this problem, included is the bugzilla link for it
Bugzilla link for Proper handling of HTTP 204
More detail : According to the amazon s3 docs
If the value is set to 200 or 204, Amazon S3 returns an empty document with a
200 or 204 status code.
If the value is set to 201, Amazon S3 returns an XML document with a
201 status code.
If the value is not set or if it is set to an invalid value, Amazon S3
returns an empty document with a 204 status code.
According to HTTP 1.1 -
10.2.5 204 No Content
The server has fulfilled the request but does not need to return an
entity-body, and might want to return updated metainformation. The
response MAY include new or updated metainformation in the form of
entity-headers, which if present SHOULD be associated with the
requested variant.
If the client is a user agent, it SHOULD NOT change its document view
from that which caused the request to be sent. This response is
primarily intended to allow input for actions to take place without
causing a change to the user agent's active document view, although
any new or updated metainformation SHOULD be applied to the document
currently in the user agent's active view.
The 204 response MUST NOT include a message-body, and thus is always
terminated by the first empty line after the header fields.
This is not happening in either webkit browsers for iOS, currently. Sadly. I cannot find a way around this, other for Apple to fix it!
I'm trying to implement a jQuery-based image crop function that exports to base64 text. CropIt seems perfect for the job, and works beautifully, UNLESS it's not the first jQuery Mobile page in the list of jQm "pages", that displays by default in the HTML file. If it's not, everything works except for the zoom slider. I've created a jsFiddle to illustrate the problem:
http://jsfiddle.net/f97r3suf/5/
Any help getting the zoom slider to work would be appreciated, thanks! Code attached.
<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
<div data-role="content">
<p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
Example: CropIt is the second jQm page
<p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: Example: Cropit is the first jQm page.</p>
</div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
<div data-role="content" style="padding:0px">
<!-- content -->
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">Resize image</div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
</div>
</div>
I have gone through some of the blogs in internet, but I am not able to find out how to do my own login page without Spring Security. How can I do it?
To create a custom login page, create a view called auth.gsp in grails-app/views/login/. Make sure it passes the parameters j_username and j_password to the action ${postUrl}. Here is the default auth.gsp view that comes with Spring Security 1.x:
<html>
<head>
<meta name='layout' content='main'/>
<title><g:message code="springSecurity.login.title"/></title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'auth.css')}" type="text/css">
</head>
<body>
<div id='login'>
<div class='inner'>
<div class='fheader'><g:message code="springSecurity.login.header"/></div>
<g:if test='${flash.message}'>
<div class='login_message'>${flash.message}</div>
</g:if>
<form action='${postUrl}' method='POST' id='loginForm' class='cssform pure-form pure-form-aligned' autocomplete='off'>
<p>
<label for='username'><g:message code="springSecurity.login.username.label"/>:</label>
<input type='text' class='text_' name='j_username' id='username'/>
</p>
<p>
<label for='password'><g:message code="springSecurity.login.password.label"/>:</label>
<input type='password' class='text_' name='j_password' id='password'/>
</p>
<p>
<input type='submit' id="submit" class="btn" value='${message(code: "springSecurity.login.button")}'/>
</p>
</form>
</div>
</div>
<script type='text/javascript'>
<!--
(function() {
document.forms['loginForm'].elements['j_username'].focus();
})();
// -->
</script>
</body>
</html>
I would copy that into your auth.gsp view and change it from there.
This can be annoying sometimes.
So if am getting you right you want to change the look and feel of the login spring security offer right?
Do this after you are done with your UI design( CSS, HTML and others).
Now change the input name and compare it to auth.gsp, thus from Spring security.
You can hold ctrl+shift+N on the keyboard and type auth.gsp for you to check.
Compare it to yours and change where possible.
In your UrlMAppings.groovy do this editing
"/"(view:"/Your login page")
"/login/auth"(view:"/Your login page")
Now restart your service and thats all.
If the issue persist you can post the error here so we can see what to do to help.
Note this is for Grails 3.x
In order to do this you need to do this tasks:
Create a login view inside views directory
create two gsp views names auth.gsp and denied.gsp
in this step you probably need to copy content from plugin auth.gsp view and denied.gsp if you are using grails spring security core plugin version 2.0-RC3 these views are located at target > work > plugins > spring-security-core-2.0-RC2 > grails-app > view > login, copy content and paste it in your app auth.gsp and denied.gsp views
You can check an example of views location and views content in this repo.
I know enough about the coding end of web design to be embarrassed by what I don't know. What I want to do is to have various print promotions in newspapers and what not along the lines of: for more information please visit www.mysite.com/2345.
If the visitor doesn't enter the entire url in the nav bar and ends up at the main index, I want to have a text field there so they can enter "2345", hit enter or submit, then be redirected to www.mysite.com/2345 wherein the folder's index page will load.
I usually search and find the coding info I'm looking for, but I can't figure out a concise way to search this particular problem. Can anyone help with this or point me in the right direction for help elsewhere?
Thanks.
Pretty simple with JavaScript, here's a working example:
<form onsubmit="location.href='http://www.mysite.com/' + document.getElementById('myInput').value; return false;">
<input type="text" id="myInput" />
<input type="submit" />
</form>
You can do it using javascript. Here's a terribly ugly example but should give you an idea.
<form>
<input type="text" id="number" name="number" />
<input type="submit" onclick="window.location = window.location + '/' + number.value; return false;"/>
</form>
Ideally you'd also handle it in whatever server side language you're using as well. Here's a PHP example:
<?
if(isset($_POST['number'])){
header('Location: http://www.yourdomain.tld/'.$_POST['number']);
exit;
}
?>
Very simple example with PHP, so that you can understand how it works. Very simple.
<?php
if (isset($_POST['bt']))
{
header("Location: http://localhost/" . $_POST['folder']);
}
?>
<html>
<form id="form1" name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="folder" id="folder" />
<input type="submit" name="bt" id="bt" value="Go To" />
</form>
</html>
This is you index.php File, in your htdocs/www folder.
The PHP notices when you click the button and it will redirect you to
http://www.yourdomain.com/what-you-have-writen-in-the-textfield
You can also do it with JavaScript, but with PHP it will work even if your visitor browser has JavaScript disabled.