首页 文章

在Ionic页面中将图像src的授权 Headers 传递给远程服务器

提问于
浏览 次
4

我有一个Ionic应用程序，它从远程服务器获取数据并将其显示在Ionic html页面上 .

远程URL将如下所示：

http://foo.com/api/content/1

这将给我一个“内容”的JSON对象，并将在Ionic应用程序的html页面中进一步使用 .

在Ionic app里面的html页面上使用它是这样的：

<div class="article-desc">
  <p [innerHtml]="myObject?.Body"></p>
</div>

“myObject”是从服务器收到的响应的JSON对象 .

“正文”字段包含要在段落中显示的HTML . 此“HTML”字段仅与整个“内容”对象一起从服务器返回 .

“Body”字段可以包含以下内容：

<p>blah blah <img src="http://foo.com/image/1"/> blah blah <img src="http://foo.com/image/2"/>blah blah blah </p>

您可以从上面的示例中看到该图像存在于该html中 .

我没有问题将该字段中的html呈现给Ionic Page .

我有一个问题是我的图像没有在那里呈现 .

这就是为什么..

我的应用程序已被访客用户锁定，因此对于每个请求，我需要发送一个Authorization标头以对其进行身份验证，在这种情况下，所有图像都无法呈现，因为每个图像请求都将被视为服务器的访客 .

你能建议一个常见的地方，我的所有图像和hmtl中的其他来源都应该通过，并可以将授权 Headers 随之发送到服务器 .

我已在本地存储项中拥有授权令牌 .

我的目标是在Ionic应用程序中呈现时，在该Body字段中出现的每个外部源（此处为图像）发送授权标头 .

angular cordova typescript ionic-framework

3 回答

  • 0

    1）创建设置授权头的拦截器

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            setHeaders: {
                Authorization: `Bearer <your token>`
            }
        });

        return next.handle(request);
    }
}

    您应该将AuthService注入此拦截器而不是“您的令牌”，并使用例如this.authService.getToken（），它从本地存储加载令牌 .

    2）实现“安全”管道，将图像作为blob并创建可以在src属性中使用的该blob的对象URL

    import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';

@Pipe({
    name: 'secure'
})
export class SecurePipe implements PipeTransform {

    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, { responseType: 'blob' })
            .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
    }

}

    3）使用它

    <img [attr.src]="'your link' | secure | async" />
    回复于
  • 6

    1st Option: Look for "URL signing"

    我们的想法是，当您使用 <img src="http://foo.com/image/1"> 时，无法传递授权标头 . 因此，您向后端发出请求，要求为图像提供临时公共链接，并将此链接作为图像源 .

    这是一个示例流程

    • 我需要显示“http://foo.com/image/1”

    • 在浏览器中，向后端发出帖子请求，让他们知道您是授权客户端（包括授权 Headers ），并要求提供一个公开显示图片的临时网址

    • 从后端生成一个签名的URL，该URL在有限的时间内有效，并且不需要授权标头来显示图像 .

    • 使用您刚刚收到的临时签名网址作为img标记的src .

    2nd Option: Download the image and use blob URL

    这个问题的答案会告诉你：Force HTTP interceptor in dynamic ngSrc request

    回复于
  • 0

    以下是你编写拦截器的方法，

    • 需要扩展一个名为HttpInterceptor的类，以角4/5提供 .

    • 覆盖一个名为拦截的方法，

    它将在你的所有http请求中添加 Headers ，理想情况下，这可能是您可能需要放置卫生逻辑的地方，例如，如果您希望只使用该标头放置某个请求，您可以在拦截方法中决定 .

    export class YourInterceptor implements HttpInterceptor{    
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
const NewRequest= req.clone({ headers: req.headers.set(‘Auth-Token’, ‘YourAuthToken’) });

    return next.handle（NewRequest）; }

    在此之后，您需要以下面给出的方式在app.module.ts文件中注册它，

    import { YourInterceptor } from './Your-interceptor';

    现在转到@NgModule部分并在提供者数组中执行此操作，它将是提供者数组，如下所示，

    providers: [{provide: HTTP_INTERCEPTORS,useClass: YourInterceptor,multi: true}],

    现在重新启动你的应用程序，无论你做什么http调用，它都将有一个控件，它将拦截你的代码，你将能够通过 .

    回复于

相关问题