H5P.JSXGraph

Submitted by alfredwassermann on Mon, 09/27/2021 - 10:45
Forums: 
Developers

Herewidth, I want to contribute the new h5p content type H5P.JSXGraph and ask to consider it for sharing on H5P.org. It's purpose is to allow to include JSXGraph (see https://jsxgraph.org) constructions easily.

The github repository for H5P.JSXGraph is https://github.com/jsxgraph/H5P.JSXGraph .

Best wishes, Alfred Wassermann

otacke's picture

otacke

Sat, 10/09/2021 - 18:49

Hi Alfred!

Glad to see that you're digging into H5P development.

One thing that immediately struck me: It's not really a JSXGraph content type, but rather a general purpose JavaScript executor. You're allowing the author to execute arbitrary JavaScript. Even though this is "only" JavaScript on the client, think of what someone could do if he/she creates malicious code and shares the content leading others - usually less tech-versatile teachers - to run it on their platform. I think the `code` value from semantics definitely needs to be sanitized properly if that's possible at all -- or you should not go that route in the first place and create an editor widget that allows the user to create JSXGraphs without writing code directly.

Best,
Oliver

alfredwassermann

Tue, 10/12/2021 - 18:23

Dear Oliver,

Yes, I agree, you are completely right. I see several possibilities to overcome the security problems:

  1. The most secure approch would be to just allow our own language JessieCode. This language is parsed and should filter out all xss attacks. Additionally no dangerous feature of JavaScript can be accessed (at least I hope so). The drawback is that most JSXGraph constructions are in JavaScript not JessieCode.
  2. Sanitizing JavaScript will always be only partially successful. However, what I plan to to is to replace operators like "<", ">" and "&" in the user contributed code by the corresponding JSXGraph functions JXG.Math.lt(), JXG.Math.gt(), JXG.Math.and(). All other tags are removed. This is TODO.
  3. JSXGraph constructions will be displayed in an iframe created by H5P.JSXGraph. This will not be the H5P iframe from embeddedTypes: ['iframe'], but an iframe built from scratch.
  4. Construct this iframe with the attribute `sandbox="allow-scripts allow-same-origin"`
  5. In the iframe add meta tag:
    '<meta http-equiv="Content-Security-Policy" content="navigate-to \'none\'; connect-src \'none\'; worker-src \'none\'; script-src \'unsafe-inline\' \'self\';">'

This should prevent sending forms, opening pop-ups, communication via XHR, fetch, websockets. 

Would this be enough? What is your opinion?

From an implmentation point of view, I'm struggling with the following problems at the moment: How can I access the data from the installation and from my file library.json in my JavaScript code which creates the iframe? Specifically, I need:

  • the path where the JSXGraph library file (and the css files) are installed in the system hosting H5P
  • to read the configuration from my file library.json (this is not necessary, but would make the code more clean)
  • to include the necessary files to support Math display in the new iframe.

Best wishes and many thanks, Alfred

P.S: The new version is in the branch "security"

 

 

otacke's picture

otacke

Wed, 10/13/2021 - 00:33

Hi Alfred!

I am by no means a security expert. I simply noticed that you've basically created the equivalent of `eval` and that should be a no-no for obvious reasons. I'm aware that sanititation would virtually be impossible, hence my respective hint in my previous post. And as for CSP headers and similar shenanigans: I can’t tell if those will suffice. But I assume someone from the H5P core team might be of better assistance then I can be if you plan to get you content type hosted on the H5P content type hub.

  • Are you looking for `getPath` in H5P core? https://h5p.org/documentation/api/H5P.html#.getPath
  • What's in library.json that you don't know about and would need to access? That file is intended for H5P library configuration, not for custom configuration. Everything you want to be configurable should be done via semantics.json, and everything that you need to run should be included in your content type directory or in a dependency. Yes, MathDisplay uses configuration values placed in the integration, but MathDisplay is not a regular library but the first of its kind (some extension library) that uses some unfinished API.
  • The MathDisplay library will probably not be able to work inside an iframe that you put into the H5P iframe unless MathJax can be configured to also traverse down into the iframe - and also letting the MathDisplay library run inside the iframe will probably involve quite some fiddling.

Best,

Oliver