Axios CDN link refused to load

Question

I am using the axios CDN link but it gives this error

Refused to load the script 'https://unpkg.com/axios/dist/axios.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.

I am using the pug template engine. Here is my base.pug code:

doctype html
html
    head
        meta(charset='UTF-8')
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
        title Natours |#{title}
        link(rel='stylesheet' href='/css/style.css')
        link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
        link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
    
    body
        //header
        include _header         

        //content
        block content
            h1 this is a placeholder

        //footer
        include _footer  

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
        script(src='/js/login.js')  

and here is my login.js

const login=async (email,password)=>{
    try{
        console.log(email,password)
        const res=await axios({
        method:'POST',
        url:'http://127.0.0.1:3000/api/v1/users/login',
        data:{
            email,
            password
        }
    })
    console.log(res);
    }catch(err){
        console.log(err.res)
    }
}


document.querySelector('.form').addEventListener('submit',(e)=>{
e.preventDefault();
const email=document.getElementById('email').value;
const password=document.getElementById('password').value;
login(email,password)
})

Another thing I also tried:

add a <meta> tag to modify CSP, but I cannot modify the 'script-src', I don't know why. I guess I can only add more restricts to the CSP to make it more secure, but I cannot loosen it maybe by security concern.

Answer 1

Finally i am answering my own question. First of all we need to know about content security policy(CSP).So, have a look here https://content-security-policy.com/ . Here i have using helmet to set some headers .

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'", 'data:', 'blob:'],
 
      fontSrc: ["'self'", 'https:', 'data:'],

      scriptSrc: ["'self'", 'unsafe-inline'],
 
      scriptSrc: ["'self'", 'https://*.cloudflare.com'],
 
      scriptSrcElem: ["'self'",'https:', 'https://*.cloudflare.com'],
 
      styleSrc: ["'self'", 'https:', 'unsafe-inline'],
 
      connectSrc: ["'self'", 'data', 'https://*.cloudflare.com']
    },
  })
);

and all done. One thing that i should tell that please check your domain what exactly you are using , in my case i am using 127.0.0.1 and i constantly requesting through localhost. So, the headers which i set is only works for 127.0.0.1 not for localhost. And one last thing if you want to use 'axios' please use through 'npm' not by any CDN.