I'm serving up locally-generated untrusted content in an iframe from a service worker.
I'm trying to lock down the iframe entirely so that it can only load resources from its srcdoc, which is intercepted by a serviceworker. This means no img etc. from any other domain, but allowing javascript.
To achieve this I'm adding CSP: sandbox allow-scripts; default-src 'self' data:; script-src 'self' 'unsafe-inline'; on all assets served by the service worker, which includes the iframe root.
Loading the iframe root document works fine. But loading an image in the iframe with a relative url, so from the same origin, is not hitting the service worker - but falling through to the parent domain and thus getting a 404. If I remove the sandbox property from the CSP then the image loads, but I lose the security.
Is there a way to get this to work? I have a demo here: https://ianopolous.github.io/sandbox
I apply the CSP headers in the service worker here: https://github.com/ianopolous/sandbox/blob/gh-pages/sw.js#L119