Information about linking external resources on Neocities free accounts (that Content Security Policy thing)

Quick Compatibility table

Images on another website Supported
Fonts on another website Supported
Scripts on another website Supported
Stylesheets on another website Supported
Iframes showing another website Supported
Scripts on another website Supported
Scripts accessing data on another website Blocked
Forms sending data to another website Blocked

What's a Content Security Policy?

You may have seen a cryptic error on your website like this one before:

Content-Security-Policy: The page’s settings blocked the loading of a resource (connect-src) at https://example.com because it violates the following directive: “connect-src 'self' data: blob:”

That's the content security policy! It lets websites restrict what they're allowed to access. They're typically set to reduce the havoc a potential exploit could have on a website that stores sensitive user information.

Neocities sets one with restrictions for free accounts, instead intended to prevent abuse. Since it is set by the server, which users do not have access to, there is no way to disable the restrictions besides buying Neocities Supporter.

Why the website?

People frequently get what the Content Security Policy blocks wrong. This website aims to hopefully reduce any misconceptions.

Additionally, this Neocities website is a free account made after the new restrictions, so you'll be able to see them in action.

Restrictions

Scripts cannot access websites other than yours

If a script tries to access data from another website, it will be blocked from doing so.

For example, you may add a JavaScript widget from another website. Doing so is entirely allowed. However, if that widget tries to access data from a website that isn't yours, then it will be blocked and get an error.

A diagram. you.neocities.org accesses someone.com/widget.js and is successful. someone.com/widget.js tries accesses someone.com/data.json, but is blocked.

Note that this still applies even if you host the script yourself. The issue is the script trying to access something on a different website.

A famous example would be Cusdis, a commenting widget. I've set it up in this box, but the entire thing fails to load because it depends on data on its website, which the script is blocked from accessing.

Forms cannot send data to external websites

If a form (<form>) tries to send data to another website, it will be blocked from doing so.

A famous example would be HTML Comment Box, another commenting widget. I've set it up here. While it does successfully load in, you cannot comment because it uses a form that points to their website.

Widget is loading comments...

What isn't restricted

Images from another website work

You can use an image from another website. (Just respect the website owner's wishes!)

Here's my button, loaded from dabric.xyz.

<img src="https://dabric.xyz/butt.png" alt="dabric">
dabric

Scripts from another website work

You can use scripts from another website. Just remember that scripts cannot access data from another website.

Here is null webring, which loads in fine. (This website is not on null webring, so the arrows may not work as expected.)

<script src="https://nuthead.neocities.org/ring/ring.js"></script>

Fonts from another website work

You can use fonts from another website.

Here is the font Sixtyfour, loaded from Google Fonts.

I'm a font!

Stylesheets from another website work

You can use stylesheets/CSS from another website.

Same example, but the font Sixtyfour was added using a stylesheet from Google Fonts.

<link href="https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap" rel="stylesheet">

I'm a font from a stylesheet!

Iframes showing another website work

Maybe obvious, but you can still use iframes that show another website. Given the website allows it, as usual.

Here's YouTube: