2

I want to change many <a href> actions in my program to improve security and I'm looking to add hidden token to prevent CSRF attacks.

What is the simplest way to change <a href> action into POST request?

  • The solution should be cross-browser and work well on all major browsers i.e moz, IE, Chrome, Opera etc.
  • it would be nice to have a pure JavaScript, without external dependencies
  • it would be nice to avoid separate, quite large (comparing to <a href>) block of code
  • it should be quite DOM-safe, so wrapping a clickable element in some decorator should not break the code (breakable example: parentNode.submit();)
  • The clickable Tag should be an anchor i.e <a>, not <button> or <submit>
  • it should work with file upload/multipart form

Non-POST action:

<a href="/user/delete/4">DELETE</a>

Target solution:

<form method="post" target="/user/delete/4">
    <a href="SUBMIT THIS FORM">DELETE</a>
</form>

Maybe it would be better to style <input type="submit"> to look & layer exactly like an <a> element?

Shaunak D
  • 20,588
  • 10
  • 46
  • 79
Kinga Odecka
  • 387
  • 4
  • 13
  • 2
    perhaps? – Kyle Jun 11 '14 at 11:38
  • delete – Suresh Ponnukalai Jun 11 '14 at 11:38
  • @KyleSevenoaks It would look like rectangular button. Not like textual link as it looked prior to changing – Kinga Odecka Jun 11 '14 at 11:39
  • 2
    Then go learn about a thing called "CSS" and the magic it can do for html elements. – Kyle Jun 11 '14 at 11:41
  • You can style a button to make it look like a link. Question is whether you should. After all, when you click it, you don't really link to anything. It's an action you do (deleting a resource), possibly even without leaving the page (when you start adding Ajax). I think a button wouldn't be such a bad idea. But if you disagree, it will take just a handful of CSS to make it look like a link. – GolezTrol Jun 11 '14 at 12:04
  • What security do you expect to achieve by using POST vs. GET? Better protection against search engines indexing your site? Although the question as such is meaningful (though the answer is really “No way, strictly speaking”), I’m afraid it does not address the problems you have but rather creates some new problems. – Jukka K. Korpela Jun 11 '14 at 12:19

6 Answers6

1

The solution should be cross-browser and work well on all major browsers i.e moz, IE, Chrome, Opera etc.

mh, let's say you want that it works also on browsers like ie6

it would be nice to have a pure JavaScript, without external dependencies

yeah probably the best solution

it would be nice to avoid separate, quite large (comparing to ) block of code

using an anchor tag is ok

it should be quite DOM-safe, so wrapping a clickable element in some decorator should not break the code (breakable example: parentNode.submit();)

not parentNode but you need submit else you can't send data over POST

modern ways allow the use of new FormData(), mixed with ajax.but if you want compatibility you need to use some sort of old school script.

The clickable Tag should be an anchor i.e , not or

ok

it should work with file upload/multipart form

a form yeah...

SO:

considered the first request ... compatibility there are not many solutions, you also should not use something like addEventListener() witch is not compatible with older ie browsers.

the only way is to create a custom function that could handle multiple actions.

This function is based on your example, delete something .... by adding a form with a name in the html you already have some security problems , so i decided to don't add a form to the page but create one dynamically.and send it just arfter i append it to the dom.

function deleteSomething(e){
 if(token === whatever){
  var D=document,
  a=D.createElement('input'),
  x=D.createElement('form');
  x.method='post'
  a.type='text';
  a.name='id';
  a.value=e.title;
  x.appendChild(a);
  D.body.appendChild(x);
  x.submit();
 }
}

Usage:

<a href="#" onClick="deleteSomething(this)" title="14">delete</a>
<a href="#" onClick="deleteSomething(this)" title="15">delete</a>
<a href="#" onClick="deleteSomething(this)" title="16">delete</a>

here is a delete link ... as there are not many attributes to use on ie6 i'm using the title as a placeholder for the id href is a empty anchor and onclick executes the function.

Inside the function you can then add your custom check to see if the tokens are correct.

you could also add a form to the page tgive it a name then change the title to the forms name ... but if you want security... mh...

for multipart, basically upload form or registration form i would create a custom function like the above but instead of sending everything it just adds the form to the dom.. so you can fill it and then send it.

This is all i can think of if you want that it works on the oldest browsers , don't use external libs , secure forms, links to click.

I personally use ajax and formdata. works on all modern browsers.. ie10 also. i also dn't like to add inline functions inside anchors.

If you have any questions about the code or how to extend it just ask...

by adding the links dynamically you can improve the code and it's security further.

btw in js if a hacker wants to get the clinetside token , it's relatively easy.

you need to check serverside.

security && ie6 is not possible.

I WOULD NEVER USE THIS , this just prevents from simple attacks... if someone really wants to hack your site it's easy.

the only way to have a secure data over post you need to check each individual user, also adding cachpa or how it's called is not that secure....

i would: on the serverside check the referrer, user, and maybe a token.using ajax & formdata. this works on all modern browsers. if you have ie6 on your desktop pc and don't want to/can't install a modern browser use a your/your friends phone.

you can't hide javascript from user ... some time ago i wrote an answer about hiding js code... https://stackoverflow.com/a/17468822/2450730 and with the newset chrome , if you know where to look you can find the secret js code. And that wexample uses base64 checks refere has custom headers and more.

Community
  • 1
  • 1
cocco
  • 16,442
  • 7
  • 62
  • 77
0

try this

<a href="#" onclick="javascript:confirmSubmit()">delete</a>

<script>
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to delete this file?");
if (agree)
document.forms["form_name"].submit();
else
return false ;
}
</script>
Ezhil
  • 996
  • 8
  • 13
0

You need to use javascript for this:::

<form id="form" action="" method="post">
<a href="javascript:;" onclick="document.getElementById('form').submit();"><%=n%></a>
<input type="hidden" name="mess" value=<%=n%>/>

aashi
  • 492
  • 3
  • 11
0

If you want cross browser compatibility its best to use jQuery 1.X
you can find it here: http://jquery.com/download/

$('.mySubmitA').on('click', function(){
  $(this).parents('form').submit();
  return false;
});
BrendanMullins
  • 587
  • 3
  • 18
0

HTML

<a href="/ActualLink" class="js-post-link"> My link </a>

JS

$('.js-post-link').on('click', function(){
       jQuery('body').append('<form action="'+ jQuery(this).attr('href') + '" method="post" id="1234567789" /></form>');
       jQuery('#1234567789').submit();
       return false;
});
aWebDeveloper
  • 36,687
  • 39
  • 170
  • 242
0

I don't think you have to change GET request to POST request to prevent CSRF attack. One way to prevent CSRF attack is to carry some random string in your GET request. This random string is generated and validated at the server side.

When your server generates the link, instead of just generating

<a href="/delete?user=123">delete</a>

you need to generate

<a href="/delete?user=123&csrf=A7djreY">delete</a>

where the value of "csrf" parameter is the random string.

fajarkoe
  • 1,543
  • 10
  • 12