javascript - 我需要帮助找出正确的 CSP 标头

Question

我目前正在编辑我在 codepen 上找到的 DNS-Lookup 工具。在我的本地主机上一切正常，但每当我尝试在我的网站上实现它时，该工具就不再工作了。我尝试使用 no-cors 模式执行获取请求，但这也不起作用。我认为我需要做的就是设置正确的 CSP，以便可以使用我的获取源 cloudflare-dns.com。我尝试了很多不同的东西，但我找不到正确的 CSP 是什么以及在哪里实现它。

<form id="form" style="padding: 10px; background-color: #eeeeee; border: 1px solid black;">
   <label>Hostname:
   <input type='text' maxwidth='80' placeholder="domain-name.tld" autofocus required id="input" style="padding: 3px;"/> 
   </label>  
   <button id="myBtn" style="padding: 3px; text-align: center;">Abfragen</button>
   <br><br>
   <code id="data" style="display: inline-black; text-align: left; white-space: pre;"></code>
</form>
<script>
   const records = ["A", "AAAA", "CAA", "CNAME", "MX", "NS", "TXT", "SRV"];
   
   const dnsFetch = async (type, target) => {
     const res = await fetch(`https://cloudflare-dns.com/dns-query?name=${target}&type=${type}`, {
       headers: {
         Accept: "application/dns-json",
       },
     });
     if (!res.ok) {
       throw res;
     }
     const i = await res.json();
     return i.Answer ? i.Answer : [];
   }
   
   const dnsRecords = async target => {
     const results = {};
     const promises = [];
     records.forEach(type => {
       const promise = dnsFetch(type, target).then(response => {
         results[type] = response;
       }).catch(err => {
         console.error(err);
         results[type] = [];
       });
       promises.push(promise);
     });
     await Promise.all(promises);
     return results;
   }
   document.getElementById("myBtn").addEventListener("click", e => {
     e.preventDefault();
     const target = document.getElementById("input").value;
     dnsRecords(target).then(data => {
       document.getElementById("data").textContent = JSON.stringify(data, null, 2);
     });
   });
</script>

我很感激我能得到的任何帮助，谢谢；）

标签： javascripthtmldnscontent-security-policy