Angular и Iframe не перенаправляют правое окно - PullRequest
Новая
       9

Angular и Iframe не перенаправляют правое окно

0 голосов
/ 23 мая 2018

У нас есть приложение на Angular, в котором нам нужно перенаправить пользователя на страницу входа в систему (когда пользователь не аутентифицирован или когда токен истек).

Мы используем HttpInterceptor для обработки 401 HTTPкод состояния (приведенный ниже исходный код был, конечно, упрощен, чтобы сделать его понятнее) 

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {
  constructor(private router: Router, private inj: Injector, @Inject(DOCUMENT) private document: any) {
  }

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


        const headers = new HttpHeaders({
            'X-Requested-With': 'XMLHttpRequest',
        });

        const changedReq = req.clone({ headers, withCredentials: true });

        return next.handle(changedReq)
            .map((event: HttpEvent<any>) => {
                return event;
            })
            .do(event => {
            })
            .catch((err: any, caught) => {
                if (err instanceof HttpErrorResponse) {
                    switch (err.status) {
                        case 401:
                          this.document.location.href = <external-url> 
                          return Observable.throw(err);
                        default:
                          return Observable.throw(err);
                    }
                } else {
                    return Observable.throw(err);
                }
            });
    });
}

}

Все работает нормально, когда приложение запускается из браузера с URL-адресом, таким как https://localhost:4200

Но теперь нам нужно включить наше приложение в iframe (мы не будем владельцем родительского контейнера).

Чтобы протестировать наше приложение внутри iframe, у нас есть следующий HTML 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Fake Portal</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <h1>My Fake Portal</h1>
    <br/>
    <br/>

    <iframe width="100%" src="https://localhost:4200"></iframe>
</body>

</html>

Интеграция работает, но когда HttpInterceptor пытается достичь страницы входа с помощью this.document.location.href, он перенаправляетбраузер вместо перенаправления iframe (а затем уничтожения родительского контейнера).

this.document должен быть текущим документом, а не верхним документом DOM.

У кого-нибудь есть идея?

1 Ответ

0 голосов
/ 23 мая 2018

Способ предотвращения перенаправления браузера в iFrame - использование атрибута песочницы в теге iframe.В вашем случае вы должны поставить что-то вроде этого:

<iframe sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts">

Это все еще позволит все, что было разрешено, за исключением top-navigation (что означает изменение URL-адреса родителя.

Вы можете найти больше информации об этом здесь: https://www.w3schools.com/tags/att_iframe_sandbox.asp

...