fix(form-v2): update CSP and image URL computation to use the correct URL

[justynoh]

Problem

Image and logo uploads in general are not working in both the preview and saved mode. This occurs for two different reasons:

1. Prior to file upload, we display images and logos from local blob:s. However the browser refuses to load these because blob:s are not allowed in our CSP.
2. After files are uploaded to S3, image and logo uploads result in 403 Forbidden. They are being uploaded to S3 but the URLs pointing to their location is not being generated correctly in uploadFile.

Closes #4360

Solution

1. Add blob: to our imgSrc CSP.
2. Change uploadFile to use the correct source for the uploaded file ID.

See also:
https://stackoverflow.com/questions/28467789/content-security-policy-object-src-blob
https://csplite.com/csp105/#:~:text=The%20Content%20Security%20Policy%20controls,from%20the%20blob%3A-URI.
https://content-security-policy.com/#source_list
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

Breaking Changes

• No - this PR is backwards compatible

Screenshots

See comment below :)

[justynoh]

As is, everything works as intended. However, the browser console does complain about the blob: image being attempted to load as a script. But the obvious fix for this (add blob: to scriptSrc) seems... more dangerous than adding to imgSrc. Should we keep it as is and let the console complain if it wants?

I don't seem to be able to find any reference to src="blob: anywhere other than the <img> in the builder content itself, so why it wants to test script-src is a bit puzzling.

Tagging @timotheeg for thoughts!

Screen.Recording.2022-08-03.at.3.53.05.PM.mov

[timotheeg]

It's also unclear to me why blob shows up in a script-src warning. If we cannot find it in source, let's do some markup inspection. Call me and we can pair on it!

[timotheeg]

encodedFileId is concatenated straight into a url below, so just to clarify, what format do we expect postData.fields.key to have? I'm asking to because we have to be careful that meaningful url characters (e.g. /) are not encoded.

[justynoh]

The fileId is the input file ID, but the controller itself returns a new file ID because we randomized the fileID in the controller here, which instituted a change to the file handler in angular and we need need to replicate this behavior in react