search

getgrav / grav-plugin-admin

Grav Admin Plugin
http://getgrav.org
MIT License
354 stars 227 forks source link

Admin Console crashes when Javascript inserted #691

Closed so-ri closed 8 years ago

so-ri commented 8 years ago

The Editor crashes if I insert some Javascript, for example encrypted E-Mail adresses. Version 1.0.10

w00fz commented 8 years ago

Need more details. What error, how to reproduce, what os and browser?

so-ri commented 8 years ago

I encrypt E-Mails in web projects like this: from test@example.org, you'll get <script language='JavaScript' type='text/javascript'> var pref = '&#109;a' + 'i&#108;' + '&#116;o'; var attribut = 'hr' + 'ef' + '='; var first = '%74%65%73%74'; var at = '%40'; var last = '&#x65;&#x78;&#x61;&#x6D;&#x70;&#x6C;&#x65;&#x2E;&#x6F;&#x72;&#x67;'; var first2 = '&#x74;&#x65;&#x73;&#x74;'; var at2 = '&#x40;'; var last2 = '&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#111;&#114;&#103;'; document.write( '<a ' + attribut + '\'' + pref + ':' + first + at + last + '\'>' ); document.write( first2 + at2 + last2 ); document.write( '<\/a>' ); </script> <noscript> <span style='display:none; '>are-</span><span style='display:inline; '>&#x74;&#x65;&#x73;&#x74;</span><span style='display:none; '>-xya34</span><span style='display:inline; '>[at]</span><span style='display:none; '>ddks-</span><span style='display:inline; '>&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#111;&#114;&#103;</span> </noscript>

If I insert it to a new page, it suddenly changes and I can only see the E-Mail adress - like if you would insert the script at the top of my post into a empty html-file.

Browser: Google Chrome, OS Windows 10 Pro.

w00fz commented 8 years ago

I tried replicating without success on both Windows and Mac:

Windows 10 - Chrome Version 51.0.2704.106 m (64-bit) Mac OS X 10.11.6 Beta - Version 52.0.2743.60 beta (64-bit)

Could you check if it's perhaps some extension you are running on Chrome that's interfering? Maybe try in Incognito Mode which disables all of the extras.

so-ri commented 8 years ago

I'm also working with Chrome 51.0.2704.106 m, the same in the Inkognito-Mode. Here a video: https://www.dropbox.com/s/288p0efjzsztyiz/grav.mp4?dl=0

w00fz commented 8 years ago

I'm not sure why it would act like that for you, it also looks like you still have Chrome extensions running in incognito mode. Perhaps try a different browser or try disabling some extensions.

For me it just pastes the code in and nothing happen to the page.

so-ri commented 8 years ago

I've installed Mozilla Firefox and tested it again - now, when I paste the code in, Mozilla asks me 3-4 times if I really would leave this site. When I click "yes", the same happens, when I click "no", it just pastes the code. Don't know if it's pertinent, but Grav isn't installed on a webserver, but installed local on a XAMPP-"Server".

But for me it's okay now, thank you for your patience!

w00fz commented 8 years ago

Somehow when you paste that code the browser refresh gets triggered. This is very weird. Have you tried pasting other different things? Perhaps other random js, to see if it's specifically just that code or something else?

so-ri commented 8 years ago

Yes, It crashes already, when I insert <style>

edit: In the browser, the E-Mail now looks like this: E-Mail: <a href='mailto:%74%65%73%74%40example.org'>test@example.org</a> The same happens when i insert the script directly into the .md file.

flaviocopes commented 8 years ago

I got the issue in Chrome/Firefox when I paste

<script language='JavaScript' type='text/javascript'> var pref = '&#109;a' + 'i&#108;' + '&#116;o'; var attribut = 'hr' + 'ef' + '='; var first = '%74%65%73%74'; var at = '%40'; var last = '&#x65;&#x78;&#x61;&#x6D;&#x70;&#x6C;&#x65;&#x2E;&#x6F;&#x72;&#x67;'; var first2 = '&#x74;&#x65;&#x73;&#x74;'; var at2 = '&#x40;'; var last2 = '&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#111;&#114;&#103;'; document.write( '<a ' + attribut + '\'' + pref + ':' + first + at + last + '\'>' ); document.write( first2 + at2 + last2 ); document.write( '<\/a>' ); </script> <noscript> <span style='display:none; '>are-</span><span style='display:inline; '>&#x74;&#x65;&#x73;&#x74;</span><span style='display:none; '>-xya34</span><span style='display:inline; '>[at]</span><span style='display:none; '>ddks-</span><span style='display:inline; '>&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#111;&#114;&#103;</span> </noscript>

in the page and then I click the Preview button, I get a blank page with the email address, either it's the JS doing something the browser does not like, or it's the editor freaking out.

You can do the same thing without pasting this by enabling Twig processing in the page settings, and adding {{"youraddress@gmail.com"|safe_email}}

so-ri commented 8 years ago

Ah okay, thank you!

w00fz commented 8 years ago

I was finally able to reproduce this, by accident. I had your snippet in one of my testing pages and as I was testing something else I hit the preview of the editor which caused the page to completely go blank and display the email address.

I now see what the issue is and it's not Grav related per se as when the page gets previewed, anything gets processed and renders as HTML based on what was input in the content.

Your JS code is fundamentally broken. You should NEVER use document.write, it's bad practice and can lead to issues like this one because it overrides parts of the page, the same page that we are using to show the admin. This could potentially be an issue in frontend too.

The modern DOM is much more advanced, there are tons of more reliable and safe ways to manipulate it.

https://developer.mozilla.org/en-US/docs/Web/API/Document

My advice, if you still want to use JS as a solution, is to find a snippet that use DOM methods. Create a text node, remove the previous node, add the new node.

Otherwise I would stick to @flaviocopes' twig suggestion which is even more safer since you get it rendered safe from the very beginning rather than relying on JS to manipulate it AFTER the facts.