feat(playground): allow img from blob and data

[fiji-flo]

Summary

Fixes #9463.

fixes live sample in https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images

Problem

We do not allow blob urls in the playground

Solution

Add according CSP and also allow data:.

---

How did you test this change?

Locally running the cloud function.

[caugner]

I ran npm start in cloud-function, but the example still doesn't work on https://localhost/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images and fails with:

Content-Security-Policy: The page’s settings blocked the loading of a resource at blob:https://live.mdnyalp.dev/650da1da-2c37-4d55-afc9-6a6ed7f9e85c (“default-src”).

Tips?

@fiji-flo Can you elaborate how you tested this locally?

[fiji-flo]

BUILD_LIVE_SAMPLES_BASE_URL=https://localhost might do the trick 🤞

[caugner]

BUILD_LIVE_SAMPLES_BASE_URL=https://localhost might do the trick 🤞

@fiji-flo I'm using these in my cloud-function/.env:

ORIGIN_MAIN="localhost"
ORIGIN_LIVE_SAMPLES="localhost"

SOURCE_CONTENT=https://storage.googleapis.com/content-stage-mdn/main/
SOURCE_API=http://localhost:8000/

Do I have to make a local build with BUILD_LIVE_SAMPLES_BASE_URL=https://localhost and set SOURCE_CONTENT accordingly?

[fiji-flo]

I'm running yarn dev locally with BUILD_LIVE_SAMPLES_BASE_URL=https://localhost and just not set SOURCE_CONTENT.
Content pages will 404, so I run yarn build files/en-us/web/api/file_api/using_files_from_web_applications/index.md and then visit https://localhost/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images

[caugner]

Verified that this resolves the issue (comparing the result with main).

PS: Didn't work at first, because I hadn't run npm run copy-internal. 🤷