feat: Configure Mozilla's Eslint Plugin eslint-plugin-no-unsanitized + DOMPurify.sanitize + escapeHtml

andreituicu commented 1 month ago

Building on top of https://github.com/adobe/aem-boilerplate/pull/415

Test urls:

fkakatie commented 1 month ago

results of aem-psi-check would be necessary here.

andreituicu commented 1 month ago

@fkakatie completely agree. It looks like there's a problem with my fork, because when I access https://xss-lint-dompurify--helix-project-boilerplate--andreituicu.aem.live the head doesn't have any scripts/css... Could I possibly get write permissions to the boilerplate? That way I can create the branches directly in the project and recreate the PRs including PSI values.

andreituicu commented 1 month ago

@rofe I agree with your suggestions of moving different changes into aem-lib and aem-block-collection. I created this PR mostly as a consolidated view to collect feedback and discuss whether this is a direction we'd like to go in, or not.

I'm not 100% convinced it is simple enough for developers (which I might be wrong) when they should escape, when they should sanitize and when are both needed.

Using any of them will make the linter happy, but depending on context they aren't both secure, or said differently, each offers protection in specific cases.

I'm not sure if it would be a better approach to just keeping it simple by saying that any use of unsafe API is unsafe. The problem then becomes creating big structures with just document.createElement, document.appendChild and document.setAttribute and fragments always need to disable the linter rules, like: https://github.com/adobe/aem-boilerplate/pull/415/files#diff-7fdbc35e8d9d1b49261e0470a1900621a5eb2508a2818a9ee18e2e60514fae4eR26