DOMPurify VS core-js

Pure functions, by their nature, reduce the attack surface. Because they don’t modify external state, they’re less susceptible to side-effect vulnerabilities like object pollution or prototype attacks. However, if a pure function processes user input, it’s still crucial to validate and sanitize that input to prevent XSS or other injection attacks. Libraries like DOMPurify (https://github.com/cure53/DOMPurify) can be used to sanitize HTML content, and schema validation libraries like zod (https://github.com/colyseus/zod) can be used to validate data structures. Always treat user input as untrusted.

ECMAScript features like Proxy can be exploited if not used carefully. Avoid creating proxies that intercept sensitive operations without proper validation. Prototype pollution attacks are a concern; sanitize user input and avoid modifying the Object.prototype. XSS vulnerabilities can arise from improperly handling user-provided data in dynamic contexts. Use DOMPurify (https://github.com/cure53/DOMPurify) to sanitize HTML before rendering it. Validation libraries like zod (https://github.com/colyseus/zod) can enforce data schemas and prevent unexpected input.

Let's take a look at how we implement sanitization in the secure version of our vulnerable application. Since this application is primarily written using JavaScript, we use the dompurify library for the client side and the isomorphic-dompurify library for server-side sanitization. In the app.js program that acts as our web server, you will find an express endpoint /sanitized with a GET and POST implementation:

After several hours of code review, I finally spotted something unfamiliar in the Markdown Renderer component: a function called escapeHTML was being used to escape HTML, even though DOMPurify was already being used for sanitization right after!

DOMPurify Documentation

Use libraries such as DOMPurify to sanitize input.

//https://github.com/cure53/DOMPurify import React from "react"; import DOMPurify from "dompurify"; const sanitize = (dirty) => DOMPurify.sanitize(dirty); const DangerousHtml = ({ innerHTML, tag }) => { const clean = sanitize(innerHTML); if (typeof tag === "undefined") { return

; } return ; }; export default DangerousHtml;

Input Sanitization: The most crucial step in preventing XSS attacks is to ensure that all user-generated content is properly sanitized before it is rendered on the page. Use libraries like DOMPurify or built-in sanitization functions provided by your framework (e.g., React's dangerouslySetInnerHTML) to strip out any potentially harmful code.

When using dangerouslySetInnerHTML, it is crucial to sanitize the HTML strings to prevent XSS attacks. DOMPurify is a robust library that cleans HTML content by removing or neutralizing potentially dangerous scripts or tags.

Since marked doesn't do it for you, make sure you sanitize the user input (the text on the user profiles) before rendering it to visitors.

Some libraries for doing that with good defaults:

- https://github.com/cure53/DOMPurify

- https://github.com/apostrophecms/sanitize-html

- https://github.com/bevacqua/insane

(right now your site looks vulnerable to XSS)

Prototype-based inheritance is widely supported across modern browsers. However, older browsers (IE < 11) may have inconsistencies or performance issues. core-js (https://github.com/zloirock/core-js) provides polyfills for missing or buggy features, including Object.create() and prototype-related methods. Babel can be configured to transpile modern JavaScript code to older versions, ensuring compatibility. Feature detection using typeof or in operators can be used to conditionally apply polyfills only when necessary.

bind is widely supported. However, for legacy browsers (IE < 9), a polyfill is necessary. core-js provides a comprehensive polyfill suite, including bind.

Modern browsers generally have excellent support for Promises and the event loop. However, older browsers (especially IE) may require polyfills. core-js (https://github.com/zloirock/core-js) provides comprehensive polyfills for various ECMAScript features, including Promises. Babel can be configured to automatically include these polyfills during the build process.

Promises: core-js (https://github.com/zloirock/core-js) provides polyfills for Promises and other ECMAScript features.

Pure functions themselves don’t require polyfills. However, the APIs they use might. For example, Intl.NumberFormat has varying levels of support across older browsers. Polyfills like core-js (https://github.com/zloirock/core-js) can provide compatibility for older environments. Babel can be configured to automatically include necessary polyfills during the build process. Feature detection using typeof Intl !== 'undefined' && Intl.NumberFormat can be used to conditionally use the native API or a fallback implementation.

ES6 features like arrow functions and lexical this binding require polyfills for older browsers (IE11 and below). core-js (https://github.com/zloirock/core-js) provides comprehensive polyfills for various ES features. Babel (https://babeljs.io/) can be configured to transpile modern JavaScript code to older versions, automatically including necessary polyfills.

core-js (https://github.com/zloirock/core-js) provides polyfills for missing ECMAScript features. Configure Babel to use core-js to automatically include the necessary polyfills based on your target browser versions.

Just use the polyfill

https://github.com/zloirock/core-js#jsonparse-source-text-ac...

1) Consider this tweet, which shows proofs of the sale. If you'd seen the tweet of the founder earlier on top, he denies any influence over the sale. Well, who do we blame here? Maintaining an open source project requires a lot of efforts from the community and the maintainers. There are several layers to the governance. And projects which are so widely used, like polyfill.io, need to be updated at all times. This requires time out of your daily schedule and contributing for a better developer experience around the world. And only a few do really know the ins and outs of a project. Funding is a big part of an open-source project, without which it's very difficult to carry on day-to-day tasks for maintainers. Here's a heart-wrenching example of the core-js library we'd talked about in the 1st part. I recommend everyone to go through this once and understand the efforts and create maintainer relationships.

Don't forget that the author of core-js, a library not a service like polyfill but with almost the same goal, is tired of open source as well https://github.com/zloirock/core-js/blob/master/docs/2023-02...