Render hints on server side and don't render them client side (#1564)

* Render hints on the server side inline with challenge descriptions and Pages
* Clean up some of the API responses for hints to include the right data
* Closes #1563

CTFd/api/v1/hints.py

@@ -68,7 +68,7 @@ class HintList(Resource):
         filters = build_model_filters(model=Hints, query=q, field=field)
 
         hints = Hints.query.filter_by(**query_args).filter(*filters).all()
-        response = HintSchema(many=True).dump(hints)
+        response = HintSchema(many=True, view="locked").dump(hints)
 
         if response.errors:
             return {"success": False, "errors": response.errors}, 400
@@ -88,7 +88,7 @@ class HintList(Resource):
     )
     def post(self):
         req = request.get_json()
-        schema = HintSchema("admin")
+        schema = HintSchema(view="admin")
         response = schema.load(req, session=db.session)
 
         if response.errors:
@@ -155,7 +155,7 @@ class Hint(Resource):
         hint = Hints.query.filter_by(id=hint_id).first_or_404()
         req = request.get_json()
 
-        schema = HintSchema()
+        schema = HintSchema(view="admin")
         response = schema.load(req, instance=hint, partial=True, session=db.session)
 
         if response.errors:

CTFd/models/__init__.py

@@ -134,6 +134,13 @@ class Hints(db.Model):
     def description(self):
         return "Hint for {name}".format(name=self.challenge.name)
 
+    @property
+    def html(self):
+        from CTFd.utils.config.pages import build_html
+        from CTFd.utils.helpers import markup
+
+        return markup(build_html(self.content))
+
     def __init__(self, *args, **kwargs):
         super(Hints, self).__init__(**kwargs)
 

CTFd/plugins/dynamic_challenges/assets/create.js

@@ -1,12 +1,4 @@
 CTFd.plugin.run((_CTFd) => {
     const $ = _CTFd.lib.$
     const md = _CTFd.lib.markdown()
-    $('a[href="#new-desc-preview"]').on('shown.bs.tab', function (event) {
-        if (event.target.hash == '#new-desc-preview') {
-            var editor_value = $('#new-desc-editor').val();
-            $(event.target.hash).html(
-                md.render(editor_value)
-            );
-        }
-    });
 })

CTFd/schemas/hints.py

@@ -6,12 +6,12 @@ class HintSchema(ma.ModelSchema):
     class Meta:
         model = Hints
         include_fk = True
-        dump_only = ("id", "type")
+        dump_only = ("id", "type", "html")
 
     views = {
         "locked": ["id", "type", "challenge", "cost"],
-        "unlocked": ["id", "type", "challenge", "content", "cost"],
-        "admin": ["id", "type", "challenge", "content", "cost", "requirements"],
+        "unlocked": ["id", "type", "challenge", "content", "html", "cost"],
+        "admin": ["id", "type", "challenge", "content", "html", "cost", "requirements"],
     }
 
     def __init__(self, view=None, *args, **kwargs):

CTFd/themes/admin/assets/js/pages/challenge.js

@@ -23,12 +23,10 @@ import {
   flagTypeSelect
 } from "../challenges/flags";
 
-const md = CTFd.lib.markdown();
-
 const displayHint = data => {
   ezAlert({
     title: "Hint",
-    body: md.render(data.content),
+    body: data.html,
     button: "Got it!"
   });
 };

CTFd/themes/core/assets/js/pages/challenges.js

@@ -12,8 +12,6 @@ const api_func = {
   users: x => CTFd.api.get_user_solves({ userId: x })
 };
 
-const md = CTFd.lib.markdown();
-
 CTFd._internal.challenge = {};
 let challenges = [];
 let solves = [];
@@ -393,7 +391,7 @@ setInterval(update, 300000); // Update every 5 minutes.
 const displayHint = data => {
   ezAlert({
     title: "Hint",
-    body: md.render(data.content),
+    body: data.html,
     button: "Got it!"
   });
 };
@@ -418,7 +416,7 @@ const displayUnlock = id => {
 
         ezAlert({
           title: "Error",
-          body: md.render(response.errors.score),
+          body: response.errors.score,
           button: "Got it!"
         });
       });