I'm implementing a custom wopi server to communicate a custom documenty library with office 365. The implementation is based on a django server which implements all wopi endpoints. That server communicates a cloud document library server with wopi.
The problem is that when I submit the iframe to open a document with the office 365 I get the following error in javascript:
Sys.InvalidOperationException: Sys.InvalidOperationException: Invalid BaseDocQuerySignature in appSettings
at Error.create (https://res-v-sdf.cdn.office.net/officeonline/we/s/h60A82C06E357C29F_App_Scripts/MicrosoftAjaxDS.js:1:20454)
at Error.invalidOperation (https://res-v-sdf.cdn.office.net/officeonline/we/s/h60A82C06E357C29F_App_Scripts/MicrosoftAjaxDS.js:1:22209)
at jE.abb (https://res-v-sdf.cdn.office.net/officeonline/we/s/hF07758D5927F3735_App_Scripts/WordEditorDS.js:5411:21)
at jE.abb (https://res-v-sdf.cdn.office.net/officeonline/we/s/hA7BA4A856D543B08_App_Scripts/WordEditorDS.core.js:2433:281)
at jE.abb (https://res-v-sdf.cdn.office.net/officeonline/we/s/hA7BA4A856D543B08_App_Scripts/WordEditorDS.core.js:694:121)
at jE.m0d (https://res-v-sdf.cdn.office.net/officeonline/we/s/hA7BA4A856D543B08_App_Scripts/WordEditorDS.core.js:2432:362)
at jE.m0d (https://res-v-sdf.cdn.office.net/officeonline/we/s/hA7BA4A856D543B08_App_Scripts/WordEditorDS.core.js:687:269)
at jE.initialize (https://res-v-sdf.cdn.office.net/officeonline/we/s/hF07758D5927F3735_App_Scripts/WordEditorDS.js:5423:235)
at jE.initialize (https://res-v-sdf.cdn.office.net/officeonline/we/s/hA7BA4A856D543B08_App_Scripts/WordEditorDS.core.js:2428:58)
at new nj (https://res-v-sdf.cdn.office.net/officeonline/we/s/hA7BA4A856D543B08_App_Scripts/WordEditorDS.core.js:639:463)
I searched for that error on the web, but all the solutions implies modify office 365 code.
The index.html that I'm using is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>vvwopi</title>
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<script src="../static/js/jquery-3.6.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<meta name="description" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="https://c1-word-view-15.cdn.office.net/wv/resources/1033/FavIcon_Word.ico" />
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
-ms-content-zooming: none;
}
#office_frame {
width: 80%;
height: 80%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border: none;
display: block;
}
</style>
</head>
<body>
<div id="wopiTest">
<h1>VisualVault WOPI Test</h1>
<p>
Use this page to demo the WOPI host implementation
</p>
<p>
Discovery file: https://ffc-onenote.officeapps.live.com/hosting/discovery
</p>
<button class="wopi_editDoc_button" id="vwWopiTest" onclick="formSubmit('office_wopiTest_form')">Wopi Test Document</button>
<form id="office_form" name="office_form" target="office_frame" action="" method="post">
<input name="access_token" value="" type="hidden" />
<input name="access_token_ttl" value="" type="hidden" />
<input name="user_id" value="" type="hidden" />
<input name="owner_id" value="" type="hidden" />
</form>
</div>
<span id="frameholder"></span>
<script type="text/javascript">
let params = new URLSearchParams(window.location.search);
let windowUrl = (new URL(window.location));
let hostName = windowUrl.hostname;
let testMode = params.get('test');
let testDiv = document.getElementById('wopiTest');
if(testDiv){
testDiv.style.display = "none";
}
if(params){
updateForm(params);
}
function updateForm(params){
let dlId = params.get('dlid');
let token = params.get('token');
let userId = params.get('userid');
let wopiForm = document.forms['office_form']; //document.getElementById('office_form');
let wopiClientActionUrl = "{{ wopi_action_url | safe }}";
let wopiClientParams = `?IsLicensedUser=1&WOPISrc=https://${hostName}/wopi/files/${dlId}`
wopiForm.elements["access_token"].value = token;
wopiForm.elements["access_token_ttl"].value = '1702137445000'; //todo: make dynamic;
wopiForm.elements["user_id"].value = userId;
wopiForm.elements["owner_id"].value = userId;
wopiForm.action = `${wopiClientActionUrl}${wopiClientParams}`;
formSubmit('office_form');
}
function formSubmit(name) {
var frameholder = document.getElementById('frameholder');
var office_frame = document.createElement('iframe');
office_frame.name = 'office_frame';
office_frame.id = 'office_frame';
// The title should be set for accessibility
office_frame.title = 'Office Online Frame';
// This attribute allows true fullscreen mode in slideshow view
// when using PowerPoint Online's 'view' action.
office_frame.setAttribute('allowfullscreen', 'true');
// The sandbox attribute is needed to allow automatic redirection to the O365 sign-in page in the business user flow
office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox');
//office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox allow-downloads allow-modals');
//office_frame.setAttribute('allow', 'autoplay camera microphone display-capture');
frameholder.appendChild(office_frame);
document.getElementById(name).submit();
}
</script>
</body>
</html>
and the part that is failing is the submit of the last line of the script part:
document.getElementById(name).submit();
Thanks for your help!!!