Angular - AuthGuard is redirecting Iframe

Question

I am implementing an iFrame in my angular application. When i am giving the src url directly in the html, the app is working fine and loading the requested UI. But when i am fetching the src url from backend and passing it as a variable auth guard is redirecting the url to login page. How to fix this?

DefectsManagementComponent.html:

<div class="container-fluid dtep-style dtep-min-height-569px-minus-56px">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <iframe id="defects" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" title="Defects Management" src="url">
                </iframe>
            </div>
        </div>
    </div>
</div>

DefectsManagementComponent.ts:

export class DefectsManagementComponent implements OnInit {

  url: string;

  constructor(private service: SolutionInstanceService) {
   }

  ngOnInit() {
    this.service.fetchSolutionByName("DEFECT_MANAGEMENT").subscribe(data =>{
      this.url = data["solutionURL"];
    });
  }

}

AppRoutingModule.ts:

   const routes: Routes = [
        {
         path: "login",
         component: LoginComponent
        },
        {
        path: "home",
        canActivate: [AuthGuardGuard],
        component: HomeComponent
        },
        {
        path: "defects",
        component: DefectsManagementComponent
        },
        {
        path: "",
        redirectTo: "login",
        pathMatch: "full"
        },
        {
        path: "**",
        redirectTo: "login",
        pathMatch: "full"
          }
        ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule

try console logging url after it has been set, to see if it is the correct value. If that is the return of an http call, you might need to call result on it. — Andrei Dumitrescu-Tudor, Nov 19 '18 at 07:30
I have logged it, the value is being fetched but when i am inspecting, it is showing the value of src as null in the source code. — Yerramsetty G D Surya Prakash, Nov 19 '18 at 07:31
Most of the times it is trying to access "http:localhost:4200/url" When i am giving src="url", it is accessing "http:localhost:4200/url" and when i change it to [src]="url", the url value is null — Yerramsetty G D Surya Prakash, Nov 19 '18 at 07:39
Src=“url” is just an assignment, while [src] binds the value of url to this property. One more thing to try is doing an ngIf on the iframe, to show up only when url is set. — Andrei Dumitrescu-Tudor, Nov 19 '18 at 07:45
I gave the ngIf. it waited until the value came in but again tried to access "http:localhost:4200/url" and got redirected to login. — Yerramsetty G D Surya Prakash, Nov 19 '18 at 07:52
In this last test, you used the square brackets on src right? It should be the value you received or null. — Andrei Dumitrescu-Tudor, Nov 19 '18 at 07:54
When i am using [src] along with ngIf it is giving "unsafe value used in a resource URL context" error — Yerramsetty G D Surya Prakash, Nov 19 '18 at 07:59
See this https://stackoverflow.com/a/38269951/10632970 you need to sanitize the url first — Andrei Dumitrescu-Tudor, Nov 19 '18 at 08:01
Added it as an answer so it could be accepted :) @YerramsettyGDSuryaPrakash — Andrei Dumitrescu-Tudor, Nov 19 '18 at 08:29

score 3 · Accepted Answer · answered Nov 19 '18 at 08:29

You should use square brackets around src to bind the value of url to it, otherwise you are assigning the string “url” to src. Also use ngIf on the iframe to only show it when url is populated. You then need to sanitize the url. See more at https://stackoverflow.com/a/38269951/10632970 .

Angular - AuthGuard is redirecting Iframe

1 Answers1