lint errors blocking did some research but not successful

Viewed 116
  • I am new to tslint and typescript.
  • I am trying to fix this error.
  • can you tell me how to fix it.
  • i did some research but not able to find solutions.
  • providing code below.

(no-inner-html) app/components/sports.ts[717, 9]: Using the html() function to write a string to innerHTML is insecure: $('.tubing').html(health.title)

if (health.title == "waterS") {
      let that = this;
      let recordPlayersWeight = {};
      this.futureParrot = [];
      this.pastParrot = [];
      this.peacockService.getResponse(health.url, 'get', null)
        .subscribe(recordPlayersWeight => {
            this.gridData = recordPlayersWeight.waterDtos;
            that._recordPlayersWeightSource.recordPlayersWeight(this.gridData);
          },
          err => {
          }
        );
    }

    that.window = $("#TigerwatersPopup");
    that.window.kendoWindow({
      width: "60%",
      title: false,
      visible: false,
      resizable: false,
      actions: [],
      draggable: false,
      modal: true,
      open: function() {
        $("html, body").css("overflow", "hidden");
        that.isVisible = true;
        $('.tubing').html(health.title);
1 Answers

When you use jQuery's .html() function, it's possible to accidentally add "unsafe" elements to your page, for example iframe tags or source tags. If the html you add was submitted by a malicious user (e.g. as part of a query or data entered in a form), you're giving them a way to attack you. It's a form of code injection attack (see https://en.wikipedia.org/wiki/Code_injection).

In your case it looks like you're just trying to put plain text into the .tubing element, so it's safer to do

$('.tubing').text( health.title );

What this does is it "escapes" any HTML special characters like < or > so that they appear as text rather than being treated as elements. This is safe and prevents code injection by an attacker, and will not trigger the lint rule.

Related