连接BrasilAPI时遇Content Security Policy脚本加载错误求助

问题分析 #

错误提示显示当前生效的CSP规则script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'阻止了加载https://apis.google.com/js/api.js。你的代码里没有直接引入该脚本，大概率是Font Awesome Kit这类依赖间接触发了它的加载，而现有CSP规则未允许对应源。

另外注意：你HTML头部的meta标签仅设置了upgrade-insecure-requests，说明实际生效的CSP来自其他渠道——可能是服务器响应头，或是开发构建工具自动注入的规则。

解决方案 #

1. 调整Content Security Policy规则 #

需要在CSP中添加允许加载相关外部脚本的源：

• 允许Font Awesome Kit的脚本源：https://kit.fontawesome.com
• 允许Google的脚本源：https://apis.google.com

如果通过meta标签设置CSP，修改对应的meta标签为：

<meta http-equiv="Content-Security-Policy" content="
  upgrade-insecure-requests;
  script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' https://kit.fontawesome.com https://apis.google.com;
  style-src 'self' https://kit.fontawesome.com;
  font-src 'self' https://kit.fontawesome.com;
">

如果是服务器端设置CSP响应头，需要在Content-Security-Policy字段中添加上述源。

2. 修复JavaScript代码的两处问题 #

你的循环逻辑和DOM插入方式存在错误，修改后代码如下：

async function carregarEstados(){
    const APIResponse = await fetch(`https://brasilapi.com.br/api/ibge/uf/v1`)
    if(APIResponse.status === 200){
        const data = await APIResponse.json()
        console.log(data[0]['sigla'])
        for (let index = 0; index < data.length; index++) {
            const option = document.createElement('option')
            option.value = data[index]['sigla']
            option.textContent = data[index]['sigla']
            document.querySelector('#estado').append(option)
        }
    }else{
        console.log("Algo deu errado")
    }
} 

修改点说明：

• 循环从索引0开始，避免漏掉第一个州的数据，同时防止访问超出数组长度的undefined项
• 使用createElement创建option元素后再插入DOM，替代直接拼接HTML字符串的方式，避免append()方法无法识别HTML字符串的问题

额外提示 #

如果是在Vite、Create React App这类开发环境中，工具可能会自动注入CSP规则，需要在对应配置文件中修改CSP相关设置；生产环境则需确保服务器配置的CSP响应头包含必要的源。

内容的提问来源于stack exchange，提问作者G4rutti