angular4 angular2 - XSRF protection

We are currently working on an Angular4 app with Slim-PHP REST Backend. Now we want to implement XSRF protection. Is it correct that there is no official tutorial on Angular2 or Angular4, how to use the classes XSRFStrategy, CookieXSRFStrategy, etc. on the client side? (We put an XSRF TOKEN cookie on the server side and wont that angular send a XSRF TOKEN-header-parameter).

We have found many threads in forums, however, all with individual cases ... On the page "https://angular.io/guide/security" there is also no detailed information on how to use it. Or did I miss something? Does anyone have a tip?

Thanks!

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

asked Aug 9 '17 at 10:33

ORE

435

add a comment |

Thanks!

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

asked Aug 9 '17 at 10:33

ORE

435

add a comment |

Thanks!

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

asked Aug 9 '17 at 10:33

ORE

435

Thanks!

angular csrf

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

asked Aug 9 '17 at 10:33

ORE

435

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

asked Aug 9 '17 at 10:33

ORE

435

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

edited Nov 19 '18 at 10:03

Ivan Aracki

1,76142640

asked Aug 9 '17 at 10:33

ORE

435

asked Aug 9 '17 at 10:33

ORE

435

asked Aug 9 '17 at 10:33

ORE

435

add a comment |

2 Answers
2

active

oldest

votes

The url that you provided has a link to the class HttpClient, where you can find the following text:

Cross-Site Request Forgery (XSRF) is an attack technique by which the
attacker can trick an authenticated user into unknowingly executing
actions on your website. HttpClient supports a common mechanism used
to prevent XSRF attacks. When performing HTTP requests, an interceptor
reads a token from a cookie, by default XSRF-TOKEN, and sets it as an
HTTP header, X-XSRF-TOKEN. Since only code that runs on your domain
could read the cookie, the backend can be certain that the HTTP
request came from your client application and not an attacker.

This is configurable:

If your backend service uses different names for the XSRF token cookie
or header, use HttpClientXsrfModule.withOptions() to override the
defaults.
 imports: [   HttpClientModule,  

   HttpClientXsrfModule.withOptions({

     cookieName: 'My-Xsrf-Cookie',

     headerName: 'My-Xsrf-Header'

   }) ]

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

thanks Pablo, i'll try it

– ORE
Aug 9 '17 at 11:09

Please, if this answer helped you, select it as accept in order to mark the question as answered ;)

– Pablo Lozano
Aug 10 '17 at 14:44

I'll do that, of course. I still had problems with setting the cookie via PHP. Apparently, Angular accept only XSRF-TOKEN-Cookies which have a expire and domain value. My first try: setcookie('XSRF-TOKEN', $value); Angular ignored the cookie and did not set any parameters in header. Then I specified the expire time and domain. setcookie('XSRF-TOKEN', $value, time() + (86400 * 1), "/"); Angular has read the cookie and set the X-XSRF-TOKEN header parameter correctly. Perhaps that helps someone.

– ORE
Aug 11 '17 at 18:06

For some reasons, my Angular front-end is not sending the X-XSRF-TOKEN header. I can see the XSRF-TOKEN in the response cookies. I thought Angular will then attach the X-XSRF-TOKEN header to every outgoing mutating requests (e.g. POST, PUT ...). Am I mising anything here?

– gye
Nov 3 '17 at 20:20

@gye did find out why?

– dCrux
Dec 5 '17 at 22:22

|
show 3 more comments

This should be withOptions not withConfig. I.e.: like so

HttpClientXsrfModule.withOptions({

  cookieName: 'My-Xsrf-Cookie',

  headerName: 'My-Xsrf-Header'

}),

answered Oct 18 '17 at 18:59

Carlo Bos

698412

So.. is the official documentation incorrect?

– Pablo Lozano
Dec 7 '17 at 22:10

They have corrected it now

– Pratap A.K
Apr 4 '18 at 10:34

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45588217%2fangular4-angular2-xsrf-protection%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

The url that you provided has a link to the class HttpClient, where you can find the following text:

Cross-Site Request Forgery (XSRF) is an attack technique by which the
attacker can trick an authenticated user into unknowingly executing
actions on your website. HttpClient supports a common mechanism used
to prevent XSRF attacks. When performing HTTP requests, an interceptor
reads a token from a cookie, by default XSRF-TOKEN, and sets it as an
HTTP header, X-XSRF-TOKEN. Since only code that runs on your domain
could read the cookie, the backend can be certain that the HTTP
request came from your client application and not an attacker.

This is configurable:

If your backend service uses different names for the XSRF token cookie
or header, use HttpClientXsrfModule.withOptions() to override the
defaults.
 imports: [   HttpClientModule,  

   HttpClientXsrfModule.withOptions({

     cookieName: 'My-Xsrf-Cookie',

     headerName: 'My-Xsrf-Header'

   }) ]

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

thanks Pablo, i'll try it

– ORE
Aug 9 '17 at 11:09

Please, if this answer helped you, select it as accept in order to mark the question as answered ;)

– Pablo Lozano
Aug 10 '17 at 14:44

I'll do that, of course. I still had problems with setting the cookie via PHP. Apparently, Angular accept only XSRF-TOKEN-Cookies which have a expire and domain value. My first try: setcookie('XSRF-TOKEN', $value); Angular ignored the cookie and did not set any parameters in header. Then I specified the expire time and domain. setcookie('XSRF-TOKEN', $value, time() + (86400 * 1), "/"); Angular has read the cookie and set the X-XSRF-TOKEN header parameter correctly. Perhaps that helps someone.

– ORE
Aug 11 '17 at 18:06

For some reasons, my Angular front-end is not sending the X-XSRF-TOKEN header. I can see the XSRF-TOKEN in the response cookies. I thought Angular will then attach the X-XSRF-TOKEN header to every outgoing mutating requests (e.g. POST, PUT ...). Am I mising anything here?

– gye
Nov 3 '17 at 20:20

@gye did find out why?

– dCrux
Dec 5 '17 at 22:22

|
show 3 more comments

The url that you provided has a link to the class HttpClient, where you can find the following text:

Cross-Site Request Forgery (XSRF) is an attack technique by which the
attacker can trick an authenticated user into unknowingly executing
actions on your website. HttpClient supports a common mechanism used
to prevent XSRF attacks. When performing HTTP requests, an interceptor
reads a token from a cookie, by default XSRF-TOKEN, and sets it as an
HTTP header, X-XSRF-TOKEN. Since only code that runs on your domain
could read the cookie, the backend can be certain that the HTTP
request came from your client application and not an attacker.

This is configurable:

If your backend service uses different names for the XSRF token cookie
or header, use HttpClientXsrfModule.withOptions() to override the
defaults.
 imports: [   HttpClientModule,  

   HttpClientXsrfModule.withOptions({

     cookieName: 'My-Xsrf-Cookie',

     headerName: 'My-Xsrf-Header'

   }) ]

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

thanks Pablo, i'll try it

– ORE
Aug 9 '17 at 11:09

Please, if this answer helped you, select it as accept in order to mark the question as answered ;)

– Pablo Lozano
Aug 10 '17 at 14:44

I'll do that, of course. I still had problems with setting the cookie via PHP. Apparently, Angular accept only XSRF-TOKEN-Cookies which have a expire and domain value. My first try: setcookie('XSRF-TOKEN', $value); Angular ignored the cookie and did not set any parameters in header. Then I specified the expire time and domain. setcookie('XSRF-TOKEN', $value, time() + (86400 * 1), "/"); Angular has read the cookie and set the X-XSRF-TOKEN header parameter correctly. Perhaps that helps someone.

– ORE
Aug 11 '17 at 18:06

For some reasons, my Angular front-end is not sending the X-XSRF-TOKEN header. I can see the XSRF-TOKEN in the response cookies. I thought Angular will then attach the X-XSRF-TOKEN header to every outgoing mutating requests (e.g. POST, PUT ...). Am I mising anything here?

– gye
Nov 3 '17 at 20:20

@gye did find out why?

– dCrux
Dec 5 '17 at 22:22

|
show 3 more comments

The url that you provided has a link to the class HttpClient, where you can find the following text:

Cross-Site Request Forgery (XSRF) is an attack technique by which the
attacker can trick an authenticated user into unknowingly executing
actions on your website. HttpClient supports a common mechanism used
to prevent XSRF attacks. When performing HTTP requests, an interceptor
reads a token from a cookie, by default XSRF-TOKEN, and sets it as an
HTTP header, X-XSRF-TOKEN. Since only code that runs on your domain
could read the cookie, the backend can be certain that the HTTP
request came from your client application and not an attacker.

This is configurable:

If your backend service uses different names for the XSRF token cookie
or header, use HttpClientXsrfModule.withOptions() to override the
defaults.
 imports: [   HttpClientModule,  

   HttpClientXsrfModule.withOptions({

     cookieName: 'My-Xsrf-Cookie',

     headerName: 'My-Xsrf-Header'

   }) ]

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

The url that you provided has a link to the class HttpClient, where you can find the following text:

Cross-Site Request Forgery (XSRF) is an attack technique by which the
attacker can trick an authenticated user into unknowingly executing
actions on your website. HttpClient supports a common mechanism used
to prevent XSRF attacks. When performing HTTP requests, an interceptor
reads a token from a cookie, by default XSRF-TOKEN, and sets it as an
HTTP header, X-XSRF-TOKEN. Since only code that runs on your domain
could read the cookie, the backend can be certain that the HTTP
request came from your client application and not an attacker.

This is configurable:

If your backend service uses different names for the XSRF token cookie
or header, use HttpClientXsrfModule.withOptions() to override the
defaults.
 imports: [   HttpClientModule,  

   HttpClientXsrfModule.withOptions({

     cookieName: 'My-Xsrf-Cookie',

     headerName: 'My-Xsrf-Header'

   }) ]

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

edited Nov 19 '18 at 8:20

Pal Singh

1,55711227

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

answered Aug 9 '17 at 10:46

Pablo Lozano

7,56912445

thanks Pablo, i'll try it

– ORE
Aug 9 '17 at 11:09

Please, if this answer helped you, select it as accept in order to mark the question as answered ;)

– Pablo Lozano
Aug 10 '17 at 14:44

I'll do that, of course. I still had problems with setting the cookie via PHP. Apparently, Angular accept only XSRF-TOKEN-Cookies which have a expire and domain value. My first try: setcookie('XSRF-TOKEN', $value); Angular ignored the cookie and did not set any parameters in header. Then I specified the expire time and domain. setcookie('XSRF-TOKEN', $value, time() + (86400 * 1), "/"); Angular has read the cookie and set the X-XSRF-TOKEN header parameter correctly. Perhaps that helps someone.

– ORE
Aug 11 '17 at 18:06

For some reasons, my Angular front-end is not sending the X-XSRF-TOKEN header. I can see the XSRF-TOKEN in the response cookies. I thought Angular will then attach the X-XSRF-TOKEN header to every outgoing mutating requests (e.g. POST, PUT ...). Am I mising anything here?

– gye
Nov 3 '17 at 20:20

@gye did find out why?

– dCrux
Dec 5 '17 at 22:22

|
show 3 more comments

thanks Pablo, i'll try it

– ORE
Aug 9 '17 at 11:09

Please, if this answer helped you, select it as accept in order to mark the question as answered ;)

– Pablo Lozano
Aug 10 '17 at 14:44

I'll do that, of course. I still had problems with setting the cookie via PHP. Apparently, Angular accept only XSRF-TOKEN-Cookies which have a expire and domain value. My first try: setcookie('XSRF-TOKEN', $value); Angular ignored the cookie and did not set any parameters in header. Then I specified the expire time and domain. setcookie('XSRF-TOKEN', $value, time() + (86400 * 1), "/"); Angular has read the cookie and set the X-XSRF-TOKEN header parameter correctly. Perhaps that helps someone.

– ORE
Aug 11 '17 at 18:06

For some reasons, my Angular front-end is not sending the X-XSRF-TOKEN header. I can see the XSRF-TOKEN in the response cookies. I thought Angular will then attach the X-XSRF-TOKEN header to every outgoing mutating requests (e.g. POST, PUT ...). Am I mising anything here?

– gye
Nov 3 '17 at 20:20

@gye did find out why?

– dCrux
Dec 5 '17 at 22:22

thanks Pablo, i'll try it

– ORE
Aug 9 '17 at 11:09

Please, if this answer helped you, select it as accept in order to mark the question as answered ;)

– Pablo Lozano
Aug 10 '17 at 14:44

I'll do that, of course. I still had problems with setting the cookie via PHP. Apparently, Angular accept only XSRF-TOKEN-Cookies which have a expire and domain value. My first try: setcookie('XSRF-TOKEN', $value); Angular ignored the cookie and did not set any parameters in header. Then I specified the expire time and domain. setcookie('XSRF-TOKEN', $value, time() + (86400 * 1), "/"); Angular has read the cookie and set the X-XSRF-TOKEN header parameter correctly. Perhaps that helps someone.

– ORE
Aug 11 '17 at 18:06

For some reasons, my Angular front-end is not sending the X-XSRF-TOKEN header. I can see the XSRF-TOKEN in the response cookies. I thought Angular will then attach the X-XSRF-TOKEN header to every outgoing mutating requests (e.g. POST, PUT ...). Am I mising anything here?

– gye
Nov 3 '17 at 20:20

@gye did find out why?

– dCrux
Dec 5 '17 at 22:22

|
show 3 more comments

This should be withOptions not withConfig. I.e.: like so

HttpClientXsrfModule.withOptions({

  cookieName: 'My-Xsrf-Cookie',

  headerName: 'My-Xsrf-Header'

}),

answered Oct 18 '17 at 18:59

Carlo Bos

698412

So.. is the official documentation incorrect?

– Pablo Lozano
Dec 7 '17 at 22:10

They have corrected it now

– Pratap A.K
Apr 4 '18 at 10:34

add a comment |

This should be withOptions not withConfig. I.e.: like so

HttpClientXsrfModule.withOptions({

  cookieName: 'My-Xsrf-Cookie',

  headerName: 'My-Xsrf-Header'

}),

answered Oct 18 '17 at 18:59

Carlo Bos

698412

So.. is the official documentation incorrect?

– Pablo Lozano
Dec 7 '17 at 22:10

They have corrected it now

– Pratap A.K
Apr 4 '18 at 10:34

add a comment |

This should be withOptions not withConfig. I.e.: like so

HttpClientXsrfModule.withOptions({

  cookieName: 'My-Xsrf-Cookie',

  headerName: 'My-Xsrf-Header'

}),

answered Oct 18 '17 at 18:59

Carlo Bos

698412

This should be withOptions not withConfig. I.e.: like so

HttpClientXsrfModule.withOptions({

  cookieName: 'My-Xsrf-Cookie',

  headerName: 'My-Xsrf-Header'

}),

answered Oct 18 '17 at 18:59

Carlo Bos

698412

answered Oct 18 '17 at 18:59

Carlo Bos

698412

answered Oct 18 '17 at 18:59

Carlo Bos

698412

answered Oct 18 '17 at 18:59

Carlo Bos

698412

So.. is the official documentation incorrect?

– Pablo Lozano
Dec 7 '17 at 22:10

They have corrected it now

– Pratap A.K
Apr 4 '18 at 10:34

add a comment |

So.. is the official documentation incorrect?

– Pablo Lozano
Dec 7 '17 at 22:10

They have corrected it now

– Pratap A.K
Apr 4 '18 at 10:34

So.. is the official documentation incorrect?

– Pablo Lozano
Dec 7 '17 at 22:10

They have corrected it now

– Pratap A.K
Apr 4 '18 at 10:34

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk