Merge pull request #52 from rtCamp/feature/add-sandbox-property

Add sandbox property to iframe
rtCamp · Feb 20, 2024 · 215134c · 215134c
2 parents 69003c1 + 26b6310
commit 215134c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/src/demos/storage-access-api/index.ejs b/src/demos/storage-access-api/index.ejs
@@ -1,5 +1,9 @@
 <%- include(commonPath + '/header.ejs') %>
     <%- include(commonPath + '/internal-page/header.ejs') %>
-        <iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/storage-access-api/theme-selection" class="border-8 rounded w-full h-96 overflow-hidden"></iframe>
+        <iframe sandbox="allow-storage-access-by-user-activation
+                         allow-scripts
+                         allow-same-origin"
+                src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/storage-access-api/theme-selection" 
+                class="border-8 rounded w-full h-96 overflow-hidden"></iframe>
     <%- include(commonPath + '/internal-page/footer.ejs') %>
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/demos/storage-access-api/personalization.ejs b/src/demos/storage-access-api/personalization.ejs
@@ -17,7 +17,6 @@ document.addEventListener('DOMContentLoaded', () => {
     })
 
     async function updateUserPreference() {
-        console.log('hasStorageAccess', hasStorageAccess);
         if ( hasStorageAccess ) {
             fetchAndApplyTheme();
         } else {
@@ -27,8 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 loadButton.classList.add('hidden');
                 fetchAndApplyTheme();
             } catch (error) {
-                console.error('There has been a problem with your fetch operation:', error);
-                errorMessages.textContent = `Error: ${error}`;
+                errorMessages.textContent = error?.message;
             }
         }   
     }
@@ -48,14 +46,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 .then(data => {
                     const theme = data.theme;
                     pageContainer.className = `${containerClass} ${data.theme}`
-                    console.log('theme', theme);
                     if (theme === 'dark') {
                         themeSwitcher.checked = true;
                     }
                 })
                 .catch(error => {
-                    console.error('There has been a problem with your fetch operation:', error);
-                    errorMessages.textContent = `Error: ${error.message}`;
+                    errorMessages.textContent = error?.message;
                 });
     }
 
@@ -83,19 +79,16 @@ document.addEventListener('DOMContentLoaded', () => {
                 if ( await document.hasStorageAccess() ) {
                     fetchSetPersonalization();
                 } else {
-                    console.error('User denied storage access');
                     errorMessages.textContent = 'User denied storage access';
                 }
             } catch (error) {
-                console.error('Error:', error);
                 errorMessages.textContent = `The request to storage access API was denied because the user never interacted with the top-level site context or the permission wasn't grant by the user`;
             }
         } 
     }
 
     window.toggleTheme = toggleTheme;
     if (isIframe && !hasStorageAccess) {
-        console.log('In iframe');
         toggleContainer.classList.add('hidden');
         loadButton.classList.remove('hidden');
         loadButton.addEventListener('click', updateUserPreference);

diff --git a/src/scenarios/ecommerce/routes.js b/src/scenarios/ecommerce/routes.js
@@ -6,7 +6,7 @@ const router = express.Router();
 // Middleware to setup common rendering variables
 router.use((req, res, next) => {
 	// Set common variables for rendering views
-	res.locals.title =  'E-Commerce - Privacy Sandbox' // Set the page title
+	res.locals.title =  'Shopping Cart' // Set the page title
 	next();  // Continue to the next middleware or route handler
 });
 

diff --git a/src/scenarios/personalization/personalization.ejs b/src/scenarios/personalization/personalization.ejs
@@ -23,7 +23,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 }        
             })
             .catch(error => {
-                console.error('There has been a problem with your fetch operation:', error);
                 statusMessage.textContent = `There was an error fetching your personalization settings: ${error.message}`;
             }); 
     }
@@ -44,7 +43,6 @@ document.addEventListener('DOMContentLoaded', () => {
         .then(data => {
             pageContainer.className = data.theme;
         }).catch(error => {
-            console.error('There has been a problem with your fetch operation:', error);
             statusMessage.textContent = `There was an error updating your personalization settings: ${error.message}`;
         });
     }