stackdevlopr
New Coder
Hello,
I have tried couple of ways to tackle this issue I'm experiencing with reading SheetJS XLSX library, but don't know what exactly is causing this issue: JS? CSP? Browser policies?
It is a simple app to process Excel files using the SheetJS XLSX library (xlsx.full.min.js):
_ if the app is opened from netlify.app, the library should load from CDN => no issues here
_ if it is saved an opened locally, the library that is included within the same folder as the index.html must be called => this is the part that is not working and consolelogging that the library can't be found.
I found various possible explanations and suggestions to deal with this, but none worked.
In my HTML head I have CSP (Content-Security-Policy) for protection against unsafe inlie scripting:
The library isn't referenced in the HTML head, as it is dynamically loaded in JS, here is the logic to load the library from CDN or locally, depending on the app being accessed online or locally:
Calling the locally included library should be a straightforward thing, but apparently CSP or more likely browsers policies are blocking the access to the local file, as I understood. No issues with loading the app.js file on the other hand.
Anyone had to deal with similar issue and could suggest a way?
Thanks already for the help.
I have tried couple of ways to tackle this issue I'm experiencing with reading SheetJS XLSX library, but don't know what exactly is causing this issue: JS? CSP? Browser policies?
It is a simple app to process Excel files using the SheetJS XLSX library (xlsx.full.min.js):
_ if the app is opened from netlify.app, the library should load from CDN => no issues here
_ if it is saved an opened locally, the library that is included within the same folder as the index.html must be called => this is the part that is not working and consolelogging that the library can't be found.
I found various possible explanations and suggestions to deal with this, but none worked.
In my HTML head I have CSP (Content-Security-Policy) for protection against unsafe inlie scripting:
HTML:
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://cdn.sheetjs.com; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"
/>The library isn't referenced in the HTML head, as it is dynamically loaded in JS, here is the logic to load the library from CDN or locally, depending on the app being accessed online or locally:
JavaScript:
// Paths to library
const onlineLibraryPath = "https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js";
const localLibraryPath = "./xlsx.full.min.js";
// Toggle for local vs. online mode
const isOnlineMode = false;
document.addEventListener("DOMContentLoaded", () => {
let libraryPath;
if (isOnlineMode) {
// Check and clear content if unauthorized access
if (!location.hostname.includes("netlify.app")) {
alert("This app can only be opened from netlify.app in online mode.");
document.body.innerHTML = "";
return;
}
libraryPath = onlineLibraryPath;
} else {
libraryPath = localLibraryPath;
}
// Dynamically load the library
loadLibrary(libraryPath).then(() => {
console.log(`Library loaded successfully from: ${libraryPath}`);
}).catch(err => {
console.error("Failed to load library:", err);
alert("An error occurred while loading the required library. Please check your setup.");
});
});
function isAuthorizedOnline() {
const authorizedHostnames = ["netlify.app"];
return authorizedHostnames.some((host) => location.hostname.includes(host));
}
// Load external library dynamically
// ..Check if the script is already loaded
// ..Append script to document head
function loadLibrary(src) {
return new Promise((resolve, reject) => {
const existingScript = document.querySelector(`script[src="${src}"]`);
if (existingScript) {
console.log(`Library already loaded from: ${src}`);
resolve();
return;
}
const script = document.createElement("script");
script.src = src;
script.async = true;
// Successful loading
script.onload = () => {
console.log(`Library successfully loaded: ${src}`);
resolve();
};
// Error loading
script.onerror = (err) => {
console.error(`Failed to load library from: ${src}`, err);
reject(err);
};
document.head.appendChild(script);
});
}Anyone had to deal with similar issue and could suggest a way?
Thanks already for the help.
Last edited:
