防止 HttpClient 在 PUT、POST 和 PATCH 上读取 cookie

Question

如何防止我的 Angular 应用程序尝试在 PUT / POST 和 PATCH 上读取 document.cookie来自 HttpClient 的请求？

• 我的应用程序在另一个不允许访问 cookie 的网络应用程序中的 iframe 中运行！
  我无法控制这个环境/应用程序。
• GET 请求没有任何问题。
• 我正在使用 Angular 6.0.2

错误

来自 HttpClient 的

put、post & patch 请求产生以下错误。

backend.service.ts:127 DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag. at HttpXsrfCookieExtractor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfCookieExtractor.getToken (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:27596:37) at HttpXsrfInterceptor.push../node_modules/@angular/common/fesm5/http.js.HttpXsrfInterceptor.intercept (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:27633:39) at HttpInterceptorHandler.push../node_modules/@angular/common/fesm5 /http.js.HttpInterceptorHandler.handle (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:27004:33) at HttpInterceptingHandler.push../node_modules/@angular/common/fesm5/http.js.HttpInterceptingHandler.handle (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:27677:27) at MergeMapSubscriber.project (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:26755:184) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:110070:27) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:110060:18) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:101403:18) at Observable._subscribe (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:104821:20) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (http://localhost:8080/44812272_a91e_4126_ad7b_6a54454…_sc-lightcontrol.jar/vendor.js:100628:25)

代码

putTest()、postTest() 和 patchTest() 因上述异常而失败。
getTest() 有效。

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  withCredentials: false
};

@Injectable({ providedIn: 'root' })
export class BackendService {

  constructor(
    private http: HttpClient,
    private messageService: MessageService
  ) { }

  putTest(): Observable<any> {
    console.log('PUT test');
    return this.http.put(BackendUrl.updateDeviceToControl, mockDevicePropertyData, httpOptions)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('PUT test'))
      );
  }

  patchTest(): Observable<any> {
    console.log('PATCH test');
    return this.http.patch(BackendUrl.updateDeviceToControl, mockDevicePropertyData, httpOptions)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('PATCH test'))
      );
  }

  postTest(): Observable<any> {
    console.log('POST test');
    return this.http.post(BackendUrl.updateDeviceToControl, mockDevicePropertyData, httpOptions)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('POST test'))
      );
  }

  getTest(): Observable<any> {
    console.log('GET test');
    return this.http.get(BackendUrl.updateDeviceToControl)
      .pipe(
        tap(_ => console.log('Success')),
        catchError(this.handleError<any>('GET test'))
      );
  }
}

Answer 1

如果我为传出请求禁用 XSRF protection support，则 Put / Post 和补丁请求工作，默认情况下启用并尝试读取 cookie XSRF-TOKEN。

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.disable(),
  ]
})

HttpClientXsrfModule.disable()