Tengo una aplicación web en Angular y en ese sitio web hay un iframe que se usa para mostrar algunos informes. Algunos de esos informes están en HTML y tienen scripts en ellos en los datos:
<script src="data:application/javascript;base64,KGZ1bmN0a...Ck7Cgo="></script>
Y necesito hacer que funcionen. Pero para que esto funcione, tendría que cambiar CSP para permitir script-src data: y este no es un movimiento muy inteligente. Tenía la esperanza de resolver eso separando ese iframe tanto como fuera posible de la aplicación web, así que estaba tratando de usar iframe en modo sandbox, pero aún así no funcionará sin script-src data: debido a que tiene un origen nulo.
¿Hay alguna forma de establecer algún otro origen para iframe o inyectarle CSP personalizado?
¿Hay alguna otra forma de ejecutar datos: scripts en iframe al menos de forma semisegura?
Después de algunos experimentos con mi compañero de trabajo, preparamos una solución que parece funcionar. Tal vez ayude a alguien de alguna manera. También tal vez alguien tenga algo que señalar al respecto.
const token = TokenService.getToken(); var headers = [['Content-Security-Policy', 'script-src data:']]; if (token) { headers.concat(['Authorization', token]); } const xhr = new XMLHttpRequest(); xhr.open('GET', this.fileUrl.toString().replace('./', document.baseURI)) xhr.responseType = 'document'; xhr.onreadystatechange = ev => { if (xhr.readyState === xhr.DONE) { if (xhr.status === 200) { var content = this.frameEl.nativeElement.contentWindow || this.frameEl.nativeElement.contentDocument.document || this.frameEl.nativeElement.contentDocument; content.document.open(); content.document.write(xhr.response.documentElement.innerHTML); content.document.close(); } else { this.frameEl.nativeElement.attr('srcdoc', '<html><head></head><body>Error loading data.</body></html>'); } } } headers.forEach(function (header) { xhr.setRequestHeader(header[0], header[1]); }); xhr.send();