Is it possible to sanitize [routerLink]?

Question

I am injecting unsanitized html into a component. When the route param changes, I go to the database and grab some new html and put it in the component. But when I do this, I get the message SafeValue must use [property]=binding:

My guess is that it is caused because the route is changing. My routerlink generation looks like this:

<li routerLinkActive="active" *ngFor="let form of translationData.caseForms" ><a [routerLink]="[currentTransCode, 'form',form.ClaimTemplateID]" class="navbar-link">{{form.WebsiteLinkTitle}}</a></li>

Here are steps:

Go to http://localhost:4300/us/form/5406 - NO error
Go to http://localhost:4300/us/form/6411 - Error

form.component.html:

<div class="container" *ngIf="!loading">
  <div *ngIf="!isAuthenticated">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <strong>Login </strong>
        </h3>
      </div>
      <div class="panel-body">
        <div role="form">
          <div class="form-group">
            <label for="exampleInputEmail1">{{token1Label}}</label>
            <input type="email" class="form-control" id="exampleInputEmail1" required placeholder="Enter {{token1Label}}" #token1>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">{{token2Label}}

            </label>
            <input type="password" class="form-control" id="exampleInputPassword1" required placeholder="Enter {{token2Label}}" #token2>
          </div>
          <button type="button" (click)="login(token1,token2)" class="btn btn-sm btn-primary">Login</button>
        </div>
      </div>
    </div>

  </div>


  <div *ngIf="isAuthenticated">
    <div class="page-header paddingpushdown">
      <h2>{{formTitle}}</h2>
    </div>
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <formly-form [model]="model" [fields]="fields" [options]="options" [form]="form">
        <button type="submit" class="btn btn-default">Submit</button>

      </formly-form>

    </form>
  </div>
</div>

Wrapping unsanitized html:

Jacob Aldridge · Answer 1 · 2018-04-19T18:21:16.303

0

Angular will sanitize HTML if you use the [innerHTML] binding.

<div [innerHTML]="html_goes_here"></div>

I hope this example helps. However, you seem to be asking about the [routerLink] so this is not likely what you are looking for. If not, can you give more details on the parameters being passed in [routerLink]?

edited Apr 19 '18 at 18:21

answered Apr 19 '18 at 18:19

Jacob Aldridge

286
3
7

I am passing the html to ngx-formly. I don't have any control over using [innerHTML]. Why does it only display the error when I change routes? – xaisoft Apr 19 '18 at 18:20
The parameters passed in are a language code: 'en' or 'es' for example. the word 'form', followed by a number (6411 or 5406) – xaisoft Apr 19 '18 at 18:22
It only shows the message on the screen when I start changing the route (switching from 5406 to 6411 and vice versa) – xaisoft Apr 19 '18 at 18:23
Is your example above generated by Formly or you have control over it? – Jacob Aldridge Apr 19 '18 at 18:24
I have control over that. – xaisoft Apr 19 '18 at 18:25
It would seem odd to me that your route change causes the issue, but I'm trying to walk through your steps in my mind so I will endeavor to remember that. Can you give more details on the component that is being rendered? The only thing we have to go with is the [routerLink] which ties into the router and nothing else. – Jacob Aldridge Apr 19 '18 at 18:29
I added an image. I noticed it just wraps by unsanitized html with that message in the image. – xaisoft Apr 19 '18 at 18:35
i noticed if I hard-code the string `'
SIGN HERE PLEASE - THIS IS VERY IMPORTANT
'`, it works fine, but when I get it from the database, it then shows the error. – xaisoft Apr 19 '18 at 18:46
Have you taken a look at https://stackoverflow.com/questions/45351434/safe-value-must-use-property-binding-after-bypass-security-with-domsanitizer for how to bypass the sanitizer? – Jacob Aldridge Apr 19 '18 at 18:46
This is what I am doing, but when the html changes, it displays the message – xaisoft Apr 19 '18 at 18:49
I can confirm that it only occurs when the html changes within the component. – xaisoft Apr 19 '18 at 18:50

Is it possible to sanitize [routerLink]?

1 Answers1