False positive for SVG element foreignObject in SonarCloud

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

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?

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/


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

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.