To display the filecontent of HTML files in a Power App, I've created a small control with styles, src and srcdoc parameters. These are used as the content / parameter of an iFrame element and a style element.
To prevent tampering, I've applied two safeguards: the iframe tag has the sandbox attribute applied and in case the strings are cleaned with DOMPurify.sanitize first:
this.elemStyle=document.createElement("style");
if(context.parameters.iframestyles.raw){
this.elemStyle.innerHTML=DOMPurify.sanitize(context.parameters.iframestyles.raw);
container.appendChild(this.elemStyle);
}
this.elemWrap=document.createElement("div");
this.elemWrap.id="dtswrap";
this.elemIFrame=document.createElement("iframe");
this.elemIFrame.id="dtsiframe";
this.elemIFrame.sandbox;
if(context.parameters.iframesrc.raw){
this.elemIFrame.src=DOMPurify.sanitize(context.parameters.iframesrc.raw);
}else{
if(context.parameters.iframesrcdoc.raw){
this.elemIFrame.srcdoc=DOMPurify.sanitize(context.parameters.iframesrcdoc.raw);
}
}
this.elemWrap.appendChild(this.elemIFrame);
container.appendChild(this.elemWrap);
The component code can be found here: https://github.com/MJBoes/20210524IFrameSandboxPCF as well.
If there are there attack scenario's which are not covered by these two measures, I'd greatly appreciate it if I could be directed to references to do a better job. Thanks in advance, Marc
