I'm needing a targeting. I am developing an application where on one of the screen users are allowed to view a specific report of the page, to avoid that when clicking on the option to generate the report it was redirected to the report, I created a form that display it in a modal style dialog . (Until the modal display part is working)
Modal Homepage
<head>
<meta http-equiv="X-FRAME-OPTIONS" content="SAMEORIGIN">
</head>
<div class="modal fade" id="relatorios" tabindex="-1" role="dialog" th:fragment="relatorios">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i>×</i></button>
<h4 class="modal-title">Relatórios</h4>
</div>
<div id="modal_relatorio" class="modal-body">
<div id="containerRelatorio"></div>
</div>
</div>
</div>
<th:block th:replace="hbs/TemplateRelatorio"></th:block>
</div>
</html>
I use a javascript to render this page with the help of handlerbars
Pegasus = Pegasus || {};
Pegasus.Relatorio = (function() {
function Relatorio() {
this.relatorioBtn = $('.js-relatorio-btn');
this.containerRelatorio = $('#containerRelatorio');
this.source = $('#template-relatorio').html();
this.template = Handlebars.compile(this.source);
}
Relatorio.prototype.enable = function() {
this.relatorioBtn.on('click', onRelatorioClicado.bind(this));
}
function onRelatorioClicado(evento) {
event.preventDefault();
var botaoClicado = $(evento.currentTarget);
var url = botaoClicado.data('url');
var context = {url_relatorio: url};
var html = this.template(context);
this.containerRelatorio.html(html);
}
return Relatorio;
}());
$(function() {
var relatorio = new Pegasus.Relatorio();
relatorio.enable();
})
Template to render:
<script id="template-relatorio" type="text/x-handlebars-template">
<iframe id="frame-relatorio" src="{{url_relatorio}}" width="568" height="440" frameborder="0"></iframe>
</script>
The only way I can get to try my goal was to use the iframe, however I'm pretty much stuck because the error message
Refused to display 'http://localhost:8080/pegasus/relatorios/fichaIdentificacao/2018000009' in a frame because it set 'X-Frame-Options' to 'deny'.
Prevents the PDF from being displayed within the modal in question. Even with the goal of X-FRAME-OPTIONS being with SAMEORIGIN in the modal header, I can not succeed, I believe I have to put this information inside the function that generates PDF
PDF Generating Function:
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import br.com.pegasus.service.RelatorioService;
@Controller
@RequestMapping("/relatorios")
public class RelatoriosController {
@Autowired
private RelatorioService relatorioService;
@GetMapping("/fichaIdentificacao/{registro}")
public ResponseEntity<byte[]> gerarRelatorioFichaIdentificacao(@PathVariable("registro") String registro) throws Exception {
byte[] relatorio = relatorioService.gerarRelatorioFichaIdentificacao(registro);
return ResponseEntity.ok().header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_PDF_VALUE)
.body(relatorio);
}
}
Can anyone help me with how to solve this problem, or some other way to display this PDF to the user?
PS: An information I forgot to add, my container is TOMCAT8