Hi, I've noticed a strange behavior with Shopify's page editor and would like to get a technical response from someone with knowledge of the issue. It would also be great to hear if anyone has experienced this / been burned by it.
Shopify's page editor seems to strip stylesheet links from page HTML, but somehow caches them and renders pages correctly. Subsequent edits to a page HTML will break the page since the stylesheet links are not included in the HTML the editor shows the user. Thus, saving an edited page causes Shopify to no longer include the stylesheet link with the page.
# Steps to Reproduce
1. Edit HTML in Shopify's page editor through Online Store > Pages > Add Page and then click the "<>" in the upper right corner to edit the code.
2. Write some HTML and include a stylesheet link, for example:
<link rel="stylesheet" type="text/css" href="https://cdn.getshogun.com/5d0951234360f7c005035a3ec.css">
3. Save the page and inspect the page source. You'll see the link where it should be.
4. Exit the page editor
5. Now re-open the page editor for your page and click "<>" again
6. Observe that your stylesheet link is not included in the page source. Weird.
7. Make some trivial edit, like adding a space somewhere.
9. Save and then reload your page in the browser (with browser caching disabled). Inspect the page source and realize the stylesheet link is no longer there. Your page probably looks wrong now as well.
Why does Shopify do this? I've tested several times and this appears to be a consistent and deliberate behavior of the pages editor.
This is default behavior for every sort of input/textarea.
You'd not want to allow users (not even the admin, in this case) to inject external CSS or JS through an input. If it were possible it'd be a massive security flaw, actually, since it's painfully easy to hack your way into a website like this.
If you want to add custom CSS or JS do it through the "edit code" page.
The Shopify RTE is actually using a custom version of TinyMCE nicely wrapped in a few Polaris components.
TinyMCE may sanitize the input according to its config.
According to the W3C specks, the <style> element only permitted parent is <head>. I am not exactly sure but TinyMCE may drop the style as it is not valid.
These responses are interesting since even though Shopify appears to sanitize the input, it actually faithfully serves up the stylesheets when users access the page. The problem only arises if the admin later tries to edit the HTML content of the page that Shopify regurgitates in its editor.
If Shopify wants to sanitize input, that's fine, but it should be sanitized from the start and warn the user that certain content is being stripped from the input. Silently stripping info and only actually stripping it for subsequent edits after the first is pretty surprising behavior.
Regarding the security implications, I won't pretend to be an expert. However, I did notice that Shopify's page editor doesn't seem to be stripping script tags, which you'd think open up many more possibilities for malicious actors than stylesheets do.
Apps like Shogun **do** include stylesheets this way, so if you later manually edit the HTML you end up getting burned.
I'd like to see an official response from Shopify explaining why this behavior exists in the first place and why it's implemented in such a user-surprising way. As is, this seems like a bug.