Describe the bug
Current sandbox settings on the Markdown editor preview iframe no longer allow scripts to interact with it. Since this is the easy way to add plug-ins for Markdown-it that allow custom syntax, those scripts no longer work.
Additionally, when the 'allow-scripts' item is added to the iframe, it appears that even though the correct html is being submitted in the post request, the back end isn't using that html.
Steps To Reproduce
Steps to reproduce the behavior:
- Install Bookstack
- Add the Custom Container Markdown-it plug in to custom header info in settings
- Add in line script to custom header info to configure parsing of custom container
- Edit a page to contain a custom container
Expected behavior
Expected the custom container to turn into a div, and then use that div in the page.
Screenshots
Your Configuration (please complete the following information):
- Exact BookStack Version (Found in settings): v0.31.0+
- PHP Version: 7.3 and 7.4
- Hosting Method (Nginx/Apache/Docker): Apache
Additional context
I'm sure there are security reasons why we don't want to enable scripts on iframes as a default. However, this is one of the only ways that an end user can add custom functionality to the site without having to change the code itself. If there's not a way to safely re-enable the behavior, other options for enabling custom Markdown might be needed.
Also, here's the example of the applicable info that I've been putting in the custom header:
<style>
blockquote {
overflow: visible;
}
blockquote > p:last-child {
margin-bottom: 0em;
}
.grid-card li {
font-size: 0.7rem;
margin: 0;
line-height: 1.6em;
}
code {
margin-bottom: 0;
}
.page-content hr {
clear: none !important;
}
div.top-image {
width: 100%;
margin-left: 16px;
}
@media screen and (min-width: 600px) {
div.top-image {
width: 45%;
}
}
@media screen and (min-width: 880px) {
div.top-image {
width: 40%;
}
}
@media screen and (min-width: 1000px) {
div.top-image {
width: 35%;
}
}
@media screen and (min-width: 1400px) {
div.top-image {
width: 30%;
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/markdown-it-container@2.0.0/dist/markdown-it-container.min.js"></script>
<script>
window.addEventListener('editor-markdown::setup', event => {
var md = event.detail.markdownIt;
md.set({breaks: true});
console.log('MARKDOWN-EDITOR-SETUP', md);
md.use( window.markdownitContainer, 'sidebar', {
validate: function(params){
return params.trim().match(/^sidebar\s*(.*)$/);
},
render: function(tokens, idx){
var m = tokens[idx].info.trim().match(/^sidebar\s*(.*)$/);
if (tokens[idx].nesting === 1) {
// opening tag
return '<div class="grid-card top-image float ' + md.utils.escapeHtml(m[1]) +
'"><div class="grid-card-content">\n';
} else {
// closing tag
return '</div></div>\n';
}
},
});
md.use( window.markdownitContainer, 'card', {
validate: function(params){
return params.trim().match(/^card\s*(.*)$/);
},
render: function(tokens, idx){
if (tokens[idx].nesting === 1) {
// opening tag
return '<div class="grid-card"><div class="grid-card-content">\n';
} else {
// closing tag
return '</div></div>\n';
}
},
});
});
</script>
Describe the bug
Current sandbox settings on the Markdown editor preview iframe no longer allow scripts to interact with it. Since this is the easy way to add plug-ins for Markdown-it that allow custom syntax, those scripts no longer work.
Additionally, when the 'allow-scripts' item is added to the iframe, it appears that even though the correct html is being submitted in the post request, the back end isn't using that html.
Steps To Reproduce
Steps to reproduce the behavior:
Expected behavior
Expected the custom container to turn into a div, and then use that div in the page.
Screenshots
Your Configuration (please complete the following information):
Additional context
I'm sure there are security reasons why we don't want to enable scripts on iframes as a default. However, this is one of the only ways that an end user can add custom functionality to the site without having to change the code itself. If there's not a way to safely re-enable the behavior, other options for enabling custom Markdown might be needed.
Also, here's the example of the applicable info that I've been putting in the custom header: