<div id='app'>{{ userContent }}</div>
In userContent, if a line starts with - I want to style only that line red. I can modify userContent data in js with the class for those lines and use v-html but then I lose XSS protection. Is there any way to have XSS protection with Vue.js but also be able to style the userContent?
I dont think this is possible without creating new elements from the user provided string.
You could parse the string yourself using a regular expression to match the lines starting with a hyphen, something like (?<=\-)(.*?)(?=\n) or \-(.*?)\n, wrap that content in a new element with a class, and then style it, but you would then need to inject that back into the html, which I believe would then open you up to XSS, same as with v-html.
To my knowledge and after a quick search there doesnt seem to be any way to do this purely with CSS.
Related
I have a web page with control, that render user's HTML markup.
I want remove all JS calls (and CSS, I guess) to prevent users from injecting malware code. Replacing all script tags and all onclick with others handlers seems to be a bad idea, so questin is about the best solution for this XSS problem in .Net world.
I'd strongly suggest not going down the regex route (You can't parse HTML with Regex), and consider something like HTMLAgilityPack.
This would allow you to remove all script elements, as well as remove all event handlers from elements regardless of how they're set up.
The alternative is to escape all HTML input, and then manually parse the particular tags you're interested in.
<b>Hello</b>
Becomes
<b>Hello</>
And you can then match <(b|i|u|p|em|othertagsgohere)>(.+?)</$1> so that it will only match tags with no attributes on them of the types that you're interested in and. But ultimately I think the HTMLAgiltiyPack route is the better one.
Is there any way to force double line breaks to be preserved?
I mean, NOT across the whole site, but just inside a specific container, only in the editor (javascript). The content saved to the post content should be filtered normally.
Do you know of any property or class that could make wpautop not to catch them and preserve them?
Or what part of wpautop should I hack to make it skip the conversion when the BR tags have some class?
I could add the class manually, and I don't need the modified wpautop filter to run in the whole post or in PHP, just in the editor in JS.
Thanks.
I've got a js-function which takes string as a parameter and get it displayed in a div element. Such string may contain html tags.
How do I force JS display inner text in div-elements as html-text with html-tags. And, also, what is an adequate way to filter particular tags, i.e. apply certain tags for styling and just print others.
You just need to replace & and < (and optionally > if you like, but you don't have to) with their respective entities, using String#replace (spec, MDC) for instance.
And, also, what is an adequate way to filter particular tags, i.e. apply certain tags for styling and just print others.
To put directly user inserted HTML code is dangerous for XSS. You should use some tool to sanitize HTML code (here on StackOverflow, for example, you can use some HTML tags).
As posted in this question here on SO you can use this client-side sanitizer: http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/plugin/html-sanitizer.js
On the other hand you may need to do this on the server-side, which one depends on your environment (ASP.NET? PHP?).
I understand that using custom html tags is improper for a variety of reasons, but I wanted to run a specific situation by you that might warrant a custom html tag and hopefully get told otherwise or possibly a better way of achieving my goal.
Throughout my code I have what I term as templates that are made up of a div tag with a template and a hidden class attached to it. This is not visible on the screen, but basically these "template" tags contains html that I use in Javascript to create a variety of different items. I do this so that I can style my templates in html rather than have to worry about mixing CSS in with my Javascript.
<!-- TEMPLATE -->
<div class="template hidden">
<span>Random Container</span>
Random Button
</div>
In javascript I would do something like
var template = document.getElementById("template");
var clone = template.cloneNode(true);
clone.removeClass("template hidden");
I would rather be able to do something like this
<template class="hidden">
<span>Random Container</span>
Random Button
</template>
So that if I have multiple templates in a single div I can grab them all rather than having to give them unique class names. Of course my reasoning for needing an implementation goes a lot deeper than this, but its not necessary to waste your time with the details. Let's just say that it will help clean up my Javascript ALOT.
Because the custom template tag is hidden and really is nothing more than a container that is convenient to call within javascript with document.getElementsByTagName("template"); Is this ok to do? I would probably prefix the tag with a custom name in case template ever gets implemented into html.
Modern browsers generally “support” custom tags in the sense of parsing them and constructing DOM nodes, so that the elements can be styled and processed in scripting.
The main problem is IE prior to IE 9, but it can be handled using document.createElement('...') once for each custom tag name.
Another problem is that validators will report the tags as errors, and if there are loads of such errors, you might not notice some real errors in markup. In principle you can create your own DTD to deal with this (I have an HTML DTD generator under construction, but it is trickier than I expected...).
With these reservations, use custom tags if they essentially simplify your job as compared with using classes.
Why not use one of HTML5's data attributes? They are for storing private data or custom info.
For your case, you could add data-type="template" or data-name="template" and then search and remove based on that. One simple function just like you would write to remove your <template> tag, but without breaking rules.
So, using your example, <div data-type="template" class="hidden"></div>
I am looking for a tag that i can use to mark out a position in the html, which i can then find later using JQuery. However, I need the tag to be as useless as possible: even empty divs and spans can cause the layout to change depending on the CSS rules you set. For that matter, even rubbish tags that html doesn't understand seem to acquire styles from css, and I don't think there is any way to find comments via DOM traversal?
This tag will be used to mark out the start and end of a chunk of HTML to be Ajaxed. I do not want to wrap the whole chunk in a div or span (which i what i'm doing now), because this can affect how the CSS cascades and i want the fact that the html is marked out as a chunk to be completely transparent to the programmer (me).
Any ideas?
edit: I just thought of using empty script tags. Those should be completely inert and invisible. I shall look into it
edit: How could i forget about display: none? stupid stupid stupid
Script tags
Anchor tags <a name...>
Can you use comment tags: <!-- whatever -->? Parser would allow you to distinguish it.
Given that you're talking about trying to use comments or <script> tags it seems that you don't want the content of your "chunk" to be visible to the user? If so, why can't you just wrap it like this:
<div style="display:none;" id="myChunk1">...your content...</div>
That won't interfere with the layout. If you have multiple "chunks" on the page use class="chunkClass" instead of setting the style inline.
Using jQuery you can easily get access to the content, delete the whole chunk, replace it, make it visible, etc.
If one extra <div> or <span> is screwing up your layout there's probably something else going on with your CSS.
[Responding to the title, not the actual scenario] If PHP is involved, <?php ?> makes a dandy no-op tag; e.g.,
<p>No space between this<?php
?>that.</p>
will render as
No space between thisthat.
(except this facility does not do the Right Thing for embedded PHP multi-line tags, so the preceding was coded without any embedded newlines).