[search-parts] Sanitized HTML in templates + CSS prefixing #172
Conversation
FranckyC
commented
Apr 3, 2020
FranckyC
commented
- Added sanitization with DOMPurify for every dangerouslySetInnerHTML
- Added CSS prefixing with Web Part instance ID for custom CSS in templates. Support regular CSS rules + Media queries.
…DOMPurify to prevent XSS attacks. Now we use 'data-' attributes for all web components + auto CSS prefix for custom CSS classes based on the Web Part instance ID.
- Added support for CSS Media rule.
|
@wobba If you could review this one to make sure we are aligned. |
docs/search-parts/templating.md
Outdated
| @@ -145,6 +145,14 @@ If provided layouts don't meet your requirements, you can modifiy them or start | |||
|
|
|||
|  | |||
|
|
|||
| ### Styling | |||
|
|
|||
| You can write your own CSS styles inside templates. However, all CSS rules (including `@media` rules) will be prefixed automatically by an unique ID according to the follwoing pattern (**pnp-modern-search-template_\<Web Part instance ID\>**) to make sure styles are isolated fronm other Web Parts on the page. | |||
| attr = matches[1]; | ||
|
|
||
| // Booleans | ||
| if (/^(true|false)$/.test(value)) { |
There was a problem hiding this comment.
Should this regex be case insensitive?
There was a problem hiding this comment.
Right this could be /i
|
Looks good, but I will do some more tests. Will the ''data" prefix be breaking? If so we should consider how to version it, or if we can auto handle upgrading. |
| if (template) { | ||
|
|
||
| // Sanitize the template HTML | ||
| template = template ? this._domPurify.sanitize(`${template}`) : template; |
There was a problem hiding this comment.
Do you need inline if when you have if check on line above?
|
If people used custom web components, yes it will break. I can remove the check of |
|
For custom components it should be ok. What if someone used the oob components manually in a template? Maybe we need to mark some functionality as preview to iron out issues when weintroduce it, and still keep versioning simple :) Feel free to merge this one. |
Spelling fix
Added regex case insensitive
Removed unneeded check
