Ionic 3中HttpClient响应明文缓存问题：禁用或加密方案咨询

Hey there, let's fix this critical security issue right away. The problem you're facing has two core parts: stopping HttpClient from automatically caching your HTTPS responses, and ensuring any cached data (accidental or unavoidable) is encrypted so it can't be read in plaintext on rooted/jailbroken devices. Let's break this down step by step:

First: Fix Your Cache-Control Headers (You're Overwriting Them!) #

Looking at your code, you’re setting Cache-control multiple times, which means each subsequent call overwrites the previous value. For example, your final Cache-control header ends up as just no-store instead of combining all the anti-caching directives you need. Here's the corrected way to set these headers:

Instead of:

headers = headers.set('Cache-control', 'no-cache');
headers = headers.set('Cache-control', 'no-store');
headers = headers.set('Expires', '0');
headers = headers.set('Pragma', 'no-cache');

Combine all cache directives into a single, standard Cache-Control header:

headers = headers.set('Cache-Control', 'no-cache, no-store, must-revalidate');
headers = headers.set('Expires', '0');
headers = headers.set('Pragma', 'no-cache');

This tells both the server and the app's WebView not to cache the response at any level.

Second: Add a Unique Query Parameter to Bypass WebView Caching #

Even with correct headers, some WebViews might still cache GET requests based on the URL. To work around this, append a timestamp to your request URL to make each request unique—this ensures the WebView treats every call as a new, uncached request:

Modified getServiceData method: #

getServiceData(path: string) {
    // Append timestamp to URL to avoid WebView caching
    var APIFULLURL = `${this.APIBASEURL}${path}?ts=${new Date().getTime()}`; 
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/json; charset=utf-8');
    headers = headers.set("Content-Encoding", 'gzip')
    headers = headers.set('Accept', 'application/json;charset=utf-8')
    headers = headers.set('Authorization', this.APIHeaderKey);
    // Fixed cache headers
    headers = headers.set('Cache-Control', 'no-cache, no-store, must-revalidate'); 
    headers = headers.set('Expires', '0');
    headers = headers.set('Pragma', 'no-cache');

    console.log("==URL ===" + APIFULLURL);

    const req = new HttpRequest('GET', APIFULLURL,{
        headers: headers,
        reportProgress: true,
        withCredentials : true
    });
    return this.http.request(req).timeout(50000)
}

POST requests rarely get cached by WebViews, but keep the corrected headers in place for consistency.

Third: Use an HttpClient Interceptor to Enforce No-Cache Globally #

To avoid repeating header setup in every request, create an interceptor that adds anti-caching headers to all outgoing requests. This ensures consistency across your entire app:

1. Create the interceptor:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class NoCacheInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const noCacheReq = req.clone({
      setHeaders: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Expires': '0',
        'Pragma': 'no-cache'
      }
    });
    return next.handle(noCacheReq);
  }
}

2. Register the interceptor in your app module:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NoCacheInterceptor } from './path-to-your-interceptor';

@NgModule({
  ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NoCacheInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

Fourth: Encrypt Response Data (For Extra Security) #

Even with caching disabled, it’s wise to encrypt sensitive response data before it’s stored anywhere (including accidental system-level caches). Here’s how to do this using crypto-js, a trusted encryption library for Ionic:

1. Install the library:

npm install crypto-js --save
npm install @types/crypto-js --save-dev

2. Create an encryption service:

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

@Injectable()
export class EncryptionService {
  // Store this key in environment variables, NOT hardcoded!
  private secretKey = 'your-strong-unique-secret-key-here'; 

  encryptData(data: any): string {
    return CryptoJS.AES.encrypt(JSON.stringify(data), this.secretKey).toString();
  }

  decryptData(encryptedData: string): any {
    const bytes = CryptoJS.AES.decrypt(encryptedData, this.secretKey);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
  }
}

3. Modify your service methods to encrypt responses:

// Inject the EncryptionService in your API service
constructor(private http: HttpClient, private encryptionService: EncryptionService) {}

// Updated GET request with encryption
getServiceData(path: string) {
    var APIFULLURL = `${this.APIBASEURL}${path}?ts=${new Date().getTime()}`;
    let headers = new HttpHeaders();
    // ... set headers as before ...

    const req = new HttpRequest('GET', APIFULLURL,{
        headers: headers,
        reportProgress: true,
        withCredentials : true
    });

    return this.http.request(req).timeout(50000).pipe(
      map(response => {
        // Encrypt response body before returning it
        if (response.type === HttpEventType.Response) {
          return this.encryptionService.encryptData(response.body);
        }
        return response;
      })
    );
}

Critical Security Notes: #

• Never hardcode encryption keys: Use environment variables or a secure key management system to store your secret key.
• Add root/jailbreak detection: For extra protection, implement device root detection in your app and restrict sensitive functionality if the device is compromised.

Final Verification #

• Test your app on a rooted/jailbroken device to confirm plaintext responses no longer appear in cache folders.
• Validate that encrypted data can be decrypted correctly when needed in your app.

内容的提问来源于stack exchange，提问作者Piraba