False positive for SVG element foreignObject in SonarCloud

[Matija_Lukic]

• Version:
  SonarCloud

• error observed
  SonarCloud does not recognize a valid SVG element foreignObject, although it does recognize elements like path
  

  
  
  https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

• steps to reproduce: see snapshot

• potential workaround: non found apart from declaring it as a false-positive, it broke out quality gate since it’s categorized as a bug.

Do I need to do something special to enable recognition of this SVG elements?

[Matija_Lukic]

Is there anyone from SonarCloud to assist here? I don’t really understand why this false positive occurs… Did anyone else notice the same behavior? Are there some settings I need to adjust?

[Nicolas_Harraudeau]

Hi @Matija_Lukic ,

Thank you for reporting this issue. It is indeed a false positive. I created the corresponding ticket: https://github.com/SonarSource/sonar-css/issues/206

In the meantime the workaround is to add foreignObject to the “ignoreTypes” parameter of the rule S4670 “Selectors should be known”. Example: ignoreTypes = /(^mat-)|foreignObject/

Cheers,
Nicolas

[Matija_Lukic]

Thanks Nicolas! Can you just point me to where exactly I should change this parameter in my SonarCloud project?

[Nicolas_Harraudeau]

First you need to have a custom quality profile (skip these steps if you already have one):

• Go to your organization
• Click on “Quality Profiles” in the menu below the organization name
  => You should be on a page like this one.
• Search for the “CSS” quality profile. Click on the dropdown on its right and select “Extend”.
• Create your new Quality Profile.

One you have a custom quality profile for CSS you can customize the configuration of the rule:

• Go to your organization
• Click on “Rules” in the menu below the organization name
• Search for the rule named “Selectors should be known”, then select it.
  => You should arrive on a page like this.
• At the bottom you have a list of quality profiles where the rule is enabled.
• Click “change” on the right of your new quality profile.
• Change the “ignoreTypes” field to /(^mat-)|foreignObject/

Finally you need to make sure that the new Quality Profile is used by your project:

• Go to your project
• Click on “Administration” in the menu below the project name.
• Select “Quality Profiles”
• Change the CSS quality profile to match your new one.

Now you can reanalyze your project and see the updated result.