Question

我们在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);
                }
            });
    });
}

}

使用类似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的顶级文档。

有人有想法吗？

Answer 1

阻止iFrame重定向浏览器的一种方法是使用iframe标记上的sandbox属性。在你的情况下，你应该这样：

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

这仍然允许它允许的所有内容，除了顶部导航（这意味着更改父级的URL。

您可以在此处找到有关它的更多信息：https://www.w3schools.com/tags/att_iframe_sandbox.asp

Angular和Iframe不会重定向右侧窗口

1 个答案: