Student HTML Practice Tool

[jhveem]

I'm brainstorming a tool for our web development class that would allow students to practice HTML within a Canvas page. The format would be they would enter some html in a textarea, and see their parsed html right below it. I've included a mockup image.

Functionally I'm imagining it would be something like using jquery to watch the text area and then set the html of an output div based on the text in the text area. Here's a quick sample of just that part.

input.on('input', function () {

    display.html($(this).val());

});

However, I'm wondering what the security concerns would be with this. With my limited understanding, I don't see how it would be any different than a student running scripts in the console, but I'm guessing I'm missing something.

[James]

 @jhveem  

This is a security issue so JavaScript is denied in the Rich Content Editor. Running in the Console is running in the user's own browser. Saving it in Canvas means it runs in other people's browser when they view the page. There is also a security policy about whether to allow JavaScript to run in uploaded files and the local Canvas admin can decide.

If you want to allow it in Canvas, then you will need to embed it in an iframe so that it sandboxed from the rest of Canvas. The preferred way would be to host the content somewhere outside Canvas otherwise you run up against the security policy.

[jhveem]

The javascript wouldn't be saved in the editor. Instead, it would be an empty div that's replaced with the input box which allows typing HTML on page load, that way students could only run things locally.