Set Up "allow kroki-server-url by default" or add new documentation for "Asciidoc: Change Preview Security Settings" option

[haydencbarnes]

After following the same setup as 'willfe' on #628 - setting up a self-hosted Kroki instance utilizing all the documentation available and multiple git issues, I found that the only reason my graphs were not rendering was due to the "Asciidoc: Change Preview Security Settings" option needing to be set correctly to allow the local content to load. See below:

Note that using a remote server (https://kroki.io/) is allowed by default. So it seems fair that we have the ability to also allow kroki-server-url by default.

Although if documentation is the only answer right now, this may go better on this documentation here: https://github.com/Mogztter/asciidoctor-kroki#using-your-own-kroki. (Although it is an Asciidoc setting, not Kroki.)

Specifically, next to this sentence: "For instance, if you have followed the instructions to set up a self-managed server using Docker, you can use the following: :kroki-server-url: http://localhost:8080. + Along with changing the required "Asciidoc: Change Preview Security Settings" option in VSCode to "Allow insecure local content" to allow the local HTTP content on the server to load in VSCode.

So if we wanted to make that section more structured and direct:

If you have followed the instructions to set up a self-managed server using Docker, you will need to:

• Use the following kroki-server-url: http://localhost:8080/
• In VSCode, go to the "Asciidoc: Change Preview Security Settings" option and select "Allow insecure local content" to allow the server's content to load in VSCode.

This will allow you to use the server and view its content in VSCode.

[haydencbarnes]

628 - Reference

[haydencbarnes]

@Mogztter Would you like me to submit this edit as a PR on the readme?

[ggrossetie]

I would rather fix this issue. I don't want to add it to the README since it's a "quick fix" in:

https://github.com/asciidoctor/asciidoctor-vscode/blob/be5055d2f5f314c865f0b6cd597d2714e0802f4c/src/asciidoctorWebViewConverter.ts#L58

I don't have time to fix it now but hopefully it will be fixed soon.

[haydencbarnes]

I imagine it looks something like this, but I am not aware of all the named attributes and if it calling the correct names:

// This is the default case of the switch statement case AsciidocPreviewSecurityLevel.Strict: // Initialize the cspRule variable with the default CSP rule let cspRule = default-src 'none'; img-src 'self' ${rule} https: data:; media-src 'self' ${rule} https: data:; script-src 'nonce-${nonce}' '${highlightjsInlineScriptHash}'; style-src 'self' ${rule} 'unsafe-inline' https: data:; font-src 'self' ${rule} https: data:;; // If asciidoc.extensions.enableKroki is true, add the kroki-server-url attribute to the CSP rule if (asciidoc.extensions.enableKroki) { cspRule += ; object-src 'self' ${kroki-server-url}; } // Return the CSP rule as a meta tag return <meta http-equiv="Content-Security-Policy" content="${cspRule}">

[ggrossetie]

That's correct. We might even use img-src instead of object-src. Feel free to submit a pull request, I will gladly review it.

[haydencbarnes]

If I use img-src, I will need to include data URIs for base64, right? So...

if (asciidoc.extensions.enableKroki) {
    cspRule += `; img-src 'self' ${kroki-server-url} data:;`

Just checking with your knowledge before I submit a pull request, never worked with CSP rules before.

Update: Actually, looking more in-depth at this, not sure I need the data source. Is a Kroki server running on my own instance sending any data URIs to the Asciidoctor plugin, or is it all just images?

[ggrossetie]

Update: Actually, looking more in-depth at this, not sure I need the data source. Is a Kroki server running on my own instance sending any data URIs to the Asciidoctor plugin, or is it all just images?

Asciidoctor can embed images using :data-uri:: https://docs.asciidoctor.org/asciidoctor/latest/html-backend/manage-images/#embed-images-with-the-data-uri-attribute so I think we need to add data:

[eternalphane]

That's correct. We might even use img-src instead of object-src. Feel free to submit a pull request, I will gladly review it.

We may still need object-src to support interactive kroki diagrams. Currently I have to disable CSP as a workaround.