DocumentServer editor widget does not get token even when correctly supplied

riturajtiwari commented 4 months ago

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:latest on 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 commented 2 months ago

@askonev Would love to get your thoughts on this issue.

riturajtiwari commented 2 months ago

Checking to see if this bug is on your radar

askonev commented 1 month ago

@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>

askonev commented 1 month ago

Documentations

https://api.onlyoffice.com/editors/basic https://api.onlyoffice.com/editors/advanced https://api.onlyoffice.com/editors/signature/browser#config

Rita-Bubnova commented 2 weeks ago

I close this issue. Feel free to comment or reopen it if you got further questions.

ONLYOFFICE / DocumentServer