SAP Builders Discussions
Join the discussion -- ask questions and discuss how you and fellow SAP Builders are using SAP Build, SAP Build Apps, SAP Build Process Automation, and SAP Build Work Zone.
cancel
Showing results for 
Search instead for 
Did you mean: 

SAP Build Apps: Inline Frame remove sandbox attribute

v_blum2000
Explorer
0 Kudos
115

Hi all,

i want to create an app, where visitors can do a "self" check-in.

Therefore they have to read a pdf-file for safety instructions.
The Browser runs on Kiosk mode, so the modal PDF-Preview is not that great for my use case.

Thats why I've created a small http server which hosts the pdf-file localy to display it.

In my SAP Build App I tried to display the pdf via the Inline Frame (iFrame), but Chrome is everytime saying, that it is blocked by Chrome:

"This site was blocked by Chrome""This site was blocked by Chrome"

I found out, that this has to do with the sandbox attribute of the HTML iFrame.
It sets the sandbox attribute everytime, as well when I'm not setting anything:

v_blum2000_1-1738230731185.png

It also not works, when I am adding every value:
allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-storage-access-by-user-activation Experimental allow-top-navigation allow-top-navigation-by-user-activation allow-top-navigation-to-custom-protocols

When I remove the sandbox attribute by myself in the developer console, and right clicking "reload frame", it is showing my pdf like it should 🙂

 

Is there a way to remove the attribute? Or a workaround for that?

 

Thanks,

Vincent

1 REPLY 1

v_blum2000
Explorer
72

I found a solution for my use-case 🙂 

For everybody who is interessted, I did it by using an iframe and using pdf.js to render the pdf by myself: https://github.com/mozilla/pdf.js

Configuration in SAP Build Apps:

Use component inline frame:

  • set values in the sandbox field.
    • For my use case "allow-scripts" (needed to use javascript) is everything I need
  • In the srcdoc value you can paste your complete html file, which can also include a script to render the pdf

 

My html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<html>
	<body>
		<div >
			<p style="max-width: fit-content; margin: auto;"></p>
			<canvas id="pdfCanvas" style="border-style: solid; border-width: 2px;"></canvas>
			<div style="max-width: fit-content; margin: auto; margin-top: 20px;">
				<button id="btnPrevious" style="width: 100px;">Previous</button>
				<button id="btnNext" style="width: 100px;">Next</button>
			</div>
		</div>
		<script>
			var pdf;
			var pageNr = 1;
			var maxPages = 0;
			var url= "<yourURL>/example.pdf";

			window.addEventListener('DOMContentLoaded', init);

			function init() {
				document.getElementById('pdfCanvas').addEventListener('click', nextPage);
				document.getElementById('btnNext').addEventListener('click', nextPage);
				document.getElementById('btnPrevious').addEventListener('click', previousPage);
			}

			function nextPage() {
				if(pageNr >= maxPages) {
					throw new Error(`Reached end of pdf file (Site ${pageNr}/${maxPages})`);
				}
				else {
					pageNr++;
					renderPage(pdf);
				}
			}

			function previousPage() {
				if (pageNr == 1) {
					throw new Error(`Reached beginning of pdf file`);
				}
				else {
					pageNr--;
					renderPage(pdf);
				}
			}
			
			pdfjsLib.getDocument(url).promise.then((pdf) => {
				this.pdf = pdf;
				maxPages = pdf.numPages;

				console.log(maxPages);
				renderPage(pdf)
			});

			function renderPage(pdf) {
				pdf.getPage(pageNr).then((page) => {
					var scale = 1;
					var viewport = page.getViewport({ scale: scale });

					var canvas = document.getElementById('pdfCanvas');
					var context = canvas.getContext('2d');

					canvas.width = viewport.width;
					canvas.height = viewport.height;

					var renderContext = {
						canvasContext: context,
						viewport: viewport
					};
					page.render(renderContext);
				}).catch((err) => {
					console.log('ERROR: ' + err);
				});
			}
		</script>
	</body>
</html>

 The width/height can changed set by using the scale value.

It is also possible to create a pdf from base64. For that have a look here: https://mozilla.github.io/pdf.js/examples/#:~:text=Hello%20World%20using%20base64%20encoded%20PDF