Third-Party React Libraries

Managing third-party libraries in React applications requires careful CSP consideration:
// csp-library-config.js
export const libraryCSPRequirements = {
  'react-select': {
    'style-src': ["'unsafe-inline'"], // Requires inline styles
    'img-src': ['data:'] // Uses data URIs for icons
  },
  'react-datepicker': {
    'style-src': ["'self'"],
    'font-src': ["'self'"]
  },
  '@mui/material': {
    'style-src': ["'self'", "'unsafe-inline'"],
    'font-src': ['https://fonts.gstatic.com'],
    'style-src-elem': ['https://fonts.googleapis.com']
  }
};

// Helper to generate CSP based on installed libraries
function generateCSPForLibraries(installedLibraries) {
  const policy = {
    'default-src': ["'self'"],
    'script-src': ["'self'"],
    'style-src': ["'self'"],
    'img-src': ["'self'"],
    'font-src': ["'self'"]
  };
  
  installedLibraries.forEach(lib => {
    const requirements = libraryCSPRequirements[lib];
    if (requirements) {
      Object.entries(requirements).forEach(([directive, sources]) => {
        policy[directive] = [...new Set([...policy[directive], ...sources])];
      });
    }
  });
  
  return policy;
}