Uploaded image for project: 'SonarHTML'
  1. SonarHTML
  2. SONARHTML-92

FP and FN from multiple rules when using Angular's property bindings

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.0.1
    • Fix Version/s: 3.1
    • Component/s: Parsing
    • Labels:
      None

      Description

      Angular enables developers to set HTML tags' attributes using a specific syntax called Property binding:

      <img [src]="myproperty">
      

      This syntax is not recognized by SonarHTML, which means that these rules will raise False Positives: RSPEC-1077, RSPEC-1098, RSPEC-1090, RSPEC-1099, RSPEC-1927, RSPEC-1436, RSPEC-1102, RSPEC-1100

      And these rules will raise False Negatives: RSPEC-1934, RSPEC-1088

      The following example demonstrates this behavior:

      <!DOCTYPE html>
      <html>
      
      <head>
          <title>Test</title>
          <!--https://rules.sonarsource.com/html/RSPEC-1098-->
          <link [rel]="shortcut icon" href="http://example.com/myicon.ico" /> <!--Compliant-->
      </head>
      
      <body>
          <!--https://rules.sonarsource.com/html/RSPEC-1077-->
          <img [alt]="myAltProperty" width="100" height="50" /> <!--Compliant-->
          <input type="image" src="bar.png" width="100" height="50" [alt]="Textual description of bar.png" /> <!--Compliant-->
      
      
          <!--https://rules.sonarsource.com/html/RSPEC-1090-->
          <frame src="index.php?p=menu" title="myTitle"> </frame> <!--Compliant-->
          <frame src="index.php?p=menu" [title]="myTitle"> </frame> <!--Compliant-->
      
          <!--https://rules.sonarsource.com/html/RSPEC-1099-->
          <img src="logo.png" alt="My Company" width="100" height="50" alt="test" /> <!--Compliant-->
          <img src="logo.png" alt="My Company" [width]="100" [height]="50" alt="test" /> <!--Compliant-->
          <input type="image" src="bar.png" [width]="100" [height]="50" alt="test" /> <!--Compliant-->
          <img alt="test"></img> <!--Non Compliant-->
      
          <!--https://rules.sonarsource.com/html/RSPEC-1935-->
          <h1 style="color: blue;">Hello World!</h1> <!--Noncompliant-->
          <h1 [style]="mystyle">Hello World!</h1> <!--Noncompliant-->
          <h1 ng-style="mystyle">Hello World!</h1> <!--Noncompliant--> <!--Angular 1-->
      
          <!--https://rules.sonarsource.com/html/RSPEC-1934-->
          <!--With "attributes" parameter = "disallowedattr"-->
          <a disallowedattr="42"></a> <!--Noncompliant-->
          <a [disallowedattr]="42"></a> <!--Noncompliant-->
      
          <!--https://rules.sonarsource.com/html/RSPEC-1927-->
          <!--With "attributes" parameter = "customtag.requiredattr"-->
          <customtag /> <!--Non Compliant-->
          <customtag [requiredattr]="42" /> <!--Compliant-->
          <customtag requiredattr="42" /> <!--Compliant-->
      
          <!--https://rules.sonarsource.com/html/RSPEC-1436-->
          <!--With "id" parameter = "myid"-->
          <div [id]="myID"></div> <!--Compliant-->
      
          <!--https://rules.sonarsource.com/html/RSPEC-1102-->
          <table border="1">
              <caption>
                  Contact Information
              </caption>
              <tr>
                  <td></td>
                  <th [id]="name">Name</th> <!--Compliant-->
                  <th id="phone">Phone#</th> <!--Compliant-->
                  <th [scope]="city">City</th> <!--Compliant-->
                  <th scope="city">City</th> <!--Compliant-->
              </tr>
          </table>
      
          <!--https://rules.sonarsource.com/html/RSPEC-1088-->
          <object>
              <embed src="movie_name.swf" [wmode]="direct" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> <!--Non comliant-->
          </object>
          <object>
              <embed src="movie_name.swf" wmode="direct" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> <!--Non comliant-->
          </object>
      </body>
      
      </html>
      

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              christophe.zurn Christophe Zurn
              Reporter:
              nicolas.harraudeau Nicolas Harraudeau (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Due:
                Created:
                Updated:
                Resolved: