我目前在尝试设置我的 CSP 策略以允许受限服务器上的功能时遇到问题。 我最初有 3 个问题，后来修复了其中两个。 我遇到的具体问题是我的 web3 javascript 调用违反了 default-src 'self'。 我已经尝试用一百万种不同的方式编写我的 CSP，但仍然没能解决这个问题。 我知道 web3 连接的这个 url 有效，因为只要它在不受限制的服务器上运行，同一行就可以内联和本地（外部 js）工作。 当我尝试使用 Pinata 进行固定时，我必须满足更高的 CSP 标准，我不介意这样做，因为这是一种很好的做法，但我不知道我从这个 CSP 中遗漏了什么才能使调用正常工作。 HTML:
<!DOCTYPE html>
<html>
<head>
<title>LootCache</title>
<meta http-equiv="Content-Security-Policy"
content="
default-src 'self';
style-src 'unsafe-inline';
img-src https://ipfs.io;
script-src 'self' https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js;
">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="https://gateway.pinata.cloud/ipfs/QmUcTXCueCsKRQEy9boT5WBUxKECKUh7BTV4GRUySQS5dX" defer></script>
<style>
body {
background-color: black;
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
border: 5px solid gold;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
overflow: auto;
}
h1 {
font-size: 50px;
font-weight: bold;
color: gold;
margin: 10px 0;
display: flex;
align-items: center;
}
.input-container {
background-color: white;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-sizing: border-box;
max-width: 800px;
}
input[type=text] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
margin-bottom: 10px;
}
button {
background-color: gold;
color: black;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.response {
color: gold;
font-size: 20px;
margin-top: 10px;
word-wrap: break-word;
text-align: center;
}
img {
display: block;
max-height: calc(100vh - 300px);
margin: 10px auto;
object-fit: contain;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="https://ipfs.io/ipfs/QmXjtBuhfDRZfTXZjF2dpJ4mSnmjj5RPow4qMY5X6ZQ6QU?filename=LootCache-1.png" alt="LootCache">
<h1></h1>
<div class="input-container">
<label for="ethAddress">Enter Ethereum Address (No ENS):</label>
<input type="text" id="ethAddress" name="ethAddress" placeholder="0x...">
<button id="checkBalanceBtn">Check Your Stash!</button>
</div>
<div class="response" id="response"></div>
</div>
</body>
</html>
&我的.js脚本文件：
async function getBalance(address) {
const response = await fetch(`https://mainnet.infura.io/v3/fb3bba54ae0449c28400a4e28fb61e6c?module=account&action=balance&address=${address}`);
const data = await response.json();
return data.result;
}
function displayAddress() {
var address = document.getElementById("ethAddress").value;
var provider = new Web3.providers.HttpProvider("https://mainnet.infura.io/v3/fb3bba54ae0449c28400a4e28fb61e6c");
var web3 = new Web3(provider);
web3.eth.getBalance(address, function(error, balance) {
if (error) {
document.getElementById("response").innerHTML = "Error: " + error.message;
} else {
var balanceInEther = web3.utils.fromWei(balance, "ether");
var formattedBalance = parseFloat(balanceInEther).toFixed(4);
document.getElementById("response").innerHTML = "Address: " + address + "<br>Balance: " + formattedBalance + " ETH";
}
});
}
document.getElementById("checkBalanceBtn").addEventListener("click", displayAddress);
我将不胜感激！
试过：