I have a perhaps simple question. What would be the difference between an <a> tag and a normal GET request with any element. I know the <a> tag automatically sends you to the url specified in its href attribute. So I assume that a Get request does something similar in it's success callback (as demonstrated below)
But let's say that I also want to send some information along with a normal get request when a for example <span> element is clicked on so I write:
$('span').click(() => {
$.ajax({
url: '/someurl',
type: 'GET',
data: {
title: someTitle,
email: someEmail
},
success: (data) => {
window.location = '/someurl';
}
});
});
Is there any way to achieve this with an <a> tag? Sending information to the server so it's available in req.query.title and req.query.email ?
Doing the ajax request above will run my app.get('/someurl',(req,res)=>{})twice because I am sending a GET request to send the data (title and email) and then I am making another GET request when I write window.location = '/someurl' How can I redo this so that it only sends the GET request ONCE but also allows for the sending and storing information to the req object AND ensures that the browser is now displaying /someurl.
Just create the appropriate query string in the URL you put in the href of the <a> tag and it will work just like your ajax call. Suppose someTitle has the value of "The Hobbit" and someEmail has the value of foo#whatever.com, then you can construct that URL like this:
Click Me
A number of non-letter characters have to be escaped in URLs. In the above URL, the space is replaced with %20 and the # with %40. In your particular example, you could open the network tab in the chrome debugger and see the EXACT URL that Chrome was sending for your ajax call, copy that to the clipboard and insert it into your <a> tag.
Here's a table that shows what characters have to be replaced in a query string component (the part after & or after =):
I'm just wondering then, aside from semantic reasons, is there any other advantages to using an a tag instead of anything else?
<a> tags are understood by all sorts of machines that may read your page such as screen readers for the disabled or crawlers indexing your site. In addition, they work automatically with browser keyboard support, Ctrl-click to open a new tab. Whereas a piece of Javascript may not automatically support any of that functionality. So, basically, if the <a> tag can do what you need it is widely preferred because it has so much other default functionality that can be necessary or handy for users.
Hello
Related
Ok, so I'm maintaining a legacy code where they are creating html on the backend side (a form) and in the action tag they are appending the value of the URL to make a redirect. There are no input of type texts anywhere to sanitize. The url comes from the request, they have an event handler to check if that is a redirect, etc.
Burp scan indicates that you can (of course) escape the Url and put a JavaScript event in it.
So the idea is to how can I detect if the Url has a JavaScript event, because this is already on an html we are sending I cant html encode it, because is not a text we are saving but a page they are showing.
How can I check if the string (which is the Url ) has JavaScript event escaped in it?.
What I tried is to ask if in the Url there is ' (the escape) but I yet to know if the url can contain such symbol, so it seems I have to analyze if we are seeing a JS Event.
So the url looks something like this: /Something/TheSession/123'onmouseover%3d'alert(1)'456
And then they are appending that url here on a stringbuilder:
sb.Append("<html><body><form name='Redirect' method='post' action='")
sb.Append(request.Url.PathAndQuery)
I already read some references like portswigger about XSS but in the Reflected XSS Script the example is in html tags which would be easier to check.
I'm trying to get the last redirected address of a LinkedIn address: https://www.linkedin.com/school/18451/?legacySchoolId=18451 which in the browser gives: https://www.linkedin.com/school/babson-college/
In NodeJS, I have tried the following (I have tried all the solutions of that post):
request({ url: 'https://www.linkedin.com/school/18451/?legacySchoolId=18451', followRedirect: false }, function (err, res, body) {
console.log(res.headers.location);
});
But I'm still getting the same initial address (legacySchoolId) instead of the final (babson) one. It seems that the redirect is performed by a javascript function so I was wondering how I could get the last address in all use cases.
I tested it and I see two obstacles here:
1) You get the final URL only when you are logged in, otherwise you get a JS redirect to an authwall.
2) The final URL that you see in the browser does not come from a redirect, instead the displayed URL is just rewritten using replaceState (HTML5 history API). There is no navigation to a new page there.
I see two options to solve this:
1) Use a headless browser like Puppeteer. Write code to log in with your username and password and then navigate to those URLs, wait a bit (for example until some company info gets rendered) and then read the current URL.
2) Simulate only the most necessary requests and extract the info from the page (not sure if it works with LinkedIn though), using a library such as slimtomato.* You'd then start by simulating a login with your username and password and then use the same tomato object (or at least the same cookie jar) for the requests to those school links in order to get the final URLs. I didn't find a straight-forward way to see the final URL in the page source, but what would still work in this specific case though is parsing the page for this meta tag...
<meta name="apple-itunes-app" content="app-id=288429040, affiliate-data=ct=campaign_vw_smart_app_banner&pt=10746, app-argument=voyager://school/babson-college/?trk=vw_smart_app_banner">
...and then using the app-argument value (voyager://school/babson-college/?trk=vw_smart_app_banner) without the query and replacing voyager:// by https://www.linkedin.com/.
*: Disclaimer: I wrote that library. But I didn't find a good alternative with the same scope.
I'm using scrapy and passing SplashRequest, I want to extract the url from the #href as usual, but when I inspect the href to get the actual url, it is not assigned the url I'm looking for, but instead I see '#', then when I hover the mouse on that '#' I can see the url I'm looking for.
How can I get that url then follow it using SplashRequest ?
the HTML code is shown below:-
<a #href= '#' onclick="redirectpage(2);return false" >Page 120</a>
When I hover the mouse on #href I see the url I'm looking for as shown below :=
https://example.com/page/120
To get href/url attribute :
//div[#class='---']/a/#href
I believe this is efficient for any page
For getting the URL, you should use some of the dynamic data fetching methods,
Click the particular URL and view the Url in response.
If the content not available in the page source, then its loading dynamically via some scripts.
we should handle things that way.
I am working upon the project using node.js with express.js framework and view engine set to "ejs". The project's functions is to:
1. Get an input from a user.
2. Using the input send the request to the website's API.
3. Print the certain data from that API (including the ID to be used later).
4. When user clicks on the item (that is an 'a' tag) in the list consisting of the aforementioned data - use the ID of this item to send another request to the same website to get a more detailed info about the item.
I am stuck at the step 4. And the question is: How to send this id from the .ejs file to post request in node.js when the user clicks on the item?
Doing it the other way is simple: response.render("view name", {nodeJsVar: ejsVar}); But how to pass it back?
Thanks for the help!
First of all, you cannot send any data "from the .ejs file" - what you can do is to send it from the browser, that has a rendered HTML (and possibly JavaScript) and not EJS.
You can do it with some client-side JavaScript in which case you can do whatever you want.
You can do it by embedding the variable's value in a URL as a route parameter or a query parameter if you're using standard <a href="..."> links.
You can put a hidden input in a form if you're using forms and buttons.
You can put it in any part of the request if you're using AJAX.
Just to make sure you know what is what because it can be confusing - here X is a path parameter:
http://localhost/something/X
and here X is a query parameter:
http://localhost/something?x=X
try this (assuming you use jQuery):
$.ajax({
url: '/routename_to_handle_id',
type: 'POST',
data: { id: id }
}).done(function(response){
//callback to handle if it's successful
})
I'm writing a very simple Yesod message list that uses AJAX to add new list items without reloading the page (both in the case of other users modifying the database, or the client themselves adding an item). This means I have to encode the HTML structure of the message items in both the Halmet template (when the page loads initially) and the Julius template (for when the dynamic addition happens). They look something like this:
In homepage.hamlet:
$if not $ null messages
<ul id=#{listId}>
$forall Entity mid message <- messages
<li id=#{toPathPiece mid}>
<p>#{showMarkdown $ messageText message}
<abbr .timeago title=#{showUTCTime $ messagePosted message}>
And in homepage.julius:
function(message) {
$('##{rawJS listId}').prepend(
$('<li>')
.attr('id', message.id)
.append('<p>' + message.text + '</p>')
.append($('<abbr class=timeago />')
.attr('title', message.posted).timeago())
.slideDown('slow')
);
}
I'd love to be able to unify these two representations somehow. Am I out of luck, or could I somehow abuse widgets into both generating an HTML response, and filling in code in a JavaScript file?
Note: Of course, I understand that the templates would have to work very differently, since the AJAX call is getting its values from a JS object, not from the server. It's a long shot, but I thought I'd see if anyone's thought about this before.
I think it's something of a AJAX best-practice to pick one place to do your template rendering, either on the server or client. Yesod is (currently) oriented toward doing the rendering on the server.
This can still work with AJAX replacement of contents, though. Instead of getting a JSON response from the POST, you should get a text/html response that contains the result of rendering the template on the server with the values that would have been returned via JSON and then replacing the innerHTML of the DOM node that's being updated.
If you want to support both JSON and HTML responses (to support 3rd party applications via API or something) you would have to make the format of the response be a function of the request; either appending ".json" or ".html" to the URL or including a HTTP header that lists the specific document type required by the client.
It would be nice if Yesod provided a 'jwhamlet' template or something that would render the HTML via javascript in order to support client rendering, but I'm not aware of one. That's not to say there isn't one I'm not aware of, though, so keep an eye open for other answers.
If you wanted to make such a thing, you might try tweaking the hamlet quasi-quote code so that instead of expanding the quasi-quotes to an html-generating function, it expanded them to a JSON-generating function and a pre-rendered chunk of text that's a template in mustache-style such that the JSON returned by the function would provide the correct context for the template to be rendered the way you want.