Reputation: 9
I want to use the Microsoft Office API in JavaScript as I am developing a Chrome extension, and am facing an issue using the script of the Office
Refused to load the script 'https://appsforoffice.microsoft.com/lib/1/hosted/office.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
This is the error I am getting while I load my Chrome extension, and doesn't allow me to use the Office APIs.
This is a part of my manifest.json file version 3.
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' 'wasm-eval' https://appsforoffice.microsoft.com/lib/1/hosted/office.js;"
}
Solution which worked for me and removed csp errors:
After Using Sandbox: sandbox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<title>Sandbox Page</title>
</head>
<body>
<div id="sandbox-content">
<p>This is a sandboxed page content.</p>
</div>
<script src="sandbox.js"></script>
</body>
</html>
Sandbox.js
console.log("you are in sandbox.js");
Office.onReady(function (info) {
if (info.host === Office.HostType.Excel) {
// Do Excel-specific initialization (for example, make add-in task pane's
// appearance compatible with Excel "green").
}
if (info.platform === Office.PlatformType.PC) {
// Make minor layout changes in the task pane.
}
console.log(`Office.js is now ready in ${info.host} on ${info.platform}`);
});
In my main script I am trying to connect with the sandbox.html, so that I can use the office API. So in the mainscript.js which is connected to the chrome-extension tab, i called
document.addEventListener("DOMContentLoaded", function () {
const iframe = document.createElement("iframe");
iframe.src = chrome.runtime.getURL("sandbox.html");
iframe.id = "sandbox";
document.body.appendChild(iframe);
});
This created an iframe on the page and i could get use the sandbox.js.
Manifest.json
"content_security_policy": {
"sandbox": "sandbox allow-scripts; script-src 'self' https://appsforoffice.microsoft.com"
},
"sandbox": {
"pages": ["sandbox.html"]
},
Upvotes: 0
Views: 580