Scribd Logo
Upload

Welcome to Scribd!

  • 248 views

    Cheat Sheet: 10 React Security Best Practices

    Uploaded by

    radu
    Use data binding with curly braces to protect against XSS attacks. Validate URLs before use and sanitize any HTML content before rendering it with dangerouslySetInnerHTML. Check dependencies for known vulnerabilities and use security linters to detect issues in code.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Cheat Sheet: 10 React Security Best Practices

    Uploaded by

    radu
    248 views1 page
    Use data binding with curly braces to protect against XSS attacks. Validate URLs before use and sanitize any HTML content before rendering it with dangerouslySetInnerHTML. Check dependencies for known vulnerabilities and use security linters to detect issues in code.

    Original Description:

    Cheat Sheet: 10 React Security Best Practices

    Original Title

    10 React Security Best Practices CheatSheet

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Use data binding with curly braces to protect against XSS attacks. Validate URLs before use and sanitize any HTML content before rendering it with dangerouslySetInnerHTML. Check dependencies for known vulnerabilities and use security linters to detect issues in code.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    248 views1 page

    Cheat Sheet: 10 React Security Best Practices

    Uploaded by

    radu
    Use data binding with curly braces to protect against XSS attacks. Validate URLs before use and sanitize any HTML content before rendering it with dangerouslySetInnerHTML. Check dependencies for known vulnerabilities and use security linters to detect issues in code.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 1

    Cheat Sheet: 10 React Security Best Practices

    1. Default XSS Protection with Data Binding 5. Server-side Rendering 8. Vulnerable Versions of React
    Use default data binding with curly braces {} and React will Data binding will provide automatic content escaping when using
    The React library has had a few high severity vulnerabilities in the past,
    automatically escape values to protect against XSS attacks. server-side rendering functions like ReactDOMServer.renderTo-
    so it is a good idea to stay up-to-date with the latest version.
    Note that this protection only occurs when rendering textContent and String() and ReactDOMServer.renderToStaticMarkup().
    not when rendering HTML attributes.
    Avoid vulnerable versions of the react and react-dom by
    Avoid concatenating strings onto the output of renderTo
    verifying that you are on the latest version using npm outdated
    Use JSX data binding syntax {} to place data in your elements. String() and renderToStaticMarkup() before sending the
    to see the latest versions.
    Ex. <div>{data}</div>. strings to the client for hydration or rendering.
    Use nyk to automatically update to new versions when
    Avoid dynamic attribute values without custom validation.
    Don’t use <form action={data}>... 6. Known Vulnerabilities in Dependencies vulnerabilities exist in the versions you are using.

    Some versions of third-party components might contain security


    2. Dangerous URLs issues. Check your dependencies and update when better versions 9. Linters
    become available.
    URLs can contain dynamic script content via javascript: protocol urls.
    Install Linters configurations and plugins that will automatically detect
    Validate URLs before use.
    Use a tool like the free nyk cli to check for security issues in your code and offer remediation advice.
    vulnerabilities.
    Use validation to assure your links are http or https to avoid
    Use the ESLint React security config to detect security issues in
    javascript: URL based script injection. Achieve URL validation Automatically fix vulnerabilities with nyk by integrating our code base.
    using a native URL parsing function then match the parsed with your source code management system to receive
    protocol property to an allow list. automated fixes. Configure a pre-commit hook that fails when security related
    linter issues are detected using a library like husky.
    3. Rendering HTML $ npx snyk test

    It is possible to insert HTML directly into rendered DOM nodes using 10. Dangerous Library Code
    dangerouslySetInnerHTML. Any content inserted this way must be 7. JSON State
    sanitized beforehand. Library code is often used to perform dangerous operations like directly
    It is common to send JSON data along with server-side rendered React inserting HTML into the DOM. Review library code manually or with
    Use a sanitization library like DOMPurify on any values before pages. Always escape < characters with a benign value to avoid linters to detect unsafe usage of React’s security mechanisms.
    placing them into the dangerouslySetInnerHTML prop. injection attacks.
    Avoid libraries that do use dangerouslySetInnerHTML,
    import purify from "dompurify"; Avoid unescaped HTML significant values in JSON state innerHTML, unvalidated URLs or other unsafe patterns.
    <div dangerouslySetInnerHTML={{__html:purify.sanitize(data)
    objects.
    }} /> Use security linters on your node_modules folder to detect
    <script> unsafe patterns in your library code.
    // WARNING: See the following for security
    4. Direct DOM Access issues around embedding JSON in HTML:
    // https://redux.js.org/recipes/server-ren-
    dering/#security-considerations Ron Perris
    Accessing the DOM to inject content into DOM nodes directly should be window.__PRELOADED_STATE__ = ${JSON.stringi- Developer Advocate at Snyk
    avoided. Use dangerouslySetInnerHTML if you must inject HTML and fy(preloadedState).replace(
    sanitize it before injecting it using DOMPurify. /</g,
    '\\u003c')}
    </script> Liran Tal
    Avoid using refs and findDomNode() to access rendered DOM Node.js Security WG & Developer Advocate
    elements to directly inject content via innerHTML and similar at Snyk
    properties and methods.

    You might also like