在 Angular 应用程序中使用 HttpInterceptor 支持 Heroku App 的 Content-Security-Policy，以保护应用程序免受跨站脚本 (XSS)等攻击。

示例代码：

1. 创建HttpInterceptor服务

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

@Injectable() export class SecurityInterceptor implements HttpInterceptor { intercept(req: HttpRequest, next: HttpHandler): Observable> { const securityReq = req.clone({ headers: req.headers.set('Content-Security-Policy', 'default-src https:; script-src https:') }); return next.handle(securityReq); } }

2. 在app.module.ts中添加SecurityInterceptor服务

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { AppComponent } from './app.component'; import { SecurityInterceptor } from './security.interceptor';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: SecurityInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule { }

3. 在Heroku App中启用 Content-Security-Policy

在Heroku App中，打开应用程序的设置，导航到Heroku Dashboard > 将Content-Security-Policy添加到HTTP标头，添加以下内容：

default-src https:; script-src https:;

然后保存更改。

以上代码示例会在Angular应用程序中添加一个HttpInterceptor服务，以向Heroku App发送带有 Content-Security-Policy 标头的请求，并在Heroku App中为默认源和脚本源设置允许的来源，从而保护应用程序免受跨站脚本等攻击。