I am trying to implement a case where a user provides us some html code which is then stored in our database. We then retrieve the HTML from our database as a string. (We have no control over the user input)
I try to embed this html using
const htmldoc = [the raw html] <iframe sandbox="allow-scripts" srcdoc=htmldoc> </iframe>
I would be using a data:// URI. Or blob:// URI.
I am using the sandbox attribute to prevent Same Origin Policy. Can a user input something which might lead to XSS attacks in the parent browsing context? I am not concerned if the XSS attack targets the content inside the iframe since it is sandboxed.
If my approach is vulnerable to attacks, what can I do to make it secure?
Here is what I am planning to do:
I will have the user input which will be raw HTML data. I will store this file somewhere. Whenever I have to render this HTML, I'll make an API call to retrieve it.
- I will be using an
<iframe sandbox="allow-scripts">. This will block all popups, modals, form submissions, etc.
- I'll be programmatically adding a
metatags to the HTML which is to be rendered.
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src https://trusted-site.com/ 'unsafe-inline' style-src https://trusted-site.com/; font-src https://trusted-site.com/; img-src https://trusted-site.com/"> <meta name="referrer" content="no-referrer">
What are the possible attack vectors in this approach? Is there anyway I can make it more secure against the possible attack vectors?