CodePen public Pen versus Pro Private Pen for sensitive code

Answer to the Core Questions

1. Authentication on Private Pen URLs
Private Pens in a CodePen Pro account are protected by HTTP authentication. Every request to the Pen’s URL is checked against the logged‑in user’s session; unauthenticated visitors are redirected to the CodePen login page and never receive the raw HTML/CSS/JS.

2. Free Accounts Cannot Make a Pen Private
Free accounts can only create public Pens. Changing an existing Pen’s visibility from public to private requires upgrading to a Pro plan; there is no free‑tier option to alter visibility.

3. Cache and Search‑Engine Visibility After Visibility Change
When a Pen is switched to private, the CodePen servers stop serving it to unauthenticated users immediately. However, cached copies in browsers, CDNs, or search‑engine snapshots may persist for a short period (typically the cache TTL or until the next crawl). Search engines will eventually drop the page from their index after the next crawl cycle, but removal is not instant and some cached snippets may remain visible for days.

Practical Steps for a Developer

1. Upgrade to Pro if you need a Private Pen. Create or edit a Pen, then click the visibility toggle and select "Private". You will be prompted to upgrade.
2. Verify Authentication. Log out of your CodePen account, then visit the Private Pen URL. You should be redirected to the login page, confirming that the source is not served to unauthenticated users.
3. Prevent Search‑Engine Indexing. Add a <meta name="robots" content="noindex, nofollow"> tag to the <head> of your Pen. This instructs crawlers not to index the page. Note that this does not remove already‑cached copies.
4. Clear Local and CDN Cache. If you have control over a CDN or use a static site host, purge the cached version of the Pen’s URL. For browsers, advise users to clear their cache or open the Pen in an incognito window.
5. Monitor Search Results. After making the Pen private, check major search engines for the Pen’s URL. If it appears, use the respective webmaster tools to request removal or use the "Remove URLs" tool. Expect the removal to take a few days.

Things to Keep in Mind

• Private Pen URLs are not secret; anyone who signs in to CodePen can view the code if they have the URL.
• Any code that contains secrets (API keys, credentials) should not be stored in a Private Pen, as signed‑in users can copy it.
• Cached screenshots or copies taken before the Pen became private may still expose the code.

Follow‑up Question

Do you need to enforce that the Pen is excluded from search engine indexes immediately after you change its visibility, or is a short delay acceptable for your use case?