Chrome extension AJAX/XHR request handling - ajax

Couple questions about the implementation of the XHR request:
I am trying to make a form in popup.html that allows for the filling of a box with text (in popup.html) and submits that to a remote website using get and replaces the contents of the box with the return of the php (json).
Heres the code so far:
Any idea why when I click submit nothing happens?
Also the manifest permissions:
"permissions": [
"https://*/",
"https://*/*"
]
}

forms don't need permissions at all to do a cross domain post (in theory). That being said, the popup.html never reloads in a browser action (or page action) when a form is submitted.
An easy thing to do is to capture onsubmit on the form and simply do an XMLHttpRequest attaching the form as per the Mozilla MDC site.
Which in summary is (copied from mozilla):
var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(new FormData(formElement));

Related

How to call an external API in truclient protocol of loadrunner

I am recording a script using truclient protocol.In my script ,i need to externally call an API which generates the Password. The password is fetched using the co-relation,which is used as an input for Login.
I am however unable to call the external API using the true client protocol.
Could anybody please suggest how to call an external API in true client protocol.
Have you tried the evaluate JavaScript step? You can post the message to the server and get the generated password during the runtime. XHR and fetch API should be supported in Chrome and Firefox, TCIE should support XHR.
Sure. Please check the detail steps:
Drag and drop an evaluate JS step from TruClient
Open the script editor
Add these code, make sure use the sync XHR to ensure the password is returned before the end step started:
var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', false);
//Send the proper header information along with the request
xhr.setRequestHeader("xxx", "value");
xhr.send();
if (this.status === 200) {
// Request finished. Do processing here.
}
var password = xhr.response;
Change the login password step from plain text to JS and use
ArgsContext.password
to reference the previous received password.
If you have another questions please let me know. How to use the argument context you could reference this link.
BTW. the window and document object of the page can be referenced with AUT.window, AUT.document in TruClient.
Please check the help document from here.

How to include reCAPTCHA v3 in the background of pages?

In the reCAPTCHA v3 docs, it says
reCAPTCHA works best when it has the most context about interactions with your site, which comes from seeing both legitimate and abusive behavior. For this reason, we recommend including reCAPTCHA verification on forms or actions as well as in the background of pages for analytics.
How do we run it in the background of pages?
Let's say I have a React app that handles multiple web pages, and for one of my web pages, it is a sign up form where I want to get a risk score when users sign up. When the docs say to run reCAPTCHA in the background on other pages, does that mean it's running on other pages as long as <script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script> is in the header? Or do we need to call grecaptcha.execute(...) on all the other pages, and not just the signup page?
As long as you have the script attached, it will run in the background of pages. You can see that it's running if the reCAPTCHA banner/icon is showing on the page (usually bottom right corner). grecaptcha.execute(...) should be run on a specific action, like when you click a button to sign up for example.
#jojochuu, your answer is exactly right. Thanks for that.
I found another reason to run grecaptcha.execute. Logging. Loading api.js (the second line in the code below) is sufficient to activate recaptcha. It displays the flyout recptcha button.
I chose to add the second script that does call grecaptcha and gets the token. Then I use the token to get the score and any error codes from google. I log that data along with the visitor's IP address and a timestamp so I can see how the score changes over time. I can then compare my logs with access logs and maybe spot some IPs I want to ban. Mostly, I just want to know how score changes. I'll disable the logging by removing the second script block.
This is the best tutorial I found. Combining it with the google docs was enough to learn how to do recaptcha right.
<input type="hidden" id="visitor_ip" value="<?=$visitor_ip; ?>">
<script src="https://www.google.com/recaptcha/api.js?render=public-site-key" async defer></script>
<script>
// This correctly gets the token, but doesn't verify the user response (action).
function execGrecaptcha() {
grecaptcha.ready(function() {
grecaptcha.execute('<?=$settings->recap_public; ?>', {action: '<?=$actionName; ?>'}).then(function(token) {
logRecaptchaResults(token);
});
});
}
// Run after page loaded
window.onload=execGrecaptcha;
// Send token/ip to server for logging via ajax
function logRecaptchaResults(token) {
var vip=document.getElementById('visitor_ip');
$.ajax({
url: "https://<?=HOST_NAME_DOT; ?>domain.com/ajax/logit.php",
type: "get", //send it through get method
data: {
"token": token,
"visitor_ip": vip.value
},
});
}
</script>

How to return pdf document from controller with ajax call in MVC app

I have an #Html.Action link that currently works for returning the user a pdf document from the controller. I want to be able to use an ajax call to perform the same function but I'm stuck on how or even if this can be done. I have tried several different iterations but I never get the pdf to download from the browser window. Here is what I have so far:
$('#Button1').click(function () {
var poNum = "51970";
$.ajax({
type: "GET",
data: "id= " + poNum,
url: '#Url.Action("PoReport", new { controller = "LogisticsTools"})'
});
});
I can copy the Request URL from the Headers window in Chrome Dev Tools and paste it into a new page and the pdf is downloaded. I can see the pdf code in the Response window also but it just doesn't get downloaded when the button is clicked. What am I missing?
You don't want to ajaxify this. Put the URL in an anchor tag and let the browser do the rest. If the browser doesn't recognise the document type or it is configured to force file downloads, the file will download as you expect (i.e. the user will see the download dialog). If the document is recognised, can be opened in the browser, and the browser is configured to open files, the file will open in the browser.
<a href='#Url.Action("PoReport", new { controller = "LogisticsTools"})'
title="Click to Download/Open">
Download
</a>
You can't download PDF file while using the ajax request to server. So instead of that you should use html actionlink. for example
#Html.ActionLink("Convert Data into PDF", "PDFView", null, new { #class= "btn btn-info" });
Above code will generate a link button and you can access Action Method of controller. Also you can use any technique to return PDF file from controller for example you can return PDF file using FileResult class.

Firefox add-on: Injected HTML

I'm trying to write an add-on for firefox and i'm having a problem-
When the user right-clicking on the page the add-on is adding an element to the page's body using
document.body.appendChild(myElement);
myElement has a button and i want that "onClick" it will call a xmlHttpRequest and handle the response in some why. I've tried to inject the two scripts using
document.getElementsByTagName('head')[0].appendChild(xmlRequestFunction);
document.getElementsByTagName('head')[0].appendChild(handleResponseFunction);
but it didn't work because of (i assume) a security problem.
What can i do?
Thanks
Do not use onclick when working with content, use addEventListener instead (see https://developer.mozilla.org/en/XPCNativeWrapper#Limitations_of_XPCNativeWrapper if you need to know why). Like this:
myElement.addEventListener("click", function(event)
{
var request = new XMLHttpRequest();
...
}, false);

FBJS AJAX.post is not working after permissions dialog

I have problems with facebook application based on flash which communicate with PHP using FBJS-bridge. When someone use the application for the first time, he/she is asked for various permissions. After that, flash contact PHP with ajax but request is never sent. When you refresh page, everything is working without any problems.
If you remove the application on privacy settings, refresh the page and try again - same bug happens. If you allow application, refresh page, in other tab remove application and start application in previous tab - user is asked for permissions but everything is working after allowing application.
This is FBJS code
function openPermissions(){
Facebook.showPermissionDialog(/*permissions string*/, permissionOnDone);
}
function permissionOnDone(perms){
if (!perms) {
document.getElementById("indexswf").callSWF('noallow');
} else {
document.getElementById("indexswf").callSWF('allow');
}
}
function ajaxCall(url,parameters){
var params = {};
for(var i=0;i<parameters.length;i+=2){
params[parameters[i]]=parameters[i+1];
}
ajax = new Ajax();
ajax.requireLogin = true;
ajax.responseType = Ajax.RAW;
ajax.ondone = function(data){
document.getElementById("indexswf").callSWF('parseAjax', data);
}
ajax.post('http://the.url.to/the_real_server/not_to_the_fb_url/'+url,params);
}
openPermissions is called to display permission dialog, and on allow flash function allow() is called. In flash, allow() calls JS function ajaxCall(), which should make ajax request. But, ajax.post never sends request. I know that for sure, because flash function parseAjax was never called and also debugging tools in browsers are not showing any ajax requests. URL and parameters are same as when it is working. No flash or JS errors are detected...
Anyone have idea what is wrong here? Maybe facebook bug again since this was all working few days ago...
ajax.requireLogin = true should be set to false for some reason

Resources