<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>Generic title</title> <link rel="stylesheet" href="./stylesheets/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css"> </head>Error en el navegador:
127.0.0.1/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. 127.0.0.1/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. 127.0.0.1/:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.Tengo el mismo problema al hacer referencia a mis propios archivos javascript. Estoy usando express para mi backend. Estoy tratando de evitar el uso de 'unsafe-inline' 'unsafe-eval'. Si desactivo el CSP desde el casco, funciona bien, pero nuevamente me gustaría evitar esto.
Tenía el casco configurado incorrectamente, estaba bloqueando las fuentes a las que intentaba hacer referencia en la etiqueta html. haciendo algo como
app.use( helmet.contentSecurityPolicy({ directives: { defaultSrc: ["'self'"], scriptSrc: scriptSources, scriptSrcElem: scriptSources, styleSrc: styleSources, connectSrc: connectSources, } }) );en cambio, donde las constantes tienen mis fuentes definidas en ellas, me permite usar de manera segura archivos javascript externos sin comprometer la seguridad de mis sitios