ONLYOFFICE
DocumentServer editor widget does not get token even when correctly supplied
This issue is unique.
- [X] I have used the search tool and did not find an issue describing my bug.
Operating System of DocumentServer
Docker
Version information
onlyoffice/documentserver:latest
Expected Behavior
When the JWT token is supplied correctly, the server should render editor app without error
Actual Behavior
Server shows error checkJwt error: name = JsonWebTokenError message = jwt must be provided token = undefined
Reproduction Steps
- Run DocumentServer in docker container, mapping host post 9000 -> container port 80
- Run flask app on local machine on port 9001
- Flask app has endpoints for retrieving docx files and callbacks for edit checkpoints
- Create a minimal HTML page that embeds the edit widget
- Open the edit widget
- DocumentServer displays error message
checkJwt error: name = JsonWebTokenError message = jwt must be provided token = undefined - Inspect the rendered web page and see that token is correctly supplied
Additional information
I followed the steps to create a minimal application for embedding the document editor widget. My setup is as follows:
- Docker container running
onlyoffice/documentserver:lateston Macbook Pro. Host port 9000 --> 80 on container - Successfully able to visit http://192.168.1.205:9000/welcome/docker.html, follow steps to start the example.
- The included example works
- Created a simple Python Flask server on my local machine running on port 9001, bound to the IP (not localhost, not 127.0.0.1) that serves a page called
editor.html - The editor page embeds DocumentServer widget. This page is unable to get the editor widget to come up.
The editor page template code is very simple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnlyOffice Document Editor</title>
<script src="http://192.168.1.205:9000/web-apps/apps/api/documents/api.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%; height: 600px;"></div>
<script>
const docEditor = new DocsAPI.DocEditor("placeholder", {
document: {
fileType: "docx",
key: "{{ doc_key }}",
title: "Document Title",
url: "http://192.168.1.205:9001/{{ file_path }}",
token: "{{ token }}"
},
editorConfig: {
callbackUrl: "http://192.168.1.205:9001/track?fileName={{ filename }}",
user: {
id: "user123",
name: "John Doe"
}
}
});
</script>
</body>
</html>
When the template is rendered, all placeholders are correctly populated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnlyOffice Document Editor</title>
<script src="http://192.168.1.205:9000/web-apps/apps/api/documents/api.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%; height: 600px;"></div>
<script>
const docEditor = new DocsAPI.DocEditor("placeholder", {
document: {
fileType: "docx",
key: "vendor_management.docx",
title: "Document Title",
url: "http://192.168.1.205:9001/static/uploads/vendor_management.docx",
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJrZXkiOiJ2ZW5kb3JfbWFuYWdlbWVudC5kb2N4In0sImV4cCI6MTcyMDExMzgxNn0.D3jhZLT3GFPP4GuPct6CYZezP3-dGRLuuabM8rgZ9_8"
},
editorConfig: {
callbackUrl: "http://192.168.1.205:9001/track?fileName=vendor_management.docx",
user: {
id: "user123",
name: "John Doe"
}
}
});
</script>
</body>
</html>
The token is calculated based on JWT secret obtained from the container. My Python code for generating the token to inject into the template is:
def generate_jwt(doc_key):
payload = {
'document': {
'key': doc_key,
},
'exp': datetime.datetime.utcnow() + datetime.timedelta(hours=1)
}
token = jwt.encode(payload, app.config['JWT_SECRET'], algorithm='HS256')
return token
The generated token validated correctly on JWT:
https://jwt.io/#debugger-io?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJrZXkiOiJ2ZW5kb3JfbWFuYWdlbWVudC5kb2N4In0sImV4cCI6MTcyMDExMzgxNn0.D3jhZLT3GFPP4GuPct6CYZezP3-dGRLuuabM8rgZ9_8
I'm thinking passing the token to the iframe rendered in my <div id="placeholder"> does not work when DocumentServer and my app are on different hosts (in this case, different ports).
@riturajtiwari greetings. To generate the jwt token correctly, use the configuration in the json specification.
Document Server Configuration
JWT=true
JWT_SECRET=secret
JWT_HEADER=Authorization
Correct configuration based on your example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnlyOffice Document Editor</title>
<script type="text/javascript" src="http://192.168.4.138/web-apps/apps/api/documents/api.js"></script>
</head>
<body>
<div style="width: 600px; height: 600px;">
<div id="placeholder"></div>
</div>
<script>
var config = {
"document": {
"fileType": "docx",
"key": "Khirz6zTPdfd7",
"title": "Example Document Title.docx",
"url": "http://192.168.4.138:9090/files/empty.docx"
},
"documentType": "word",
"editorConfig": {
"callbackUrl": "https://example.com/url-to-callback.ashx",
"user": {
"id": "user123",
"name": "John Doe"
}
},
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwOi8vMTkyLjE2OC40LjEzODo5MDkwL2ZpbGVzL2VtcHR5LmRvY3gifSwiZG9jdW1lbnRUeXBlIjoid29yZCIsImVkaXRvckNvbmZpZyI6eyJjYWxsYmFja1VybCI6Imh0dHBzOi8vZXhhbXBsZS5jb20vdXJsLXRvLWNhbGxiYWNrLmFzaHgiLCJ1c2VyIjp7ImlkIjoidXNlcjEyMyIsIm5hbWUiOiJKb2huIERvZSJ9fSwiaGVpZ2h0IjoiMTAwJSIsIndpZHRoIjoiMTAwJSIsInR5cGUiOiJkZXNrdG9wIn0.m1CcF1lHFzYBK8eN5evFrlKdbrXTA_XabIrQXXk_Dv8"
};
var docEditor = new DocsAPI.DocEditor("placeholder", config);
</script>
</body>
</html>
Documentations
https://api.onlyoffice.com/editors/basic https://api.onlyoffice.com/editors/advanced https://api.onlyoffice.com/editors/signature/browser#config
I close this issue. Feel free to comment or reopen it if you got further questions.
