angular4 httpclient csrf не отправляет x-xsrf-токен
В угловой документации упоминается, что угловой httpclient автоматически отправит значение cookie XSRF-TOKEN в заголовок X-XSRF-TOKEN почтового запроса. Ссылка на документацию
Но он не отправляет мне заголовок. Вот мой код
Код Nodejs для установки файла cookie
- Angular 2 2.0.0-rc.1 Свойство 'map' не существует в типе 'Observable ' не совпадает с сообщением о выпуске
- Расширитель компонентов с декоратором базового classа
- Невозможно связать с 'formGroup', поскольку это не известное свойство 'form'
- Тестирование. Невозможно разрешить все параметры для (ClassName)
- Angular2: Как загрузить данные перед рендерингом компонента?
router.get('/set-csrf',function(req,res,next){ res.setHeader('Set-Cookie', "XSRF-TOKEN=abc;Path=/; HttpOnly; SameSite=Strict"); res.send(); })
Я использовал httpclient в app.module.ts
imports: [ HttpClientModule ]
** Вышеприведенный код предназначен только для отладки. У меня нет конечной точки set-csrf.
Но при отправке почтового запроса он не отправляет никаких заголовков. Я не могу отлаживать.
Я добавил эту проблему в repository github. HttpXsrfInterceptor проверяет, является ли запрос GET или HEAD, или если он начинается с http. Если true, он пропускает добавление заголовка.
Вот код в classе HttpXsrfInterceptor
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> { const lcUrl = req.url.toLowerCase(); // Skip both non-mutating requests and absolute URLs. // Non-mutating requests don't require a token, and absolute URLs require special handling // anyway as the cookie set // on our origin is not the same as the token expected by another origin. if (req.method === 'GET' || req.method === 'HEAD' || lcUrl.startsWith('http://') || lcUrl.startsWith('https://')) { return next.handle(req); } const token = this.tokenService.getToken(); // Be careful not to overwrite an existing header of the same name. if (token !== null && !req.headers.has(this.headerName)) { req = req.clone({headers: req.headers.set(this.headerName, token)}); } return next.handle(req); }
Я не уверен, почему они пропустили часть http / s. Вот моя проблема в github
- Угловой материал Не удалось найти основную тему углового материала
- Что эквивалентно ngShow и ngHide в Angular?
- Как передать объект из одного компонента в другой в Angular 2?
- Angular 2 аннотация @ViewChild возвращает неопределенные
- AngularJS $ http, аутентификация CORS и http
- Как получить параметры запроса от url в угловом 2?
- Угловой 2 - Услуги, требующие других услуг до вызова метода
- Angular2 - Взаимодействие между компонентами с использованием сервиса
То, что вы ищете, это HttpClientXsrfModule .
Подробнее об этом читайте здесь: https://angular.io/api/common/http/HttpClientXsrfModule .
Ваше использование должно быть таким:
imports: [ HttpClientModule, HttpClientXsrfModule.withConfig({ cookieName: 'My-Xsrf-Cookie', // this is optional headerName: 'My-Xsrf-Header' // this is optional }) ]
Кроме того, если ваш код нацелен на API через абсолютный URL, перехватчик CSRF по умолчанию не будет работать из коробки. Вместо этого вы должны реализовать свой собственный перехватчик, который не игнорирует абсолютные маршруты.
@Injectable() export class HttpXsrfInterceptor implements HttpInterceptor { constructor(private tokenExtractor: HttpXsrfTokenExtractor) { } intercept(req: HttpRequest, next: HttpHandler): Observable> { const headerName = 'X-XSRF-TOKEN'; let token = this.tokenExtractor.getToken() as string; if (token !== null && !req.headers.has(headerName)) { req = req.clone({ headers: req.headers.set(headerName, token) }); } return next.handle(req); } }
И, наконец, добавьте его своим провайдерам:
providers: [ { provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptor, multi: true } ]
Я полагаю, что правильный метод – withOptions . Я использовал withConfig и получил ошибку Property 'withConfig' does not exist on type 'typeof HttpClientXsrfModule'. Это типичная проблема в документации. Вместо этого вы должны использовать «withOptions» вместо HttpClientXsrfModule.withOptions({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', })
Используя недавнюю Угловую версию, я столкнулся с следующей проблемой. Пока токен передается клиенту с использованием заголовка «XSRF-TOKEN», ответ должен возвращать токен, используя имя заголовка «X-XSRF-TOKEN». Итак, вот немного модифицированная версия кода Мирослава выше, которая работает для меня.
@Injectable() export class HttpXSRFInterceptor implements HttpInterceptor { constructor(private tokenExtractor: HttpXsrfTokenExtractor) { } intercept(req: HttpRequest, next: HttpHandler): Observable> { const headerName = 'XSRF-TOKEN'; const respHeaderName = 'X-XSRF-TOKEN'; let token = this.tokenExtractor.getToken() as string; if (token !== null && !req.headers.has(headerName)) { req = req.clone({ headers: req.headers.set(respHeaderName, token) }); } return next.handle(req); } }