Html plots not rendered in Label Studio 1.13.0

[mmaallttee]

Hi there, here is a short problem description:

I created an plot with python bokeh. The output is an html file. Now I want to render that plot in the Label Studio Labelling interface, however, it does not show up.

My setup:

• I have a local Label Studio instance running via Docker
• I use a local storage setup for fetching the html files. Generally that works, a simple dummy html file with just a bit of text is found and displayed correctly.
• This is the Labelling interface I use:

<View>
  <HyperText name="website" valueType="url" value="$website" inline="false"/>
  <Header value="Above should be the html plot rendered, obviously it is not"/>
  <Rating name="rating" toName="website" maxRating="10" icon="star" size="medium" />
</View>

• This is the task source:

{
  "id": 2,
  "data": {
    "website": "/data/local-files/?d=abc/time_series_inline.html"
  },
  "annotations": [],
  "predictions": []
}

• This is the outcome when I try to label the task
  
  

Do you have any ideas? I would appreciate your help.

Best,
malte

[makseq]

This HTML probably contains JavaScript. All JavaScript scripts are removed for security purposes from labeling tasks.

Label Studio Enterprise supports custom JavaScripts as a separate configuration for your labeling interface. If you rely heavily on it, consider switching to Label Studio Enterprise.

[mmaallttee]

Thanks for the swift reply!

Makes sense to me, just a (probably stupid) follow-up question: If I would not use the html file directly, but instead host and serve the html in another web app (for example an Azure web app, where I would have control on the CORS settings), would hat help? So in my labeling configuration I would refer to the website where the bokeh plot lives via <iframe src=https:// … >

Would that help?

Best,
malte

[makseq]

No, anyway scripts won’t work even with iframe.

If you want to run your custom scripts, you can check Label Studio Enterprise: Label Studio Enterprise Documentation — Custom Scripts

[s204159]

Hey,

I am trying to implement Label Studio as part of a research project at my University.

We want to label K3D-plots that have been saved to HTML files.
These files can be hosted on a separate server if necessary.

Is there any way we can display these plots without paying for Label Studio enteprise as this exceeds our grant budget?

Or can the security be disabled in the open-source self hosted version? As this will be a local tool, the ‘security concerns’ are not applicable.

[makseq]

What kind of labeling do you expect to have?
Is it choices or text input? Or you want to draw something on 3d canvas?

Custom scripts from LS enterprise can enable you to show 3d scenes, like it’s done in this example with plotly: Custom script examples — Data Labeling

[s204159]

We want to show a 3d HTML plot generated with K3D. So the plot is contained in a single HTML file. Both HTML, CSS, and Javascript.

The user should then be able to see and interact with the plot. While as an example label it as being Over-segmentation, Under-segmentation, or Exact match.

Is this possible?

When reading the Custom scripts in LS enterprise, I can only see a way to use plotly not to show an HTML file with Javascript code directly?

[makseq]

It’s still unclear what type of labeling you need to have. What is over-segmentation, under, exact match? Is it choices (classes)?

[s204159]

ah sorry it needs to be simple buttons or text input.

Such as

<Choices name="sentiment" toName="text" choice="single">
    <Choice value="over-segmentation"/>
    <Choice value="under-segmentation"/>
    <Choice value="exact match"/>
  </Choices>

[makseq]

This sounds achievable using custom scripts in the enterprise version of LS.

[mmaallttee]

to follow up on s204159 question: is there a way in the community version (even in the code itself and building a custom container for hosting) to disable the security feature that removes all JavaScript for the labelling task?

Of course on doing this on its own risk…

[makseq]

You can technically re-enable JavaScript in HyperText by modifying the Label Studio source code that sanitizes HTML, but there is no built-in switch or setting in the Community Edition to disable the sanitization checks. If you build Label Studio yourself, you could remove or alter the portion that disallows script tags, for example in web/libs/editor/src/utils/html.js where disallowedTags includes script: true. However, be aware this is strongly discouraged from a security standpoint, because the sanitization step prevents malicious scripts from running in Label Studio.

If you still want to proceed, you would:

1. Fork/clone the Label Studio repository.
2. Locate the sanitizeHtml function in web/libs/editor/src/utils/html.js and remove or comment out script from disallowedTags.
3. Build your custom Docker image (or run the project locally) with these changes.

Keep in mind that this disables an important security measure and poses potential risks if your data or environment is exposed to untrusted HTML or tasks.

Links Used: • label-studio/web/libs/editor/src/utils/html.js at develop · HumanSignal/label-studio · GitHub

[s204159]

Thanks for the explanation @makseq

I tried to implement the changes by doing the following.

1. I cloned the label-studio github.
2. I changed line 612 and 613 to false in web/libs/editor/src/utils/html.js

const disallowedTags = {
    script: false,
    iframe: false,
  };

3. I ran the server locally using python label_studio/manage.py runserver
4. Finally I uploaded an html file to the platform with the following code:
   html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
    <h1>Wikipedia Article on Denmark</h1>
    <iframe src="https://en.wikipedia.org/wiki/Denmark" width="100%" height="600px" frameborder="0"></iframe>

    <h3 class="script">This text uses a script.</p>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var element = document.querySelector(".script");
        element.style.fontSize = "24px";
        console.log("Element size increased");
    });
</script>
</body>
</html>

Labeling Interface code

<View>
  <HyperText name="element" value="$text" inline="false">
  </HyperText>
  <Choices name="choice" toName="element" choice="single">
    <Choice value="over-segmentation"/>
    <Choice value="under-segmentation"/>
    <Choice value="exact match"/>
  </Choices>
</View>

This results in the following message in the chrome console:

An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.

So it looks to be working but the iframe is still not displaying and the script is not working. Both works if I load the HTML directly with chrome.

Do i need to compile the source code in some other way, or is there another problem?

@mmaallttee Have you gotten the code working with the changes?