#16 Unintended Allowance of Inline CSS & Suggestion For Blog Pages

Open
opened 2 weeks ago by boo · 0 comments
boo commented 2 weeks ago

Context

Even though it’s fun to use it for customizing blog pages, this is very much unintended and works in the post editor too so I figured I should report it. I don’t think the userbase of this site would go ham and destroy the dashboard but you can’t be too certain 🤷‍♂️

Unintended Allowance of Inline CSS in TinyMCE:

Since you don’t have HTML view enabled on the editor I’ve been using inspect → edit as HTML to manually type stuff out when TinyMCE is being a pain in the ass and randomly refusing to let me use spaces (I have no idea why it does this but it drives me insane. This is the only way to fix it without having to refresh and lose all formatting).

Well, I got curious and found out that while <p>, <ol>, <ul>, & <del> ignore inline CSS, <strong>, <em>, <a>, & <img> will render inline CSS added to them via inspect. There also doesn’t seem to be a restriction on the styles you can apply to them (including position and display, means you can be mischevious and break out of bounds of posts).

You could disable all styles or just those that are ripe for abuse by specifying a list of allowed styles for each element when you init TinyMCE.

I’m fairly certain that adding the following will disable all inline CSS (it did when I tested it in this fiddle):

valid_styles: {
        "*": ""
    }

Unintended (?) Allowance of inline CSS in blog description text input:

Links added to the blog description text input can also be styled with unrestricted inline CSS, but only if the inline CSS comes after the href. example:

  • <a href="/" style="color:red;">link</a> will render as a red link.
  • <a style="color:red;" href="/">link</a> will render as plaintext.

Not sure if this is intentional or not so I’m including it anyways.

Process

TinyMCE

Right click and inspect any bold or italic text, any link, or any image. Add inline CSS via inspect → edit as HTML, submit the post or save the changes to the blog page.

Blog Description Text Input

Add style="[STYLES HERE]" after the href="[LINK HERE]" and links will render the link with applied styles.

Screenshot

Example of what you can do with the inline CSS in a text post is attached. It features larger, colorful text and an image using fixed positioning to breaking out of the post’s bounds.

The Suggestion for Blog Pages

I know the plan is to replace TinyMCE with an editor of your own design in the near future, but until you’re able to I’d love it if you could enable the Source Code view button & allow for a small handful of style options just for blog pages (and add some HTML & inline CSS support you build the new page editor in the future).

My ideas for allowed styles for blog pages only (formatted for TinyMCE):

valid_styles: {
        "p": "font-family,text-align,font-size,color,padding,margin,letter-spacing,text-shadow",
        "strong": "font-size,color,letter-spacing,text-decoration",
        "em": "font-size,color,letter-spacing,text-decoration",
        "a": "font-size,color,letter-spacing,text-decoration",
        "img": "width,height,border,border-radius,float,padding,margin,box-shadow"
    }

You could remove the allowance of margin for images and paragraphs if you’re worried about text/images being moved out of bounds of the card body.

## Context Even though it's fun to use it for customizing blog pages, this is very much unintended and works in the post editor too so I figured I should report it. I don't *think* the userbase of this site would go ham and destroy the dashboard but you can't be too certain 🤷‍♂️ #### Unintended Allowance of Inline CSS in TinyMCE: Since you don't have HTML view enabled on the editor I've been using inspect → edit as HTML to manually type stuff out when TinyMCE is being a pain in the ass and randomly refusing to let me use spaces (I have no idea why it does this but it drives me insane. This is the only way to fix it without having to refresh and lose all formatting). Well, I got curious and found out that while ``<p>``, ``<ol>``, ``<ul>``, & ``<del>`` ignore inline CSS, ``<strong>``, ``<em>``, ``<a>``, & ``<img>`` will render inline CSS added to them via inspect. There also doesn't seem to be a restriction on the styles you can apply to them (including position and display, means you can be mischevious and break out of bounds of posts). You could disable all styles or just those that are ripe for abuse by specifying [a list of allowed styles for each element](https://www.tiny.cloud/docs/configure/content-filtering/#valid_styles) when you init TinyMCE. I'm fairly certain that adding the following will disable all inline CSS (it did when I tested it in [this fiddle](http://fiddle.tinymce.com/Sweaab)): ``` valid_styles: { "*": "" } ``` #### Unintended (?) Allowance of inline CSS in blog description text input: Links added to the blog description text input can also be styled with unrestricted inline CSS, but only if the inline CSS comes after the ``href``. example: - ``<a href="/" style="color:red;">link</a>`` will render as a red link. - ``<a style="color:red;" href="/">link</a>`` will render as plaintext. Not sure if this is intentional or not so I'm including it anyways. ## Process #### TinyMCE Right click and inspect any bold or italic text, any link, or any image. Add inline CSS via inspect → edit as HTML, submit the post or save the changes to the blog page. #### Blog Description Text Input Add ``style="[STYLES HERE]"`` after the ``href="[LINK HERE]"`` and links will render the link with applied styles. ## Screenshot Example of what you can do with the inline CSS in a text post is attached. It features larger, colorful text and an image using fixed positioning to breaking out of the post's bounds. ## The Suggestion for Blog Pages I know the plan is to replace TinyMCE with an editor of your own design in the near future, but until you're able to I'd love it if you could enable the Source Code view button & allow for a small handful of style options just for blog pages (and add some HTML & inline CSS support you build the new page editor in the future). My ideas for allowed styles for blog pages only (formatted for TinyMCE): ``` valid_styles: { "p": "font-family,text-align,font-size,color,padding,margin,letter-spacing,text-shadow", "strong": "font-size,color,letter-spacing,text-decoration", "em": "font-size,color,letter-spacing,text-decoration", "a": "font-size,color,letter-spacing,text-decoration", "img": "width,height,border,border-radius,float,padding,margin,box-shadow" } ``` You could remove the allowance of margin for images and paragraphs if you're worried about text/images being moved out of bounds of the card body.
Sign in to join this conversation.
Loading…
Cancel
Save
There is no content yet.