How to apply CSS with pages API ?

[CartonKam]

I would like to create page with API.
No matter I put the css in inline or internal way, API fail to handle it.
Are there any way that can apply CSS to API call? Thank you.

[chriscas]

Hi @CartonKam,

I can probably at least point you in the right direction...  You'll definitely need to use inline CSS, and there are only certain properties Canvas allows.  I think you're running into an issue of escaping or encoding your html before passing it via the API.  If you create a page in RCE and then get it with the API, you'll see:

"body": "<p style=\"color: red;\">A red paragraph</p>"

The slashes essentially escape the double quotes so there isn't confusion as to where the string begins or ends.  I'd suggest trying that to see if posting that would work as you expect.

I've also moved this to the developers area where people who are more coding/api experts than me hang out, so someone else might chime in with even more useful info or exact advice.

Hope this helps a bit!

-Chris

[CartonKam]

Thank you Chris. The HTML editor allowlist is very useful for me.
I have tried puting the code with escape character in Postman and try to create the page.
But API still return a blank page for me.
Can I directly input the CSS in Parameter "wiki_page[body]" ?

[matthew_buckett · Accepted solution]

Creating a wiki page with inline CSS works for me, the difference i think is that I sent the parameters in the body of the request instead of as query parameters. Attached is a screenshot of a request:

This returned the following JSON from Canvas which appears to show the page correctly having CSS:

{
    "title": "API Page-2",
    "created_at": "2023-05-12T06:21:45Z",
    "url": "api-page-2",
    "editing_roles": "teachers",
    "page_id": 383,
    "last_edited_by": {
        "id": 112,
        "anonymous_id": "34",
        "display_name": "Matthew Buckett",
        "avatar_image_url": "https://secure.gravatar.com/avatar/0b238ed6001c42521b1ae20ea78e66ad?s=128&d=identicon",
        "html_url": "https://oxeval.instructure.com/courses/164/users/112",
        "pronouns": null
    },
    "published": false,
    "hide_from_students": true,
    "front_page": false,
    "html_url": "https://oxeval.instructure.com/courses/164/pages/api-page-2",
    "todo_date": null,
    "publish_at": null,
    "updated_at": "2023-05-12T06:21:45Z",
    "locked_for_user": false,
    "body": "<p style=\"color: red;\">A red paragraph</p>"
}

Postman should do the escaping for you when you send a request to Canvas, you only need to do escaping if you are sending the request body as JSON.

[CartonKam]

Thank you for your help Matthew🤗

[cgaudreau]

@CartonKam @matthew_buckett Does this method allow you to circumvent uploading a CSS file to the Theme Editor if using in a single course?

[matthew_buckett]

@cgaudreau Nope, sorry. The same filtering is applied when using the API as when using the web UI so it will still remove style tags.

[cgaudreau]

Ah...I had a feeling, but couldn't hurt to ask. Thanks for confirming @matthew_buckett.

[matthew_buckett]

Yep, never hurts to ask, if the API didn't do filtering in the same way as the UI then it could be a security issue as some of the HTML filtering is there to prevent to content from being dangerous (stealing cookies, performing actions on behalf of the user, etc).