How to Fix Content Security Policy in Neocities
On This Page
In this guide, we’ll learn how to fix Neocities Content Security Policy errors when trying to fetch external APIs.
Neocities Content Security Policy error
Quick Solution (30 seconds)
If you’re here just for the fix, here’s what you need to do:
- Add your Neocities domain in the Corsfix Dashboard
Adding domain to Corsfix Dashboard
- Import jQuery script in your
<head>tag
<head> <!-- add this script in your head tag --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script></head>- Use the
$.getJSONcommand to load your target API
$.getJSON( `https://proxy.corsfix.com/?url=${encodeURIComponent( "https://www.bing.com/HPImageArchive.aspx?format=js&n=1" )}&callback=?`, function (data) { // use the data any way you want, here we are logging the result console.log("API Data: ", data); });This method allows you to access any API without encountering the “Neocities refused to connect” Content Security Policy error.
The result:
Sample API result
What’s Happening with Content Security Policy?
Neocities free accounts are restricted from making fetch or AJAX requests to external APIs due to Content Security Policy (CSP) restrictions. When you examine the CSP header for a Neocities page, you’ll see something like this:
Content-Security-Policy: upgrade-insecure-requests; default-src * 'unsafe-inline' 'unsafe-eval' data: blob:; connect-src 'self' data: blob:; form-action 'self'; img-src * data:; script-src * 'unsafe-inline' 'unsafe-eval'; style-src * 'unsafe-inline'; font-src * data:; object-src *; media-src *; frame-src *; worker-src blob:;While there are many directives in the CSP header, we’ll focus on this specific part:
connect-src: 'self'This tells your browser that it can only connect to the same domain. To put it simply, only URLs from the same domain (like “yourdomain.neocities.org”) can be fetched. You cannot fetch from external domains like “api.example.com”.
Discussion on Neocities’ GitHub: https://github.com/neocities/neocities/issues/484
How the Solution Works
Our solution uses JSONP (JSON with Padding) to load API data without using the standard fetch requests. Unlike regular fetch calls, JSONP loads APIs using script tags, which aren’t blocked by the Content Security Policy.
Looking at the CSP again, we have:
script-src: *This means we can load scripts from any source, which is why JSONP works perfectly in this scenario.
However, not all APIs support JSONP responses by default. This is where Corsfix comes in to bridge the gap.
Corsfix is a CORS proxy service designed to solve CORS errors when fetching external APIs. It also supports JSONP, which enables data fetching in restrictive environments like Neocities.
Conclusion
Use Corsfix with JSONP to fetch external APIs in Neocities. The Content Security Policy in Neocities restricts standard fetch requests, so we need this alternative approach to load external API data.
Ready to fix your API fetch issues? Try Corsfix for free, sign up now and add your domain to get started.