SAP Build Apps: Inline Frame remove sandbox attrib...

vincent00 · ‎2025 Jan 30

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:

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:

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

vincent00 · ‎2025 Jan 31

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

Sankara1 · ‎2025 Feb 10

Hello , Thnaks for sharing the solution, We will close this thread.

Dan_Wroblewski · ‎2025 Feb 11

@vincent00 Really nice post. Can you explain a little more about how you hosted the PDF locally?

--------------
See all my blogs and connect with me on Twitter / LinkedIn

vincent00 · ‎2025 Feb 12

Hi @Dan_Wroblewski,

I simply used this "zero configuration" http-server: https://github.com/http-party/http-server which is running by nodejs.

For example my configuration looks like that:

cd C:\Users\<user>\Desktop\<folder>
http-server -p 8080 --cors

You can also add Basic Authentication.

This will simply start the server locally on port 8080 with CORS enabled (CORS is important, otherwise the PDF is not loaded). You get access to all files located in the folder.

In my case I have added an html file, which is loaded in the iframe on SAP Build Apps. With that it is easier to test and debug, as no you don't need to copy paste the complete file in the small value field.

kazistov_v · ‎2025 Aug 01

That is so interesting! Is there any way to retrieve data from srcdoc? I mean in my example I created an html text editor and want to embed it with a IFrame/WebView, but i want to retrieve final result from there to display it as a comment in SAP List. Is it possible?

vincent00 · ‎2025 Aug 25

Hi @kazistov_v,

I think that's not possible, but I didn't tried that.

By Category

Related Content

Activity Groups

Industry Groups

Influence and Feedback Groups

Interest Groups

Location Groups

Customer Only Groups

Forums

Related Resources

Products

Learning and Support

About

My SAP Profile

My SAP Profile

SAP Build Apps: Inline Frame remove sandbox attribute