Security Checklist for Front-end

HTML Injection#

• Avoid using unsafe HTML parsing options (React’s dangerouslySetInnerHTML, Vue’s v-html and innerHTML), or
• Store and send only sanitized HTML content in the backend to the frontend.
• Sanitize HTML content using library such as dom-purify before parsing.

URL Injection#

• Sanitize URL in the back-end before sending to frontend.
• Sanitize URL in the frontend using library such as sanitize-url before rendering.

Style Injection#

• Avoid injection of full CSS rules. Only allow user to provide CSS values through the built-in style binding of the project’s frontend library. For example: Vue’s object syntax , Svelte’s style directive

JavaScript Injection#

• Avoid injection of external JavaScript via all means. If injection is necessary, e.g. Google OAuth, seek for equivalent NPM package, e.g. google-auth-library , to be able to scan for security issues.

Cookie#

• Use only HttpOnly cookie (not readable by JavaScript) to avoid potential XSS attacks.

Web Storage API (Session Storage/Local Storage)#

• Avoid storing user’s credentials, data or combination of data that can potentially reveal user personal information or identity.
• Encrypt data before storing into session storage/local storage using standard libraries like crypto-js .

Read more#

• External Resources