Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Lizmap 3.8 regression : tooltip HTML is not properly rendered in popups anymore #4990

Open
1 task done
vlebert opened this issue Nov 18, 2024 · 7 comments
Open
1 task done
Assignees
Labels
bug javascript Pull requests that update Javascript code popup

Comments

@vlebert
Copy link

vlebert commented Nov 18, 2024

What is the bug? (in English)

Since 3.8 updates, HTML in QGIS tooltip does not seem to be rendered properly.

For exemple this tooltip used to be rendered properly. In 3.8

  • The HTML is broken (why <ul> in not inside <p> anymore)
  • The <script> part is missing

digi-studio 2024-11-18 at 16 48 04

Steps to reproduce the issue

Just load the attached project in Lizmap 3.8

lizmap_regression_popup.zip

It contains a layer with popup HTML configured as

<p>Hello</p>
<p>
<ul>
<li>liste 1</li>
<li>liste 2</li>
</ul>
</p>
<script>console.log("test script")</script>

it renders as

<p>Hello</p>


<p>
</p>
<ul>
<li>liste 1</li>
<li>liste 2</li>
</ul>
<p></p>

And the script is removed.

Versions, safeguards, check summary etc

Versions :

  • Lizmap Web Client : 3.8.4-pre.8065
  • Lizmap plugin : 4.4.4
  • QGIS Desktop : 3.34.6
  • Lizmap.com : Yes
  • QGIS Server : 3.34.11
  • Py-QGIS-Server : 1.9.2
  • QGIS Server plugin DataPlotly : Not installed
  • QGIS Server plugin atlasprint : 3.4.1
  • QGIS Server plugin cadastre : 1.20.0
  • QGIS Server plugin lizmap_server : 2.11.2
  • QGIS Server plugin wfsOutputExtension : 1.8.2
List of Lizmap Web Client modules :
* saas : 1.7.4 * webdav : 1.1.6
List of safeguards :
* Mode : normal
* Allow parent folder : no
* Prevent other drive : yes
* Prevent PG service : no
* Prevent PG Auth DB : yes
* Force PG user&pass : yes
* Prevent ECW : yes

Check Lizmap plugin

  • I have done the step just before in the Lizmap QGIS desktop plugin before opening this ticket. Otherwise, my ticket is not considered valid and might get closed.

Operating system

Lizmap hosting

Browsers

Chrome

Browsers version

Version 1.69.0 (55816)

Relevant log output

No response

@vlebert vlebert added the bug label Nov 18, 2024
@Gustry
Copy link
Member

Gustry commented Nov 18, 2024

The <script> part is missing

This is expected now. See for example #4914 or #4707 It wasn't advised, even before 3.8 to use <script> inside a popup.

This was a security issue, related to XSS. Theses fixes started from version 3.6, continued in 3.7 and was then finished in 3.8.

The HTML is broken (why

    in not inside

    anymore)

Are you sure it's the same <p> ? Very quick debug, can you try to add <p class="test"> jsut to check in the meantime ?

@Gustry Gustry added popup javascript Pull requests that update Javascript code labels Nov 18, 2024
@Gustry
Copy link
Member

Gustry commented Nov 18, 2024

Indeed, there is a difference in the HTML, for instance in QGIS HTML maptip :

<p>First P block 1</p>
<p>
Begin new P block 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
End P block 2
</p>

It gives in LWC :

<p>First P block 1</p>
<p>
Begin new P block 2
</p><ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
End P block 2
<p></p>

@vlebert
Copy link
Author

vlebert commented Nov 18, 2024

Thanks for the information.
Well I see that javascript is not supported anymore inside popups, but I don't see what does it has to do with XSS we are not doing any cross site calls.

The <script> is directly rendered in the HTML document and not embedded as an iframe or something. There should not be any issues with XSS am I wrong ?

Anyway, how am I supposed to reproduce this behaviour with Lizmap Javascript signals (https://docs.lizmap.com/current/en/publish/customization/javascript.html#available-javascript-events)

For example, lizmappopupdisplayed does not return the feature ID so how to have a custom function for specific popups ? Do you have any example ?

What I am trying to do is to render a specific custom code inside a popup. Previously I used to work with iframes but this time I tried to do things cleaner with native Lizmap JS/HTML.

Should I continue to embed external content ?

@Gustry
Copy link
Member

Gustry commented Nov 19, 2024

The security issue was to load external JavaScript which was not part of the core main Lizmap Web Client application and the dedicated media/js folder. (Javascript from a GIS file as well for instance)

For example, lizmappopupdisplayed does not return the feature ID so how to have a custom function for specific popups ? Do you have any example ?

I was curious as well and I look on GitHub : either in this repository, or in the javascript-script-library repository :

I tried this just now, I will let other comment if there is something :

lizMap.events.on({
    lizmappopupdisplayed: function (popup) {
        let popupContainer = document.getElementById(popup.containerId);
        if (!popupContainer) return false;

        Array.from(popupContainer.querySelectorAll('div.lizmapPopupContent input.lizmap-popup-layer-feature-id')).map(element => {
            let val = element.value;
            let featureId = val.split('.').pop();
            let layerId = val.replace('.' + featureId, '');
            console.log(featureId)
            console.log(layerId)
        });
    }
});

Should I continue to embed external content ?

I'm not sure what you mean by "external content", but iframe is supported.

@Gustry
Copy link
Member

Gustry commented Nov 19, 2024

I made a PR to make something a little bit easier #4992

@vlebert
Copy link
Author

vlebert commented Nov 19, 2024

Thanks

@vlebert
Copy link
Author

vlebert commented Nov 19, 2024

I could fix my popup thanks to your help.

I am wondering what do you mean exactly in 3.8 changelog by

Nous vous recommandons fortement d'utiliser la nouvelle API JavaScript lors de l'écriture d'un script JavaScript complémentaire personnalisé.

I visited this doc, but it does not help me : https://docs.3liz.org/lizmap-web-client/js/module-FeatureToolbar.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug javascript Pull requests that update Javascript code popup
Projects
None yet
Development

No branches or pull requests

3 participants