Axios CDN link 拒绝加载

Question

我正在使用 axios CDN link 但它给出了这个错误

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.

我正在使用 pug 模板引擎。这是我的 base.pug 代码：

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')

这是我的 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)
})

另一件事我也尝试过：

添加一个<meta>标签来修改CSP，但是我不能修改'script-src'，不知道为什么。我想我只能对 CSP 添加更多限制以使其更安全，但我不能出于安全考虑放松它。

Answer 1

终于要回答我自己的问题了。首先我们需要了解内容安全策略（CSP）。所以，看看这里 https://content-security-policy.com/ 。在这里，我使用头盔设置了一些 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']
    },
  })
);

全部完成。我应该告诉你的一件事是请检查你的域你到底在使用什么，在我的例子中我使用的是 127.0.0.1 并且我不断地通过本地主机请求。因此，我设置的 headers 仅适用于 127.0.0.1，不适用于本地主机。最后一件事，如果你想使用 'axios'，请通过 'npm' 使用，而不是通过任何 CDN。

Axios CDN link 拒绝加载

Axios CDN link refused to load

javascript

axios

pug