Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon: Remove inline style in GitHub icon to fix CSP error #4487

Merged
merged 2 commits into from
Feb 15, 2022

Conversation

aduth
Copy link
Contributor

@aduth aduth commented Jan 29, 2022

Description

This pull request seeks to resolve an error which can occur when using the USWDS Icon component SVG sprite in combination with a Content Security Policy (CSP), where the presence of an inline style tag within the GitHub icon can violate most common CSPs which do not include the unsafe-inline style-src directive.

image

Additional information

The process for resolving this was to simply drop the SVG markup into the SVGOMG online SVGO optimizer tool. The produced output minified the markup and inlined the fill-rule as an HTML attribute.

An alternative solution could be to simply remove the style tag (and accompanying class attribute) and instead add the equivalent fill-rule="evenodd" attribute to the <path> element.


Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aduth could you please include these changes in these other files too?

  • src/img/uswds-icons/github.svg
  • src/img/material-icons/github.svg

@aduth
Copy link
Contributor Author

aduth commented Feb 8, 2022

@aduth could you please include these changes in these other files too?

Sure, assuming it's the same icon, I copied the new version to replace those as well in 169e948.

Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thanks a lot!

@mejiaj mejiaj removed their assignment Feb 8, 2022
@thisisdano thisisdano merged commit 86636ea into uswds:develop Feb 15, 2022
@thisisdano thisisdano mentioned this pull request Mar 7, 2022
@aduth aduth deleted the aduth-rm-icon-inline-style branch March 31, 2022 14:04
@aduth aduth restored the aduth-rm-icon-inline-style branch March 31, 2022 14:04
@aduth aduth deleted the aduth-rm-icon-inline-style branch March 31, 2022 14:04
@aduth aduth restored the aduth-rm-icon-inline-style branch March 31, 2022 14:04
@aduth aduth deleted the aduth-rm-icon-inline-style branch March 31, 2022 14:04
mejiaj pushed a commit that referenced this pull request Apr 6, 2022
Icon: Remove inline style in GitHub icon to fix CSP error
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants